Don't display statusbar for text mode, some CSS tweaks.

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.

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,

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;
+  margin-left: 5px;
 }

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;
-}

src/css/treepath.css

@@ -1,6 +1,6 @@
 
 div.jsoneditor-treepath {
-  padding: 3px 0 2px 5px;
+  padding: 0 5px;
   overflow: hidden;
 }
 

src/js/textmode.js

@@ -247,15 +247,14 @@ textmode.create = function (container, options) {
   }
 
   if (options.statusBar) {
+      if (this.mode === 'code') {
+        util.addClassName(this.content, 'has-status-bar');
 
-      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 = 'characters selected';
+        countLabel.style.display = 'none';
+
+        var countVal = document.createElement('span');
+        countVal.className = 'jsoneditor-curserinfo-count';
+        countVal.innerText = 0;
+        countVal.style.display = 'none';
+
+        this.curserInfoElements.countLabel = countLabel;
+        this.curserInfoElements.countVal = countVal;
+
+        statusBar.appendChild(countVal);
+        statusBar.appendChild(countLabel);
       }
-    
-      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';
-
-      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';