Input History: add icons for mouse, ENTER and BACKSPACE (#332)

* Input History: add icons for mouse, ENTER and BACKSPACE ### CSS - Apply top margin to `p.key-combination` directly, so it doesn't have to be computed per inner element. - Add `vertical-align: middle` to every element inside `p.key-combination`. - Add CSS for divs grouping text and icons and margins in-between them. ### SVG - Make usage of `<symbol>` and `<use>` tags to reuse inlined SVG icons. - Replace multiple arrow icon SVGs with CSS-rotated versions of a single arrow. - Add icons for mouse inputs, ENTER and BACKSPACE. ### Script Move javascript icons class setup before `MOUSECODES` to use `outerHTML` of icon elements with classes already applied to them, without having to call `cloneNode` on each usage. This allows mouse inputs to use icons without any changes to `getKeyHTML`. ### Fix Remove bit masks for extra mouse buttons 3 and 4, that don't exist and actually map to `NUM_LOCK` and `CAPS_LOCK`. * History Input: fix visible icons; misaligned keys and labels Icons are hidden again. Keys are vertically centered to each other and they all have the same height. Labels and icons inside the keys are vertically centered. * Input History: add unique icons for each mouse input Instead of a combo of icon and text, mouse inputs have a unique icon for each input. Left click and left wheel scroll are reused, mirrored via css, for their right counterparts. * Input History: mouse scroll icons are more readable They look less like the middle click icon, with a bigger arrow and just a dot in the middle instead of the whole wheel.
univrsal · Apr 17, 2023 · 85da145 · 85da145
1 parent 0573bbb
commit 85da145
Showing 1 changed file with 240 additions and 67 deletions.
diff --git a/presets/input-history-windows/input-history-windows.html b/presets/input-history-windows/input-history-windows.html
@@ -44,11 +44,16 @@
         transition-duration: 1s;
       }
 
-      p.key-combination > * {
-        /* For line-height */
+      p.key-combination {
+        /* Vertical distance between combinations */
         margin-top: 0.5em;
       }
 
+      p.key-combination > * {
+        /* Centralize keys and elements in them */
+        vertical-align: middle;
+      }
+
       p.key-combination > .separator {
         display: inline-block;
 
@@ -60,6 +65,9 @@
       span.key {
         display: inline-flex;
         border-radius: 0.25em;
+        /* Override text height, otherwise it uses more vertical space and
+           keys with text in them are higher than ones with just icons. */
+        line-height: 1em;
 
         padding: 0.25em;
 
@@ -83,6 +91,16 @@
         margin: auto;
       }
 
+      span.key div {
+        display: inline-flex;
+        white-space: nowrap;
+      }
+
+      * + .icon-sm, .icon-sm + * {
+        /* Space before icons or elements following icons */
+        margin-left: 0.3em;
+      }
+
       /* #endregion */
     </style>
   </head>
@@ -93,6 +111,58 @@
       <!-- Get Icons from FontAwesome -->
       <!-- Copy SVG Code -->
 
+      <!-- #region Svg sources used multiple times. Automatically hidden -->
+      <!-- Arrow Left -->
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <symbol
+          id="icon-arrow"
+          viewBox="0 0 512 512"
+        >
+          <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+          <path
+            d="M512 256C512 273.7 497.7 288 480 288H160.1l0 72c0 9.547-5.66 18.19-14.42 22c-8.754 3.812-18.95 2.077-25.94-4.407l-112.1-104c-10.24-9.5-10.24-25.69 0-35.19l112.1-104c6.992-6.484 17.18-8.218 25.94-4.406C154.4 133.8 160.1 142.5 160.1 151.1L160.1 224H480C497.7 224 512 238.3 512 256z"
+          />
+        </symbol>
+      </svg>
+
+      <!-- Right-down turn arrow -->
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <symbol
+          id="icon-right-down-turn"
+          viewBox="0 0 320 512"
+        >
+          <!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+          <path
+            d="M313.553 392.331L209.587 504.334c-9.485 10.214-25.676 10.229-35.174 0L70.438 392.331C56.232 377.031 67.062 352 88.025 352H152V80H68.024a11.996 11.996 0 0 1-8.485-3.515l-56-56C-4.021 12.926 1.333 0 12.024 0H208c13.255 0 24 10.745 24 24v328h63.966c20.878 0 31.851 24.969 17.587 40.331z"
+          />
+        </symbol>
+      </svg>
+
+      <!-- Mouse left button, mirrored and used as right button as well -->
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <symbol
+          id="icon-mouse-button-left"
+          viewBox="0 0 384 512"
+        >
+          <path
+            d="M327.8 56.2C297.5 25.9 257 5.7 212 1V121c-6.3-1.9-13-3-20-3s-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M20 192c0-21.4 4-42.4 11.5-61.9s18.7-37.8 33.1-53.6 c23.5-25.9 54-43.8 87.4-51.8v106.1c-17.6 12.5-29.1 33.1-29.1 56.3V236H64C39.7 236 20 216.3 20 192z"
+          />
+        </symbol>
+      </svg>
+
+      <!-- Mouse wheel left, mirrored and used as wheel right as well -->
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <symbol
+          id="icon-mouse-wheel-left"
+          viewBox="0 0 384 512"
+        >
+          <path
+            d="M327.8 56.2C297.5 25.9 257 5.7 212 1V121c-6.3-1.9-13-3-20-3s-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M192 264.8c-27.1 0-49.1-22-49.1-49.1 c0-13.6 5.5-25.8 14.4-34.7c8.9-8.9 21.2-14.4 34.7-14.4s25.8 5.5 34.7 14.4c8.9 8.9 14.4 21.2 14.4 34.7s-5.5 25.8-14.4 34.7 C217.8 259.3 205.6 264.8 192 264.8z M21.5 215.7c30.8-39 66.4-73.2 140.4-70.1c-27.2 11.7-46.2 38.6-46.2 70.1 c0 31.4 19 58.4 46.2 70.1C87.9 288.8 52.2 254.7 21.5 215.7z"
+          />
+        </symbol>
+      </svg>
+      <!-- #endregion -->
+
       <!-- Windows Key - VC_META_L / VC_META_R -->
       <svg
         id="SVG_VC_META"
@@ -106,52 +176,142 @@
       </svg>
 
       <!-- Arrow Left -->
+      <svg id="SVG_VC_LEFT">
+        <use href="#icon-arrow"></use>
+      </svg>
+
+      <!-- Arrow Right -->
+      <svg
+        id="SVG_VC_RIGHT"
+        style="transform: rotate(180deg);"
+      >
+        <use href="#icon-arrow"></use>
+      </svg>
+
+      <!-- Arrow Up -->
+      <svg
+        id="SVG_VC_UP"
+        style="transform: rotate(90deg);"
+      >
+        <use href="#icon-arrow"></use>
+      </svg>
+
+      <!-- Arrow Down -->
+      <svg
+        id="SVG_VC_DOWN"
+        style="transform: rotate(270deg);"
+      >
+        <use href="#icon-arrow"></use>
+      </svg>
+
+      <!-- Enter -->
+      <svg
+        id="SVG_VC_ENTER"
+        style="transform: rotate(90deg);"
+      >
+        <use href="#icon-right-down-turn"></use>
+      </svg>
+
+      <!-- Num Enter -->
+      <div id="SVG_VC_KP_ENTER">
+        <span>NUM</span>
+        <svg style="transform: rotate(90deg);">
+          <use href="#icon-right-down-turn"></use>
+        </svg>
+      </div>
+
+      <!-- Backspace -->
       <svg
-        id="SVG_VC_LEFT"
+        id="SVG_VC_BACKSPACE"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
+        viewBox="0 0 576 512"
       >
-        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
         <path
-          d="M512 256C512 273.7 497.7 288 480 288H160.1l0 72c0 9.547-5.66 18.19-14.42 22c-8.754 3.812-18.95 2.077-25.94-4.407l-112.1-104c-10.24-9.5-10.24-25.69 0-35.19l112.1-104c6.992-6.484 17.18-8.218 25.94-4.406C154.4 133.8 160.1 142.5 160.1 151.1L160.1 224H480C497.7 224 512 238.3 512 256z"
+          d="M576 128c0-35.3-28.7-64-64-64H205.3c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7H512c35.3 0 64-28.7 64-64V128zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
         />
       </svg>
 
-      <!-- Arrow Right -->
+      <!-- Mouse Left Click -->
+      <svg id="SVG_MOUSE_LEFT">
+        <use href="#icon-mouse-button-left"></use>
+      </svg>
+
+      <!-- Mouse Middle Click -->
       <svg
-        id="SVG_VC_RIGHT"
+        id="SVG_MOUSE_MIDDLE"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
+        viewBox="0 0 384 512"
       >
-        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
         <path
-          d="M504.3 273.6l-112.1 104c-6.992 6.484-17.18 8.218-25.94 4.406c-8.758-3.812-14.42-12.45-14.42-21.1L351.9 288H32C14.33 288 .0002 273.7 .0002 255.1S14.33 224 32 224h319.9l0-72c0-9.547 5.66-18.19 14.42-22c8.754-3.809 18.95-2.075 25.94 4.41l112.1 104C514.6 247.9 514.6 264.1 504.3 273.6z"
+          d="M327.8 56.2C297.5 25.9 257 5.7 212 1v119.9c-6.4-1.9-13.1-2.9-20-2.9c-7 0-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M192 138c7.1 0 13.9 1.5 20 4.2 c5.5 2.5 10.5 5.9 14.7 10.1c8.9 8.9 14.4 21.2 14.4 34.7v57.1c0 27.1-22 49.1-49.1 49.1s-49.1-22-49.1-49.1v-57.1 c0-20 12-37.2 29.1-44.9C178.1 139.5 184.9 138 192 138z"
         />
       </svg>
 
-      <!-- Arrow Up -->
+      <!-- Mouse Right Click (mirrored left click icon) -->
       <svg
-        id="SVG_VC_UP"
+        id="SVG_MOUSE_RIGHT"
+        style="transform: scale(-1.0, 1.0);"
+      >
+        <use href="#icon-mouse-button-left"></use>
+      </svg>
+
+      <!-- Mouse Extra Button 1 -->
+      <svg
+        id="SVG_MOUSE_EXTRA1"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 320 512"
+        viewBox="0 0 384 512"
       >
-        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
         <path
-          d="M285.1 145.7c-3.81 8.758-12.45 14.42-21.1 14.42L192 160.1V480c0 17.69-14.33 32-32 32s-32-14.31-32-32V160.1L55.1 160.1c-9.547 0-18.19-5.658-22-14.42c-3.811-8.758-2.076-18.95 4.408-25.94l104-112.1c9.498-10.24 25.69-10.24 35.19 0l104 112.1C288.1 126.7 289.8 136.9 285.1 145.7z"
+          d="M327.8 56.2C297.5 25.9 257 5.7 212 1V121c-6.3-1.9-13-3-20-3s-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M89 380.8c-40.7 0-73.7-33-73.7-73.7v-50.5H89V380.8z"
         />
       </svg>
 
-      <!-- Arrow Down -->
+      <!-- Mouse Extra Button 2 -->
       <svg
-        id="SVG_VC_DOWN"
+        id="SVG_MOUSE_EXTRA2"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 320 512"
+        viewBox="0 0 384 512"
+      >
+        <path
+          d="M327.8 56.2C297.5 25.9 257 5.7 212 1V121c-6.3-1.9-13-3-20-3s-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M89 256.5H15.3V206c0-40.7 33-73.7 73.7-73.7V256.5z"
+        />
+      </svg>
+
+      <!-- Mouse Wheel Up -->
+      <svg
+        id="SVG_MOUSE_WHEELUP"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 384 512"
+      >
+        <path
+          d="M327.8 56.2C297.5 25.9 257 5.7 212 1v20.1c-6.6-0.8-13.3-1.1-20-1.1c-6.8 0-13.4 0.4-20 1.2V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M192 45.2c39 30.7 73.2 66.4 70 140.4 c-11.7-27.1-38.6-46.1-70-46.1s-58.4 19-70 46.1C118.8 111.6 153 75.9 192 45.2z M192 264.8c-13.6 0-25.8-5.5-34.7-14.4 c-8.9-8.9-14.4-21.2-14.4-34.7c0-27.1 22-49.1 49.1-49.1c13.6 0 25.8 5.5 34.7 14.4c8.9 8.9 14.4 21.2 14.4 34.7 s-5.5 25.8-14.4 34.7C217.8 259.3 205.6 264.8 192 264.8z"
+        />
+      </svg>
+
+      <!-- Mouse Wheel Down -->
+      <svg
+        id="SVG_MOUSE_WHEELDOWN"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 384 512"
       >
-        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
         <path
-          d="M281.6 392.3l-104 112.1c-9.498 10.24-25.69 10.24-35.19 0l-104-112.1c-6.484-6.992-8.219-17.18-4.404-25.94c3.811-8.758 12.45-14.42 21.1-14.42H128V32c0-17.69 14.33-32 32-32S192 14.31 192 32v319.9h72c9.547 0 18.19 5.66 22 14.42C289.8 375.1 288.1 385.3 281.6 392.3z"
+          d="M327.8 56.2C297.5 25.9 257 5.7 212 1V121c-6.3-1.9-13-3-20-3s-13.7 1-20 3V1C75.4 11 0 92.7 0 192v128 c0 106 86 192 192 192s192-86 192-192V192C384 139 362.5 91 327.8 56.2z M192 166.5c13.6 0 25.8 5.5 34.7 14.4 c8.9 8.9 14.4 21.2 14.4 34.7s-5.5 25.8-14.4 34.7c-8.9 8.9-21.2 14.4-34.7 14.4s-25.8-5.5-34.7-14.4c-8.9-8.9-14.4-21.2-14.4-34.7 C142.9 188.5 164.9 166.5 192 166.5z M192 386.2c-39-30.8-73.2-66.4-70-140.4c11.7 27.1 38.6 46.1 70 46.1s58.4-19 70-46.1 C265.2 319.7 231 355.4 192 386.2z"
         />
       </svg>
+
+      <!-- Mouse Wheel Right (mirrored wheel left) -->
+      <svg
+        id="SVG_MOUSE_WHEELRIGHT"
+        style="transform: scale(-1.0, 1.0);"
+      >
+        <use href="#icon-mouse-wheel-left"></use>
+      </svg>
+
+      <!-- Mouse Wheel Left -->
+      <svg id="SVG_MOUSE_WHEELLEFT">
+        <use href="#icon-mouse-wheel-left"></use>
+      </svg>
     </div>
     <!-- #endregion -->
 
@@ -433,6 +593,44 @@
       /* End Virtual Modifier Masks */
     };
 
+    // #region Keys with Icons
+
+    /* Init SVG Icons */
+    document
+      .querySelectorAll("#icons-container svg")
+      .forEach((i) => i.classList.add("icon-sm"));
+    document
+      .querySelectorAll("#icons-container svg path")
+      .forEach((p) => p.setAttribute("fill", "currentColor"));
+
+    /**
+     * For Keys to replace with Icons
+     * Key: libuihook keycode
+     * Value: <svg> icon element
+     */
+    var KEYICONS = {
+      0x0e5b: document.getElementById("SVG_VC_META"), // VC_META_L Windows or Command Key
+      0x0e5c: document.getElementById("SVG_VC_META"), // VC_META_R Windows or Command Key
+
+      // Arrow Keys
+      0x0e48: document.getElementById("SVG_VC_UP"), // ARROW UP
+      0x0e4b: document.getElementById("SVG_VC_LEFT"), // ARROW LEFT
+      0x0e4d: document.getElementById("SVG_VC_RIGHT"), // ARROW RIGHT
+      0x0e50: document.getElementById("SVG_VC_DOWN"), // ARROW DOWN
+      /* https://github.com/univrsal/input-overlay/issues/174 */
+      0xee48: document.getElementById("SVG_VC_UP"), // ARROW UP
+      0xee4b: document.getElementById("SVG_VC_LEFT"), // ARROW LEFT
+      0xee4d: document.getElementById("SVG_VC_RIGHT"), // ARROW RIGHT
+      0xee50: document.getElementById("SVG_VC_DOWN"), // ARROW DOWN
+
+      0x001c: document.getElementById("SVG_VC_ENTER"),
+      0x0e1c: document.getElementById("SVG_VC_KP_ENTER"),
+
+      0x000e: document.getElementById("SVG_VC_BACKSPACE"),
+    };
+
+    // #endregion
+
     // #region Mouse codes
 
     /**
@@ -460,24 +658,34 @@
       // The buttons are the bit flags we get from the event
 
       // Basic buttons
-      [1 << 8, "LMB"], // Lowest is 256. Don't know why
-      [1 << 9, "RMB"],
-      [1 << 10, "MMB"],
+      [1 << 8, document.getElementById("SVG_MOUSE_LEFT").outerHTML], // Lowest is 256. Don't know why
+      [1 << 9, document.getElementById("SVG_MOUSE_RIGHT").outerHTML],
+      [1 << 10, document.getElementById("SVG_MOUSE_MIDDLE").outerHTML],
 
       // Extra mouse buttons
-      [1 << 11, "MB1"],
-      [1 << 12, "MB2"],
-      [1 << 13, "MB3"],
-      [1 << 14, "MB4"],
+      [1 << 11, document.getElementById("SVG_MOUSE_EXTRA1").outerHTML],
+      [1 << 12, document.getElementById("SVG_MOUSE_EXTRA2").outerHTML],
 
       // Wheel
       // bits 0,1,2: direction (3 = vertical, 4 = horizontal)
       // bit 3: rotation (0 = up/right, 1 = down/left)
       // bit 4: wheel flag (8)
-      [MOUSEENCODE.wheel | MOUSEENCODE.wheel_y, "MW UP"],
-      [MOUSEENCODE.wheel | MOUSEENCODE.wheel_y| MOUSEENCODE.wheel_rot , "MW DOWN"],
-      [MOUSEENCODE.wheel | MOUSEENCODE.wheel_x, "MW RIGHT"],
-      [MOUSEENCODE.wheel | MOUSEENCODE.wheel_x| MOUSEENCODE.wheel_rot , "MW LEFT"],
+      [
+        MOUSEENCODE.wheel | MOUSEENCODE.wheel_y,
+        document.getElementById("SVG_MOUSE_WHEELUP").outerHTML
+      ],
+      [
+        MOUSEENCODE.wheel | MOUSEENCODE.wheel_y| MOUSEENCODE.wheel_rot,
+        document.getElementById("SVG_MOUSE_WHEELDOWN").outerHTML
+      ],
+      [
+        MOUSEENCODE.wheel | MOUSEENCODE.wheel_x,
+        document.getElementById("SVG_MOUSE_WHEELRIGHT").outerHTML
+      ],
+      [
+        MOUSEENCODE.wheel | MOUSEENCODE.wheel_x| MOUSEENCODE.wheel_rot,
+        document.getElementById("SVG_MOUSE_WHEELLEFT").outerHTML
+      ],
     ]);
 
     // #endregion
@@ -519,41 +727,6 @@
       }
     }
 
-    // #region Keys with Icons
-
-    /* Init SVG Icons */
-    document
-      .querySelectorAll("#icons-container > svg")
-      .forEach((i) => i.classList.add("icon-sm"));
-    document
-      .querySelectorAll("#icons-container > svg > path")
-      .forEach((p) => p.setAttribute("fill", "currentColor"));
-
-    /**
-     * For Keys to replace with Icons
-     * Key: libuihook keycode
-     * Value: <svg> icon element
-     */
-    var KEYICONS = {
-      0x0e5b: document.getElementById("SVG_VC_META"), // VC_META_L Windows or Command Key
-      0x0e5c: document.getElementById("SVG_VC_META"), // VC_META_R Windows or Command Key
-
-      // Arrow Keys
-      0x0e48: document.getElementById("SVG_VC_UP"), // ARROW UP
-      0x0e4b: document.getElementById("SVG_VC_LEFT"), // ARROW LEFT
-      0x0e4d: document.getElementById("SVG_VC_RIGHT"), // ARROW RIGHT
-      0x0e50: document.getElementById("SVG_VC_DOWN"), // ARROW DOWN
-      /* https://github.com/univrsal/input-overlay/issues/174 */
-      0xee48: document.getElementById("SVG_VC_UP"), // ARROW UP
-      0xee4b: document.getElementById("SVG_VC_LEFT"), // ARROW LEFT
-      0xee4d: document.getElementById("SVG_VC_RIGHT"), // ARROW RIGHT
-      0xee50: document.getElementById("SVG_VC_DOWN"), // ARROW DOWN
-
-      0x001c: document.getElementById("SVG_VC_ENTER"),
-    };
-
-    // #endregion
-
     // #region DOM Utils
 
     /**