esc now properly closes menu windows (#768)

* esc now properly closes menu windows * Set focus on copy button and associate Enter key Co-authored-by: Gilgamesh Athoraya <[email protected]>
Dyalog · Sep 20, 2021 · b7ce1c7 · b7ce1c7
1 parent 11ac38c
commit b7ce1c7
Show file tree

Hide file tree

Showing 6 changed files with 377 additions and 353 deletions.
diff --git a/about.html b/about.html
@@ -31,15 +31,25 @@
         return !0;
       };
     }
-    let cpy = document.getElementById('abt_copy');
     document.getElementById('abt_close').onclick = () => { window.close() };;
+    let cpy = document.getElementById('abt_copy');
     cpy.onclick = () => {
       let ta = document.getElementById('abt_ta');
-        ta.select();
-        document.execCommand('copy');
-        ta.selectionEnd = 0;
+      ta.select();
+      document.execCommand('copy');
+      ta.selectionEnd = 0;
+    };
+    cpy.focus();
+    const abt = document.getElementById('abt');
+    abt.tabIndex = 0;
+    abt.onkeydown = (x) => {
+      if (x.key === 'Escape') {
+        window.close();
+        return !1;
+      } else if (x.key === 'Enter') {
+        cpy.click();
+      }
     };
-    cpy.hidden = !document.queryCommandSupported('copy');
   </script>
 </body>
 </html>
diff --git a/src/prf_ui.js b/src/prf_ui.js
@@ -55,6 +55,7 @@
     }
     if (!d) {
       d = I.prf_dlg;
+      $(`#${d.id}>div`).attr('tabIndex', 0);
       d.onkeydown = (x) => {
         const k = D.util.fmtKey(x);
         if (k === 'Ctrl-Enter') {
@@ -84,6 +85,7 @@
         for (let i = 0; i < hdrs.length; i++) {
           const b = a === hdrs[i];
           payloads[i].hidden = !b;
+          payloads[i].tabIndex = b ? 0 : -1;
           hdrs[i].className = b ? 'sel' : '';
         }
         activeTab = tabs[a.href.replace(/.*#/, '')];

diff --git a/style/dark-theme.css b/style/dark-theme.css
@@ -103,6 +103,10 @@
 }
 .dlg {
   background-color: #1c1e28;
+  outline: none;
+}
+.dlg div {
+  outline: none;
 }
 .dlg_title,
 .dlg_close {
@@ -142,92 +146,6 @@
   text-align: left;
   border: 1px solid transparent;
 }
-/*Golden Layout*/
-.lm_goldenlayout {
-  background: #272937 !important;
-}
-.lm_goldenlayout .lm_header {
-  background: #272937 !important;
-}
-.lm_header,
-.lm_content {
-  border-color: #272937 !important;
-}
-.lm_dragProxy .lm_content {
-  box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2);
-}
-.lm_dropTargetIndicator {
-  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4);
-  outline: 1px dashed #7688d9;
-  margin: 1px;
-  transition: all 200ms ease;
-}
-.lm_dropTargetIndicator .lm_inner {
-  background: white;
-  opacity: 0.1;
-  filter: alpha(opacity=1);
-}
-.lm_tab {
-  font-family: Roboto!important;
-  letter-spacing: 0.5px;
-  font-size: 12px;
-  background-color: #323446 !important;
-  color: #a9a9a9 !important;
-  border-right: 1px #272937 solid !important;
-}
-.lm_tab.lm_active {
-  background-color: #1c1e28 !important;
-  border-right: 1px #272937 solid !important;
-  color: #7688d9 !important;
-}
-.lm_tab.lm_active .lm_close_tab {
-  color: #7688d9 !important;
-}
-.lm_splitter {
-  background-color: rgba(118, 136, 217, 0.3) !important;
-}
-.lm_splitter.lm_horizontal {
-  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
-  box-shadow: -1px 0 0 black inset, 1px 0 0 black inset;
-}
-.lm_splitter.lm_vertical {
-  background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important;
-  box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset;
-}
-.lm_header .lm_tab .lm_close_tab {
-  background-image: none !important;
-  color: #a9a9a9;
-  font-size: 16px;
-}
-.lm_header .lm_tab .lm_close_tab::before {
-  content: "×";
-}
-.lm_header .lm_tab:hover .lm_close_tab {
-  opacity: 1;
-  color: #7688d9 !important;
-}
-.lm_controls > li {
-  background-position: center center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-.lm_controls > li:hover {
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-.lm_header .lm_controls .lm_tabdropdown:before {
-  color: #a9a9a9 !important;
-}
-.lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
-}
-.lm_maximised .lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
-}
-.lm_transition_indicator {
-  background-color: white;
-  border: 1px dashed #7688d9;
-}
 label {
   color: #a9a9a9;
   font-family: Roboto;
@@ -315,6 +233,92 @@ select {
   border-top: 1px solid black;
   border-bottom: 1px solid #2e303e;
 }
+/*Golden Layout*/
+.lm_goldenlayout {
+  background: #272937 !important;
+}
+.lm_goldenlayout .lm_header {
+  background: #272937 !important;
+}
+.lm_header,
+.lm_content {
+  border-color: #272937 !important;
+}
+.lm_dragProxy .lm_content {
+  box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2);
+}
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4);
+  outline: 1px dashed #7688d9;
+  margin: 1px;
+  transition: all 200ms ease;
+}
+.lm_dropTargetIndicator .lm_inner {
+  background: white;
+  opacity: 0.1;
+  filter: alpha(opacity=1);
+}
+.lm_tab {
+  font-family: Roboto!important;
+  letter-spacing: 0.5px;
+  font-size: 12px;
+  background-color: #323446 !important;
+  color: #a9a9a9 !important;
+  border-right: 1px #272937 solid !important;
+}
+.lm_tab.lm_active {
+  background-color: #1c1e28 !important;
+  border-right: 1px #272937 solid !important;
+  color: #7688d9 !important;
+}
+.lm_tab.lm_active .lm_close_tab {
+  color: #7688d9 !important;
+}
+.lm_splitter {
+  background-color: rgba(118, 136, 217, 0.3) !important;
+}
+.lm_splitter.lm_horizontal {
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
+  box-shadow: -1px 0 0 black inset, 1px 0 0 black inset;
+}
+.lm_splitter.lm_vertical {
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important;
+  box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset;
+}
+.lm_header .lm_tab .lm_close_tab {
+  background-image: none !important;
+  color: #a9a9a9;
+  font-size: 16px;
+}
+.lm_header .lm_tab .lm_close_tab::before {
+  content: "×";
+}
+.lm_header .lm_tab:hover .lm_close_tab {
+  opacity: 1;
+  color: #7688d9 !important;
+}
+.lm_controls > li {
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.lm_controls > li:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: #a9a9a9 !important;
+}
+.lm_controls .lm_maximise {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
+}
+.lm_maximised .lm_controls .lm_maximise {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
+}
+.lm_transition_indicator {
+  background-color: white;
+  border: 1px dashed #7688d9;
+}
 /*menu (see ../src/menu.js for the DOM structure)*/
 .menu {
   background-color: #edeff5;

diff --git a/style/less/colour/dialogs.less b/style/less/colour/dialogs.less
@@ -4,8 +4,12 @@
   opacity: 0.2;
 }
 
-.dlg{
+.dlg {
     background-color:@DLG_BG_COL;
+    outline: none;
+    div {
+      outline: none;
+    }
 }
 
 .dlg_title,.dlg_close{