Fix dock hover wobble #2

[nmfretz]

This pull request proposes changes that fix the dock wobble issue noted by @Sun0fABeach in Issue #434, while preserving the margins within the dock. This works on both desktop and mobile (when the dock is mounted to the left).

wobbly-dock-fix_umbrel-dashboard.mp4

I tried not to change the underlying html or javascript too much, and instead focused on a css solution. This could work as a short-term solution to the dock wobble issue; however, I think a longer-term solution would be to rewrite some of the html in Dock.vue and DockApp.vue so that the css can be simplified.

Some notes about the changes (not exhaustive):

• Replaced margin property with padding for .dock-app-container. Removed height/width properties from .dock-app-container and added them to .dock-app-icon (and dark/light-mode svg). These two changes result in the user always being in a hover state when moving from one dock-app to the next because the cursor never enters margin space between the apps.

• .dock-app-icon (and dark/light-mode svg) change size on hover instead of .dock-app-icon-container. This is still triggered when the user hovers over .dock-app-container. Padding property keeps appropriate spacing within the dock.

• Changed the dock divider (that separates the settings app and dark/light-mode toggle) from a <div> to a pseudo ::after element on the settings app. This prevents the user from exiting out of a hover state when moving between the settings app and the dark/light-mode toggle.

  • bounce-vertical-reverse and bounce-horizontal-reverse animations are applied to the ::after element so that it does not move when the settings app is clicked and bounces.

These changes unfortunately mean that the .dock-app-notification <div> needs to be scaled separately from the .dock-app-icon-container when a user hovers over .dock-app-container. With my changes, I am not entirely happy with how the transition looks when a user hovers over the app-store icon that has a notification for app updates. Needs some work.

What do you think? It may be a bit too hacky for a merge, but if enough people complain about the dock it could be an interim fix.

[Sun0fABeach]

Great work, feels much better now!

[nmfretz]

Great work, feels much better now!

Thanks Markus! There's still a little bit of tweaking that could be done I think. At this point I may have just added too many css work-arounds.

[mayankchhabra]

Thanks for taking this up, @nmfretz! Impressive work and really clever workarounds, especially on using padding and changing divider to a pseudo element. Hovering over the icons feels very elegant.

These two changes result in the user always being in a hover state when moving from one dock-app to the next because the cursor never enters margin space between the apps.

Very clever and it also feels much more intuitive this way because the moment your cursor hovers near a dock icon, it inflates in very dock-esque manner.

One small issue I noticed: the position of active state indicator and notification on the settings icon seems off:

Also, can you elaborate a bit more on this:

With my changes, I am not entirely happy with how the transition looks when a user hovers over the app-store icon that has a notification for app updates. Needs some work.

Your PR:

CleanShot.2022-10-01.at.01.19.42.mp4

Current:

CleanShot.2022-10-01.at.01.21.08.mp4

Are you referring to the parallax-like effect in the manner that the notification badge expands and contracts compared to the icon?

[nmfretz]

Thanks for the kind words, Mayank. I have pushed a new commit that addresses the issues you noted.

One small issue I noticed: the position of active state indicator and notification on the settings icon seems off:

Good catch, that was a silly oversight on my part. The offset occurs because the extra padding on the psuedo :after element makes the settings app container wider. I had taken this into account for the app name tooltip, but forgot about the state and notification indicators.

To avoid this problem entirely, I have changed the dock divider to be a pseudo :before element on the dark-light mode toggle, which doesn't have state or notification indicators.

Are you referring to the parallax-like effect in the manner that the notification badge expands and contracts compared to the icon?

Yes, exactly. However, the mp4 you included of my PR running on your computer looks great. My current laptop is not very powerful and I think it was struggling a bit to serve the application and render the transformations, so I was sometimes seeing a very subtle offset in the expansion/contraction of the icon and notification badge.

[mayankchhabra]

Tested locally and everything looks great! Nice work here, @nmfretz. Thank you!

[mayankchhabra]

My current laptop is not very powerful and I think it was struggling a bit to serve the application and render the transformations

Just curious, what are the CPU/GPU/RAM specs of your laptop? A few users have reported laggy animations throughout the UI and I'm wondering if the spec-range is common between all reports and if there's a way we can make the experience better...

[nmfretz]

Just curious, what are the CPU/GPU/RAM specs of your laptop? A few users have reported laggy animations throughout the UI and I'm wondering if the spec-range is common between all reports and if there's a way we can make the experience better...

Current specs of my Surface Laptop 2:

• Processor: Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz 2.11 GHz
• RAM: 8 GB
• GPU: Intel(R) UHD Graphics 620

My animations are a bit laggy.