feat: light mode ui #1580

inhabitworker · 2023-10-04T14:15:03Z

Description

Added a light mode with accompanying option under UI Settings, relying on vuetify defaults (removing explicit "dark" attributes in code etc.) and a theme mixin used to close the gap/centralize to extend consistently to chart options and other specific places where needed

Related Tickets & Documents

Fixes #1297

Mobile & Desktop Screenshots/Recordings

github-actions · 2023-10-04T14:16:02Z

Language file analysis report:

File	Missing Keys	Unused Keys
en.json	0	3

src/components/TheConnectingDialog.vue

src/components/TheSidebar.vue

src/components/TheTimelapseRenderingSnackbar.vue

src/components/TheEditor.vue

src/components/TheTopbar.vue

src/components/TheUpdateDialog.vue

src/components/panels/Machine/ConfigFilesPanel.vue

src/components/panels/StatusPanel.vue

src/store/gui/types.ts

src/store/server/history/types.ts

src/App.vue

meteyou · 2023-10-07T07:39:45Z

Thanks for your PR! This is a very popular feature. I just found some small issues:

In dark mode, the "toolbar" and the "content" of each panel have different background color and you see the there different areas. For example in your screenshot above from the "Interface Settings", the sidebar will scroll and cut by a white line, where the toolbar starts. I would prefer a border bottom of the toolbar like here in my screenshot:
(I just added it in the chrome dev tools with border-bottom: 1px solid #ccc;)
the snackbar is right now in "dark mode":
history panel creates errors because of the changes from the charts

i also add some comments to the code changes. I will be happy to merge this feature then.

inhabitworker · 2023-10-10T13:33:02Z

I will make changes according to your feedback. Apologies as I am new to contributing, I'm wondering if I should be creating some test(s) here, rather than eyeballing? Truthfully I am unsure when it comes to this kind of visual feature. Thank you for reviewing my code.

meteyou · 2023-10-10T18:42:23Z

I will make changes according to your feedback. Apologies as I am new to contributing, I'm wondering if I should be creating some test(s) here, rather than eyeballing? Truthfully I am unsure when it comes to this kind of visual feature. Thank you for reviewing my code.

unfortunately there are no tests in mainsail, because of the api connection. i would like to offer some automatic tests, but unfortunately i can't do it at the moment. unfortunately i can only check it with my eyes...

…ht theme adjustments, further theme mixin coverage of extant default dark styling, charts reactive to theme switch

github-actions · 2023-10-15T19:06:49Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	9	4
en.json	0	3
fr.json	90	7
it.json	383	9
pl.json	4	3
tr.json	19	4
zh.json	10	2

inhabitworker · 2023-10-15T19:20:02Z

Sorry for the delay, I will list some of the changes I have made:

Returned "dark" attributes, with conditional check. Still not sure that these are necessary (they dictate whether to use dark light stylings within theme, which is what is being adjusted anyway).
Initial loading of config.json is made to be synchronous before vue is mounted so there isn't an ugly transition when theme is being resolved. As such, theme is resolved further in this process too (default possibly read from file, potential user setting fetched from moonraker, falling back to dark)
Some adjustments to charts on the history page to make sure they properly refresh with theme switches.
"snackbars" themed, "dragable" elements in settings also themed, which were previously themed by hard coded css class, now as style.
border-bottom on panel title bar (toolbar?)

There's a few little changes here and there, I tried to tie things once again into the theme mixin, so these visual settings can be more easily located in case of other developments

src/main.ts

meteyou · 2023-10-29T07:57:35Z

sry for the late response. can you doublecheck if the dark option is needed? if it is not needed, i would prefer to remove it complete.

i also added a comment to the "default setting load". this cannot work this way, because at this moment, its possible, that there don't exist a moonraker url.

meteyou · 2023-12-03T22:23:33Z

@inhabitworker any update here?

# Conflicts: # src/main.ts # src/store/gui/index.ts

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-10T22:42:33Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-11T21:49:05Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-11T21:53:30Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-13T21:43:39Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-13T22:05:17Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-13T22:18:59Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-13T22:21:32Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

Signed-off-by: Stefan Dej <[email protected]>

github-actions · 2023-12-16T08:33:17Z

Language file analysis report:

File	Missing Keys	Unused Keys
de.json	20	0
en.json	0	0

light mode, theme mixin created

627ae4d