Merge pull request #46 from khang-nd/menu-shortcut

Menu enhancements
khang-nd · Oct 31, 2022 · 44ffa98 · 44ffa98 · vercel · Oct 31, 2022
2 parents d58e1a4 + c0cfaea
commit 44ffa98
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
@@ -712,14 +712,34 @@ import "7.css/dist/gui/tabs.css"</pre>
           specified will receive a horizontal line appended after itself.
         </p>
 
+        <p>
+          To accommodate an extra piece of info for a menu item (like a shortcut mnemonic)
+          on the right side, nest it with an <code>i</code> element.
+        </p>
+
         <%- example(`
         <ul role="menubar" class="can-hover">
           <li role="menuitem" tabindex="0" aria-haspopup="true">
             File
             <ul role="menu">
-              <li role="menuitem"><a href="#menu">Open</a></li>
-              <li role="menuitem"><a href="#menu">Save</a></li>
-              <li role="menuitem" class="has-divider"><a href="#menu">Save As...</a></li>
+              <li role="menuitem">
+                <a href="#menu">
+                  Open
+                  <i>Ctrl+O</i>
+                </a>
+              </li>
+              <li role="menuitem">
+                <a href="#menu">
+                  Save
+                  <i>Ctrl+S</i>
+                </a>
+              </li>
+              <li role="menuitem" class="has-divider">
+                <a href="#menu">
+                  Save As...
+                  <i>Ctrl+Shift+S</i>
+                </a>
+              </li>
               <li role="menuitem"><a href="#menu">Exit</a></li>
             </ul>
           </li>
@@ -765,6 +785,10 @@ import "7.css/dist/gui/tabs.css"</pre>
           (Icons provided by <a href="https://icons8.com/" target="_blank">Icons8</a>)
         </p>
 
+        <p>
+          Disable a menu item by placing an <code>aria-disabled</code> attribute on it.
+        </p>
+
         <%- example(`
         <ul role="menu" class="can-hover" style="width: 200px">
           <li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
@@ -778,8 +802,10 @@ import "7.css/dist/gui/tabs.css"</pre>
             </ul>
           </li>
           <li role="menuitem" class="has-divider"><a href="#menu">Refresh</a></li>
-          <li role="menuitem"><a href="#menu">Paste</a></li>
-          <li role="menuitem" class="has-divider"><a href="#menu">Paste shortcut</a></li>
+          <li role="menuitem" aria-disabled="true"><a href="#menu">Paste</a></li>
+          <li role="menuitem" aria-disabled="true" class="has-divider">
+            <a href="#menu">Paste shortcut</a>
+          </li>
           <li role="menuitem">
             <img src="https://img.icons8.com/color/18/000000/monitor--v1.png"/>
             <a href="#menu">Screen resolution</a>

diff --git a/gui/_select.scss → gui/_dropdown.scss b/gui/_select.scss → gui/_dropdown.scss
diff --git a/gui/_menu.scss b/gui/_menu.scss
@@ -68,12 +68,14 @@ ul {
       &[aria-haspopup="true"] {
         all: unset;
         position: relative;
-        display: block;
+        display: flex;
+        justify-content: space-between;
         width: 100%;
         padding: 4px 10px 4px 32px;
         box-sizing: border-box;
         border: 1px solid transparent;
         border-radius: 3px;
+        white-space: nowrap;
 
         &:hover,
         &:focus {
@@ -112,6 +114,11 @@ ul {
       }
     }
 
+    &[aria-disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
     &.has-divider {
       &::after {
         content: "";
@@ -132,6 +139,11 @@ ul {
       transform: translateY(-50%);
       pointer-events: none;
     }
+
+    i {
+      font-style: normal;
+      margin-left: 32px;
+    }
   }
 
   &.can-hover [role="menuitem"]:hover {

diff --git a/gui/index.scss b/gui/index.scss
@@ -11,12 +11,12 @@
 @import "_checkbox.scss";
 @import "_collapse.scss";
 @import "_combobox.scss";
+@import "_dropdown.scss";
 @import "_groupbox.scss";
 @import "_listbox.scss";
 @import "_menu.scss";
 @import "_progressbar.scss";
 @import "_radiobutton.scss";
-@import "_select.scss";
 @import "_slider.scss";
 @import "_tabs.scss";
 @import "_textbox.scss";