From 85da14516bfc7deab5a6eb66046e28a59dd243dc Mon Sep 17 00:00:00 2001 From: Rodrigo Villani Date: Mon, 17 Apr 2023 08:45:52 -0700 Subject: [PATCH] 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 `` and `` 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. --- .../input-history-windows.html | 307 ++++++++++++++---- 1 file changed, 240 insertions(+), 67 deletions(-) diff --git a/presets/input-history-windows/input-history-windows.html b/presets/input-history-windows/input-history-windows.html index a0d60091..e7befe04 100644 --- 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 */ @@ -93,6 +111,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ NUM + + + +
+ + - + - + + + + + + - - + + + + + + - - + + + + + + + + + + + - + + + + + + + + + + @@ -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: 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: 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 /**