Improve overflow menu button #304

2023-02-14T22:54:58Z

joshr4 commented

2023-02-14 22:54:58 +00:00

(Migrated from github.com)

In order to address https://github.com/v0l/snort/issues/177, I tried adding a background menu item which closes the sub-menu. I made this menu item cover a large area near the sub-menu. If a user clicks within this area, it will close the menu rather than performing the action underneath.

Rather than cover the whole page, I kept the size smaller. If a user scrolls away from the open sub-menu, they can still interact with other buttons and features.

I also increased the width of the three vertical dots menu button, so that its easier to click. Its current width is 4px, I increased this to 16px.

Here is a visual of the component, I temporarily set the color to blue so it is visible:

https://user-images.githubusercontent.com/14062229/218881434-0f46a7b9-2ac7-4241-b70e-2a0876497eb4.mov

In order to address https://github.com/v0l/snort/issues/177, I tried adding a background menu item which closes the sub-menu. I made this menu item cover a large area near the sub-menu. If a user clicks within this area, it will close the menu rather than performing the action underneath. Rather than cover the whole page, I kept the size smaller. If a user scrolls away from the open sub-menu, they can still interact with other buttons and features. I also increased the width of the three vertical dots menu button, so that its easier to click. Its current width is 4px, I increased this to 16px. Here is a visual of the component, I temporarily set the color to blue so it is visible: https://user-images.githubusercontent.com/14062229/218881434-0f46a7b9-2ac7-4241-b70e-2a0876497eb4.mov

joshr4 (Migrated from github.com) reviewed 2023-02-15 15:06:26 +00:00

v0l (Migrated from github.com) approved these changes 2023-02-16 18:19:29 +00:00

v0l (Migrated from github.com) left a comment

Seems like a decent idea, thanks

v0l commented

2023-02-16 19:34:47 +00:00

(Migrated from github.com)

Please rebase, use git rebase origin/main

Please rebase, use `git rebase origin/main`

joshr4 commented

2023-02-16 19:37:30 +00:00

(Migrated from github.com)