Add editor overlay when keyboard controls enabled

pioneers · Oct 17, 2024 · 350e88a · 350e88a
1 parent b7c3835
commit 350e88a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/src/renderer/Editor.css b/src/renderer/Editor.css
@@ -17,9 +17,40 @@
   font-style: italic;
 }
 .Editor-ace-wrapper {
+  position: relative;
   flex-grow: 1;
   user-select: auto;
 }
+.Editor-kbctrl-overlay {
+  display: none;
+  position: absolute;
+  background-color: #0005;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  padding: auto;
+  color: white;
+}
+.Editor-kbctrl-enabled .Editor-kbctrl-overlay {
+  display: flex;
+}
+.Editor-kbctrl-enabled .Editor-ace-wrapper {
+  user-select: none;
+}
+.Editor-kbctrl-enabled .ace_cursor {
+  opacity: 0;
+}
+.Editor-kbctrl-enabled .ace_scrollbar-v {
+  overflow: hidden;
+}
+.Editor-kbctrl-enabled .ace_scrollbar-h {
+  overflow: hidden;
+}
 .Editor-toolbar {
   display: flex;
   flex-direction: row;

diff --git a/src/renderer/Editor.tsx b/src/renderer/Editor.tsx
@@ -131,7 +131,12 @@ export default function Editor({
   };
 
   return (
-    <div className="Editor" style={{ width }}>
+    <div
+      className={`Editor${
+        keyboardControlsEnabled ? ' Editor-kbctrl-enabled' : ''
+      }`}
+      style={{ width }}
+    >
       <div className="Editor-file-info">
         <span className="Editor-file-name">{filePath || '[New file]'}</span>
         <span
@@ -256,12 +261,16 @@ export default function Editor({
         </div>
       </div>
       <div className="Editor-ace-wrapper">
+        <div className="Editor-kbctrl-overlay">
+          <span>Keyboard input sent to robot -- disable to edit code</span>
+        </div>
         <AceEditor
           fontSize={fontSize}
           style={{ width: '100%', height: '100%' }}
           mode="python"
           onChange={onChange}
           value={content}
+          readOnly={keyboardControlsEnabled}
         />
       </div>
     </div>

diff --git a/src/renderer/ResizeBar.css b/src/renderer/ResizeBar.css
@@ -16,6 +16,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
+  z-index: 10;
 }
 .ResizeBar-axis-x .ResizeBar-active-area {
   cursor: col-resize;