Update User Experience and Settings Page Revamp
GitHub
Update User Experience and Settings Page Revamp · nekename OpenDec...
Background: The current user interface for OpenDeck is implemented using Svelte and TailwindCSS. It is considered to be in good working condition. However, as the use of Linux continues to grow, an...
25 Replies
I think that you can go ahead and implement the first two points of the proposed solution, and I'll merge them happily
but for the settings page having tabs - if the settings page does in fact start overflowing, I will of course implement a better solution, but for now it's working and i think a load of mostly empty tabs wouldn't be great
@nekename do we have a palette for the application. I've been using greys like other places in the project, but if we have a palette I can use other colors as well.
just the tailwind neutral colours (and very rarely other tailwind colours, like the blue outline when you select a button)
I'm a programmer, not a designer or anything else :P
I threw together something that I thought looked OK but went no further
I feel that, I'm not a designer either 😆. Do you want me to post screenshots of hover effects for your approval here? I'm honestly just either going one tw shade darker or lighter depending on the button. I've also updated the icon buttons to have a circle background of a neutral color on hover.
while you're at it, do you think you could make the icons properly coloured with tailwind? iirc, they are styled with hex codes right now
no need for screenshots, I'll just try out your PR once you summit it
but feel free to send them if you want to
Yeah, I will walk through and if I find an icon with a hex code I will replace with the closest tailwind color.
anyway, I was up at 4 last night, and it's 23 now so I'm going to sleep, cya
Yeah, I also volunteer to test it then.
PR has been created. I mention it in the comments, but since I don't have a device connected, there are some screens that I couldn't personally test. If you want to hold on the pr until I get a chance to test the rest of it, I can just let you know when my device arrives, and I've completed the untested screens. Otherwise, it should be good to test.
I'm away until Tuesday so I can't test it anyway
I will later try it on my device.
Just to add my things, The smaller Action buttons on the side bar is a bit difficult on higher screen resolutions. The rest seems ok as far as I can tell
Maybe don't make the actionlist smaller but the names of the collapsables a bit bigger?
I'll look into that. I prefer a smaller icon because it really distinguishes the hierarchy of that component. I'm fine with reverting, but do you think it'd be worth adding an additional breakpoint for larger viewports that resizes? That would allow the hierarchy, and resolve the high resolution problem.
Would atleast be worth a shot.
I pushed an update to the pr that has a version of the icons that on the whole is larger than the previous version. I also adjusted how wide the actions sidebar displays. Lastly, I updated the profile manager component to better handle hover effects now that I have a device to view that screen.
I am giving the tenative complete on my end pending approval from you all.
Will test when at home
Unfortunatly its still pretty small when using Opendeck not in fullscreen but on a 4k Screen.
Hm, I've been testing on a 4k monitor. I have a 40px min-width. At this point we are only 8px smaller than the original size, so I am going to revert the icon size and keep the left padding to indicate hierarchy.
I don't have measured but I have 3 icons in the place where 2 are with the "normal" version. So its significantly smaller
I may be completely off here, but are you referring to icons originating from a plugin?
all icons on the side
Oh, well I just decided to revert the size of the icon. No use in changing it if it causes problems.
@Intrinsic I haven't had time to fully review everything, but there are two clear issues so far:
- unregistered/broken plugins don't seem to be showing up correctly, the alert icon hasn't been updated (see screenshot)
- when dragging a new action over an empty key, it shows the 'not allowed' cursor instead of the grabbing cursor
also, you seem to have missed some hover effects, for example the X button in the top right corner of popups like this
aside from those actual issues, I also think the button hover effect in the dark theme should be less extreme (in light mode it looks good, but the hover colour is too dark / far from the original colour in dark mode)
by this i mean the 'Plugins' and 'Settings' buttons and the ones in the settings menu as well, I know you just went 700 -> 800 but it seems too dark
also, the red colour of the delete buttons (both in the profile manager and in the button context menu) seems to contrast badly in dark mode (again, looks fine in light mode)
also adding borders to the buttons in the profile manager in dark mode feels off, especially the 'Create' button because it's connected to the input field
(I also can't merge your PR unless you sign your commits)
I think its alright. Most other darm mode implementations change ao little for hover effects that it isn't even noticable most of the time.
@nekename I will resolve your feedback after work today. For the contrast in dark mode, do you think going to a shade lighter would be a better effect on the buttons?
For signing, I looked into the error, and I am confused by the feedback from github. I push with ssh and that should sign automatically. I will look into it.
For the button hover effect with input fields I'm really struggling to come up with a different way to get a hover effect that isn't to dark or borders. I could go way lighter, but that's really big of an effect. Thoughts?