Re-implement highlight for key values

3 files changed, 16 insertions, 3 deletions

diff --git a/app/src/Keyboard/Keys/Key.js b/app/src/Keyboard/Keys/Key.js
index 99846f0..5ee710d 100644
--- a/app/src/Keyboard/Keys/Key.js
+++ b/app/src/Keyboard/Keys/Key.js
@@ -37,6 +37,15 @@ function Key(props) {
   const index = makeIndex(normalized)
   const positioningStyle = getKeyStyles(position, size, rotation)
 
+  function onMouseOver(event) {
+    const old = document.querySelector(`.${styles.highlight}`)
+    old && old.classList.remove(styles.highlight)
+    event.target.classList.add(styles.highlight)
+  }
+  function onMouseLeave(event) {
+    event.target.classList.remove(styles.highlight)
+  }
+
   function handleSelectCode(event) {
     const editing = pick(event, ['target', 'codeIndex', 'code', 'param'])
     editing.targets = getSearchTargets(editing.param, value)
@@ -77,8 +86,8 @@ function Key(props) {
       data-simple={isSimple(normalized)}
       data-long={isComplex(normalized, behaviourParams)}
       style={positioningStyle}
-      // @mouseover="onMouseOver"
-      // @mouseleave="onMouseLeave"
+      onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
     >
     {behaviour ? (
       <span
diff --git a/app/src/Keyboard/Keys/KeyValue.js b/app/src/Keyboard/Keys/KeyValue.js
index b05c51d..852476d 100644
--- a/app/src/Keyboard/Keys/KeyValue.js
+++ b/app/src/Keyboard/Keys/KeyValue.js
@@ -12,7 +12,7 @@ function NullKey() {
 function KeyValue(props) {
   const { param, index, value, source, onSelect } = props
   const title = source && `(${source.code}) ${source.description}`
-  const text = source && <span>{source?.symbol || source?.code}</span>
+  const text = source && (source?.symbol || source?.code)
   const icon = source?.faIcon && <Icon name={source.faIcon} />
 
   const handleClick = useMemo(() => function (event) {
diff --git a/app/src/Keyboard/Keys/styles.module.css b/app/src/Keyboard/Keys/styles.module.css
index 37eb5b3..5af1975 100644
--- a/app/src/Keyboard/Keys/styles.module.css
+++ b/app/src/Keyboard/Keys/styles.module.css
@@ -43,6 +43,10 @@
 	color: var(--hover-selection) !important;
 }
 
+.code * {
+	pointer-events: none;
+}
+
 .behaviour-binding {
   position: absolute;
   top: 0;