feat(web-ui): UI consistency / layout uplifts - #5225
Conversation
|
Don't think the security hotspot SonarQube issue is valid tbh, it's literally just flagging |
ReenigneArcher
left a comment
There was a problem hiding this comment.
I haven't done a full review yet, but wanted to address your comment.
Bundle ReportChanges will decrease total bundle size by 1.53MB (-64.14%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sunshine-esmAssets Changed:
Files in
Files in
Files in
Files in
Files in
Files in
Files in
Files in
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5225 +/- ##
==========================================
- Coverage 27.54% 27.52% -0.02%
==========================================
Files 113 113
Lines 25596 25596
Branches 11239 11239
==========================================
- Hits 7051 7046 -5
- Misses 17403 17424 +21
+ Partials 1142 1126 -16
Flags with carried forward coverage won't be shown. Click here to find out more. Continue to review full report in Codecov by Harness.
|
9b27a71 to
7e25c42
Compare
ReenigneArcher
left a comment
There was a problem hiding this comment.
Finally got around to testing this and it looks really good! I did notice some issues, not all from your changes though.
- Not sure exactly where in the css this is coming from, but the release notes sections for Moonlight, Slate, and Midnight themes is not looking very good. Maybe some additional color tweaking needed here.
- This is not be because of your changes, but if you open and close the theme drop down quickly (basically double clicking the "theme" text). It will end up highlighting the text. Can you throw a fix in for this?
- Can you add some padding below the settings boxes? If they are taller than the browser window it ends at the exact bottom of the page with no gap below. Might need this on other pages as well.
|
@ReenigneArcher Fixed up your points with some small tweaks:
I also fixed up an issue i found with the Apps commands truncating the command icon / not showing. Also, I've got an update to the App cards i was working on while doing this, which moves the command / info to appear when you hover over the App card, and tightens up the spacing around the edit / delete buttons: |
|
Thanks! You can include the hover change here as well. |
294d62c to
62bc4a0
Compare
… / loading - Moved `sunshine.css` from `src_assets/common/assets/web/public/assets/css/sunshine.cs` to `src_assets/common/assets/web/sunshine.css` - MOved link refeences for styles from `template_header` to `init.js`
- Fixed `.btn-info` / `.btn-outline-primary` to use theme styling - Fixed `.btn-primary` being blue when clicking in (now themed)
- Updated the hover for dropdown items to actually style properly - Updated `ThemeToggle.vue` to implement it as a 2-column wide dropdown (left dark, right light) - Added translation for `theme_group_light` and `theme_group_dark` - Dropdown arrow rotates now + button is highlighted when open
…input group text colouring
- Allowing for overrides when themes are not contrasting enough between bg and text
…lours instead of `surface`
…ppuccin Mocha` (dark)
…oper palette from `ember` - Moved some of the theme buttons to be in-line with eachother
- Apparently `color-mix` is widely available to use now, so used this instead of setting keyframes
- Felt odd not having any text on this page like the others...
…tead of headers - Created column-based layout, including a split out for General / Encoder tabs - Shortened in-line search to display count
- Prefer `.dataset` over `getAttribute(…)` - `ENCODER_TAB_IDS` should be a `Set`, and use `ENCODER_TAB_IDS.has()` to check existence or non-existence.
Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>
- Fixed missing `id` on the `container` div, to make the padding consistent across the pages - Made the `--color-warning-light` styling unique across Moonlight, Slate, and Midnight - Fixed clicking on the theme button highlighting the text
…lient (instead of just a tailwind clone of `Slate` and `Midnight`)
- Set the icon to not be truncated if the cmd is too long - Truncates it now with `...` (still triple-clickable to select whole command) - Added `:title` to allow for hovering over to show it as a browser tooltip
- Moved App Command + Working directory to a hover state infront of the App's Image - Added badges onto the card to specify specific states of the app (running as elevated, including command prep / detached commands, etc.)
- Using `color-mixin` since we use other modern css functionality - Opted to not colouring the command / working dir text for compatibility
62bc4a0 to
b705b7f
Compare
|
Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com> (cherry picked from commit 3266c34)
|
@Noklef could you have a look at this issue? The Welcome screen seems to be missing a bunch of css. 
|
Description
Originally this was just a branch to make styling work, but expanded out a bit 😅
General
sunshine.cssout ofpublic/assets/cssto reliably override the bootstrap defaults for theming correctlyThemes
Dracula,Alucard,Catppuccin Mocha / Latte,Ember Light,Rose Pine / DawnNord/Embertheme styling to conform to their online style guideRandomtheme button-color-on-XXXXto allow for changing text colour for buttons (contrast fixing)Page updates
Apps: Added a background to the toolbar for the apps pageFeatured Apps: Added the toolbar to theAll / Clients / ToolsbuttonsLogout: Themed the logout page to match the the selected themePassword: Added a description for the password pageConfiguration Page
Screenshot
Themes
Dracula / Alucard themes - TwinLens
Catppuccin Mocha / Latte themes - TwinLens
Ember / Ember Light themes - TwinLens
Rose Pine / Rose Pine Dawn themes - TwinLens
Apps page
Featured Apps page
Logout page
Configuration page
Issues Fixed or Closed
Roadmap Issues
Type of Change
Checklist
AI Usage