search

getumbrel / umbrel-dashboard

[Deprecated] Moved to https://github.com/getumbrel/umbrel/tree/master/packages/dashboard. Web-based dashboard to interact with your Umbrel.
https://github.com/getumbrel/umbrel/tree/master/packages/dashboard
Other
132 stars 69 forks source link

Fix dock hover wobble #433

Closed Sun0fABeach closed 1 year ago

Sun0fABeach commented 1 year ago

Gets rid of the wobble effect when hovering over a dock icon. Also increases the horizontal margin by between icons by 2px so that they don't touch when the hover transform happens.

Sun0fABeach commented 1 year ago

For a visual demonstration of the improvement, see this issue I opened. https://github.com/getumbrel/umbrel-dashboard/issues/434

mayankchhabra commented 1 year ago

Hey Markus! Thanks for working on this, really appreciate it.

I agree with you on the issue — the dock wobble isn't a pleasing effect and we should fix it. However, increasing margin between apps and removing margins on hover has two issues:

  1. The margins on top are no longer consistent with the margins between apps:

image

To make them consistent, we could increase the height of dock's background, but that increases surface area of dock which has its own downside (it will end up taking more area from the main content).

  1. The margins between app <> app and app <> divider are no longer consistent on hover, which makes the layout unevenly spread out:

image image

Thinking out load here, perhaps the ideal way to fix the wobble effect would be to detect hover on not just app icons, but also in between the icons and expand dock's width appropriately. Then as long as the cursor is within this boundary (and/or on an app icon) for say 100ms (to make the assumption that the user is moving the cursor between the icons), the dock wouldn't wobble:

image

What do you think?

Sun0fABeach commented 1 year ago
  1. The margins on top are no longer consistent with the margins between apps

Agreed. I pushed another commit that sets the horizontal margins back to the old value and reduces the scaling effect instead.

  1. The margins between app <> app and app <> divider are no longer consistent on hover, which makes the layout unevenly spread out

I'm no design expert, but imho something like that is expected when you play this kind of transition effect. If your aspiration is to keep symmetry with surrounding UI elements while it plays, you'll encounter a lot of layout shift situations (as you do right now).

Thinking out load here, perhaps the ideal way to fix the wobble effect would be to detect hover on not just app icons, but also in between the icons and expand dock's width appropriately. Then as long as the cursor is within this boundary (and/or on an app icon) for say 100ms (to make the assumption that the user is moving the cursor between the icons), the dock wouldn't wobble

If you keep the dock container's width expanded and stable while hovering, the icons will just wobble inside instead. Basically, the wobble effect is created because the increasing margin will push the adjacent icons aside.

nmfretz commented 1 year ago

Good call on fixing the dock wobble @Sun0fABeach. I have attempted to address the issue, while preserving the app spacing within the dock as @mayankchhabra noted. See Pull Request #435.

Sun0fABeach commented 1 year ago

Closing this as the solution by @nmfretz is more thorough and feels great imo.