From 7db675e0d19a0bfd2e4ecfdf49ca99036e6b7d97 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 19 May 2020 12:21:12 +0100
Subject: [PATCH] Added ESC note to JSON editor.

---
 src/components/layers/JSONEditor.jsx | 30 +++++++++++++++++-------
 src/styles/_codemirror.scss          | 34 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 2b8f6a8..0b8625c 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -54,6 +54,7 @@ class JSONEditor extends React.Component {
     super(props)
     this.state = {
       isEditing: false,
+      showMessage: false,
       prevValue: this.props.getValue(this.props.layer),
     };
   }
@@ -82,17 +83,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 +153,22 @@ class JSONEditor extends React.Component {
   }
 
   render() {
+    const {showMessage} = this.state;
     const style = {};
     if (this.props.maxHeight) {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div
-      className={classnames("codemirror-container", this.props.className)}
-      ref={(el) => this._el = el}
-      style={style}
-    />
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown}>
+      <div class={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>
   }
 }
 
diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss
index 4270311..7e2e20e 100644
--- a/src/styles/_codemirror.scss
+++ b/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;
+  }
+}