improvement: style of pressed buttons #19
Conversation
src/membrane-keypad-element.ts
Outdated
| } | ||
|
|
||
| private up(key: string) { | ||
| private up(key: string, event: any) { |
There was a problem hiding this comment.
You can either use UIEvent or KeyboardEvent | MouseEvent | TouchEvent (I personally prefer the first one)
There was a problem hiding this comment.
To use either option, I had to declare 'event.currentTarget as SVGElement' to avoid TS error: Property 'classList' does not exist on type 'EventTarget'. I updated with the first option - UIEvent.
src/membrane-keypad-element.ts
Outdated
| private down(key: string, event: UIEvent) { | ||
| if (!this.pressedKeys.has(key)) { | ||
| const currTarget = event.currentTarget as SVGElement; | ||
| currTarget.classList.add('pressed'); |
There was a problem hiding this comment.
What's the reason you need the pressed class?
It seems like the :active selector that you have above already does the trick
There was a problem hiding this comment.
The active selector isn't triggered when pressing the space key, so I added this class.
But it has an isssue - while pressing space, if you press tab and press space again or click with the mouse on another button, it will display multiple buttons as pressed. I can fix the tab option by removing the class when pressing tab. But I couldn't think of a way to fix the mouse selection. Do you think I should check every button on mousedown? Got a better idea?
There was a problem hiding this comment.
Good point!
So perhaps you could:
- For the tab issue - remove the
pressedclass onblurevent. That's way, when you press the tab key, the element loses focus, and the highlight is gone. - Make the event parameter optional and only pass it on keyboard event, so it won't get added on mouse events (this will probably solve the issue with the class sticking around when you click on the button, and then drag the mouse pointer out of the element area, which the button is still pressed)
karinchechik
force-pushed
the
membrane-keypad-fix
branch
from
2b34390 to
60dc651
Compare
* improvement: style of pressed buttons * improvement: buttons pressed Co-authored-by: Karin <[email protected]>
3 participants
No description provided.