From ecad26047287ed2f65ee782cc02edae8323017c0 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 21 Jun 2023 15:38:26 +0200 Subject: [PATCH] Fix themepicker --- .../javascripts/components/theme_picker.ts | 20 +++++++++++-------- app/assets/javascripts/i18n/translations.json | 10 ++++++++++ app/assets/stylesheets/components.css.scss | 1 + .../components/themepicker.css.scss | 13 ++++++++++++ config/locales/js/en.yml | 4 ++++ config/locales/js/nl.yml | 4 ++++ 6 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/components/themepicker.css.scss diff --git a/app/assets/javascripts/components/theme_picker.ts b/app/assets/javascripts/components/theme_picker.ts index 177bd7f4b9..dda37aba49 100644 --- a/app/assets/javascripts/components/theme_picker.ts +++ b/app/assets/javascripts/components/theme_picker.ts @@ -1,19 +1,23 @@ import { ShadowlessLitElement } from "components/meta/shadowless_lit_element"; import { html, TemplateResult } from "lit"; import { customElement } from "lit/decorators.js"; -import { THEME_OPTIONS, ThemeOption, themeState } from "state/Theme"; +import { Theme, THEME_OPTIONS, ThemeOption, themeState } from "state/Theme"; import { fetch } from "util.js"; /** */ @customElement("d-theme-picker") export class ThemePicker extends ShadowlessLitElement { - static THEME_ICON_MAP: Record = { - "light": "mdi-light-mode", - "dark": "mdi-dark-mode", - "auto": "mdi-tonality", + static THEME_ICON_MAP: Record = { + "light": html``, + "dark": html``, }; + static getThemeIcon(theme: ThemeOption): TemplateResult { + const t = theme == "auto" ? themeState.preferredTheme : theme; + return ThemePicker.THEME_ICON_MAP[t]; + } + selectTheme(theme: ThemeOption): void { themeState.selectedTheme = theme; fetch("/theme", { @@ -27,12 +31,12 @@ export class ThemePicker extends ShadowlessLitElement { return html`
    • ${ THEME_OPTIONS.map(theme => html` -
    • this.selectTheme(theme)}> - +
    • this.selectTheme(theme)}> + ${ThemePicker.getThemeIcon(theme)} ${I18n.t(`js.theme.${theme}`)}
      • `)} diff --git a/app/assets/javascripts/i18n/translations.json b/app/assets/javascripts/i18n/translations.json index d221e55d0b..8bb6e3fd12 100644 --- a/app/assets/javascripts/i18n/translations.json +++ b/app/assets/javascripts/i18n/translations.json @@ -408,6 +408,11 @@ }, "submissions": "submissions", "submissions_on": "submissions on", + "theme": { + "auto": "Auto", + "dark": "Dark", + "light": "Light" + }, "timeseries_desc": "This graph shows on which moments the students submitted the most solutions.", "timeseries_title": "Submissions over time", "total": "total", @@ -918,6 +923,11 @@ }, "submissions": "oplossingen", "submissions_on": "ingediende oplossingen op", + "theme": { + "auto": "Auto", + "dark": "Donker", + "light": "Licht" + }, "timeseries_desc": "Deze grafiek toont op welke momenten het meest aan een bepaalde oefening werd gewerkt.", "timeseries_title": "Ingediende oplossingen over tijd", "total": "totaal aantal", diff --git a/app/assets/stylesheets/components.css.scss b/app/assets/stylesheets/components.css.scss index a5ab00f8ca..5e3f8e44fa 100644 --- a/app/assets/stylesheets/components.css.scss +++ b/app/assets/stylesheets/components.css.scss @@ -27,6 +27,7 @@ @import "components/courselabel-edit.css.scss"; @import "components/action-card.css.scss"; @import "components/progress_bar.css.scss"; +@import "components/themepicker.css.scss"; .flex-spacer { flex-grow: 1; diff --git a/app/assets/stylesheets/components/themepicker.css.scss b/app/assets/stylesheets/components/themepicker.css.scss new file mode 100644 index 0000000000..06c523efa8 --- /dev/null +++ b/app/assets/stylesheets/components/themepicker.css.scss @@ -0,0 +1,13 @@ +d-theme-picker { + svg { + fill: currentcolor; + width: 24px; + height: 24px; + } + + .dropdown-toggle { + svg { + vertical-align: inherit; + } + } +} diff --git a/config/locales/js/en.yml b/config/locales/js/en.yml index f5bf3d67f9..8d03169bb5 100644 --- a/config/locales/js/en.yml +++ b/config/locales/js/en.yml @@ -315,4 +315,8 @@ en: show_all: Show all annotations hide_all: Hide all annotations show_errors: Only show errors + theme: + light: Light + dark: Dark + auto: Auto diff --git a/config/locales/js/nl.yml b/config/locales/js/nl.yml index 45fe793459..bfae11a89a 100644 --- a/config/locales/js/nl.yml +++ b/config/locales/js/nl.yml @@ -315,5 +315,9 @@ nl: show_all: Toon alle annotaties hide_all: Verberg alle annotaties show_errors: Enkel errors en opmerkingen tonen + theme: + light: Licht + dark: Donker + auto: Auto