diff options
-rw-r--r-- | app/src/Keyboard/Keys/Key.js | 13 | ||||
-rw-r--r-- | app/src/Keyboard/Keys/KeyValue.js | 2 | ||||
-rw-r--r-- | app/src/Keyboard/Keys/styles.module.css | 4 |
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; |