diff --git a/HISTORY.md b/HISTORY.md index ced6955..3ba1ec8 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,13 @@ https://github.com/josdejong/jsoneditor +## 2017-11-15, version 5.10.1 + +- Some styling tweaks in the navigation bar and status bar. +- Don't display status bar in `text` mode (which doesn't yet support + row and col counts). + + ## 2017-11-15, version 5.10.0 - Implemented a navigation bar showing the path. Thanks @meirotstein. diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css index ad57f07..08d6fef 100644 --- a/src/css/jsoneditor.css +++ b/src/css/jsoneditor.css @@ -216,8 +216,8 @@ div.jsoneditor-outer.has-nav-bar { } div.jsoneditor-outer.has-status-bar { - margin: -35px 0 -16px 0; - padding: 35px 0 16px 0; + margin: -35px 0 -26px 0; + padding: 35px 0 26px 0; } textarea.jsoneditor-text, @@ -249,7 +249,7 @@ textarea.jsoneditor-text { tr.jsoneditor-highlight, tr.jsoneditor-selected { - background-color: #e6e6e6; + background-color: #d3d3d3; } tr.jsoneditor-selected button.jsoneditor-dragarea, diff --git a/src/css/navigationbar.css b/src/css/navigationbar.css index 4ed21f6..b4b3d68 100644 --- a/src/css/navigationbar.css +++ b/src/css/navigationbar.css @@ -1,30 +1,21 @@ div.jsoneditor-navigation-bar { width: 100%; height: 26px; - padding: 2px; + line-height: 26px; + padding: 0; margin: 0; + border-bottom: 1px solid #d3d3d3; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #808080; - background-color: #dcdcdc; -} - -div.jsoneditor-navigation-bar:before { - content: ''; - width: 100%; - height: 1px; - background-color: white; - opacity: 0.8; - position: absolute; - left: 0; - margin-top: -3px; + background-color: #ebebeb; + font-size: 10pt; } div.jsoneditor-navigation-bar.nav-bar-empty:after { content: 'Select a node ...'; color: rgba(104, 104, 91, 0.56); position: absolute; - margin-left: 6px; - margin-top: -1px; -} \ No newline at end of file + margin-left: 5px; +} diff --git a/src/css/statusbar.css b/src/css/statusbar.css index eada567..c567200 100644 --- a/src/css/statusbar.css +++ b/src/css/statusbar.css @@ -1,9 +1,15 @@ div.jsoneditor-statusbar { - line-height: 17px; - height: 17px; + line-height: 26px; + height: 26px; + margin-top: -26px; color: #808080; - background-color: #dcdcdc; - margin-top: -17px; + background-color: #ebebeb; + border-top: 1px solid #d3d3d3; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 10pt; + } div.jsoneditor-statusbar > .jsoneditor-curserinfo-label { @@ -11,13 +17,9 @@ div.jsoneditor-statusbar > .jsoneditor-curserinfo-label { } div.jsoneditor-statusbar > .jsoneditor-curserinfo-val { - margin-right: 4px; + margin-right: 12px; } div.jsoneditor-statusbar > .jsoneditor-curserinfo-count { margin-left: 4px; } - -div.jsoneditor-statusbar > span { - font-size: 12px; -} \ No newline at end of file diff --git a/src/css/treepath.css b/src/css/treepath.css index 2f90ce1..3cce2ed 100644 --- a/src/css/treepath.css +++ b/src/css/treepath.css @@ -1,6 +1,6 @@ div.jsoneditor-treepath { - padding: 3px 0 2px 5px; + padding: 0 5px; overflow: hidden; } diff --git a/src/js/textmode.js b/src/js/textmode.js index 9ba47bb..d9c9425 100644 --- a/src/js/textmode.js +++ b/src/js/textmode.js @@ -247,15 +247,14 @@ textmode.create = function (container, options) { } if (options.statusBar) { - - util.addClassName(this.content, 'has-status-bar'); + if (this.mode === 'code') { + util.addClassName(this.content, 'has-status-bar'); - this.curserInfoElements = {}; - var statusBar = document.createElement('div'); - statusBar.className = 'jsoneditor-statusbar'; - this.frame.appendChild(statusBar); + this.curserInfoElements = {}; + var statusBar = document.createElement('div'); + statusBar.className = 'jsoneditor-statusbar'; + this.frame.appendChild(statusBar); - if (this.mode == 'code') { var lnLabel = document.createElement('span'); lnLabel.className = 'jsoneditor-curserinfo-label'; lnLabel.innerText = 'Ln:'; @@ -280,23 +279,23 @@ textmode.create = function (container, options) { this.curserInfoElements.colVal = colVal; this.curserInfoElements.lnVal = lnVal; - } - - var countLabel = document.createElement('span'); - countLabel.className = 'jsoneditor-curserinfo-label'; - countLabel.innerText = 'selected'; - countLabel.style.display = 'none'; - var countVal = document.createElement('span'); - countVal.className = 'jsoneditor-curserinfo-count'; - countVal.innerText = 0; - countVal.style.display = 'none'; + var countLabel = document.createElement('span'); + countLabel.className = 'jsoneditor-curserinfo-label'; + countLabel.innerText = 'characters selected'; + countLabel.style.display = 'none'; - this.curserInfoElements.countLabel = countLabel; - this.curserInfoElements.countVal = countVal; + var countVal = document.createElement('span'); + countVal.className = 'jsoneditor-curserinfo-count'; + countVal.innerText = 0; + countVal.style.display = 'none'; - statusBar.appendChild(countVal); - statusBar.appendChild(countLabel); + this.curserInfoElements.countLabel = countLabel; + this.curserInfoElements.countVal = countVal; + + statusBar.appendChild(countVal); + statusBar.appendChild(countLabel); + } } this.setSchema(this.options.schema, this.options.schemaRefs); @@ -335,9 +334,10 @@ textmode._onSelect = function () { if (selectionRange.start !== selectionRange.end) { this._setSelectionCountDisplay(Math.abs(selectionRange.end - selectionRange.start)); } - } else if (this.aceEditor) { + } else if (this.aceEditor && this.curserInfoElements) { var curserPos = this.aceEditor.getCursorPosition(); var selectedText = this.aceEditor.getSelectedText(); + this.curserInfoElements.lnVal.innerText = curserPos.row + 1; this.curserInfoElements.colVal.innerText = curserPos.column + 1; this._setSelectionCountDisplay(selectedText.length); @@ -393,8 +393,8 @@ textmode._onBlur = function (event) { }; textmode._setSelectionCountDisplay = function (value) { - if (this.options.statusBar) { - if (value && this.curserInfoElements.countVal) { + if (this.options.statusBar && this.curserInfoElements) { + if (value && this.curserInfoElements && this.curserInfoElements.countVal) { this.curserInfoElements.countVal.innerText = value; this.curserInfoElements.countVal.style.display = 'inline'; this.curserInfoElements.countLabel.style.display = 'inline';