Merge pull request #686 from orangemug/fix/issue-322

Added tip to JSON editor about how to unfocus

src/components/layers/JSONEditor.jsx

@@ -51,9 +51,11 @@ class JSONEditor extends React.Component {
   }
 
   constructor(props) {
-    super(props)
+    super(props);
+    this._keyEvent = "keyboard";
     this.state = {
       isEditing: false,
+      showMessage: false,
       prevValue: this.props.getValue(this.props.layer),
     };
   }
@@ -82,17 +84,24 @@ class JSONEditor extends React.Component {
     this._doc.on('blur', this.onBlur);
   }
 
-  onFocus = () => {
+  onPointerDown = (cm, e) => {
+    this._keyEvent = "pointer";
+  }
+
+  onFocus = (cm, e) => {
     this.props.onFocus();
     this.setState({
-      isEditing: true
+      isEditing: true,
+      showMessage: (this._keyEvent === "keyboard"),
     });
   }
 
   onBlur = () => {
+    this._keyEvent = "keyboard";
     this.props.onBlur();
     this.setState({
-      isEditing: false
+      isEditing: false,
+      showMessage: false,
     });
   }
 
@@ -145,16 +154,22 @@ class JSONEditor extends React.Component {
   }
 
   render() {
+    const {showMessage} = this.state;
     const style = {};
     if (this.props.maxHeight) {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
+      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
+        Press <kbd>ESC</kbd> to lose focus
+      </div>
+      <div
         className={classnames("codemirror-container", this.props.className)}
         ref={(el) => this._el = el}
         style={style}
       />
+    </div>
   }
 }
 

src/styles/_codemirror.scss

@@ -62,3 +62,37 @@
   background-color: #bb0000;
   color: white !important;
 }
+
+@keyframes JSONEditor__animation-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  } 
+}
+
+.JSONEditor__message {
+  position: absolute;
+  right: 0;
+  font-size: 0.85em;
+  z-index: 99999;
+  padding: 0.3em 0.5em;
+  background: hsla(0, 0%, 0%, 0.3);
+  color: $color-lowgray;
+  border-bottom-left-radius: 2px;
+  transition: opacity 320ms ease;
+  opacity: 0;
+  pointer-events: none;
+
+  &--on {
+    opacity: 1;
+    animation: 320ms ease 0s JSONEditor__animation-fade;
+    animation-delay: 2000ms;
+    animation-fill-mode: forwards;
+  }
+
+  kbd {
+    font-family: monospace;
+  }
+}