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
133 stars 69 forks source link

Fix dock hover wobble #2 #435

Closed nmfretz closed 2 years ago

nmfretz commented 2 years ago

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).

https://user-images.githubusercontent.com/85373263/193135690-f97b9568-f880-4f2b-84d8-c157572b0a66.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):

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 commented 2 years ago

Great work, feels much better now!

nmfretz commented 2 years ago

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.

nmfretz commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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:

My animations are a bit laggy.