From 59a0cf82927b6f2d1b1ba48788630128a00ec581 Mon Sep 17 00:00:00 2001 From: jika Date: Sun, 6 Aug 2023 10:39:54 +0200 Subject: [PATCH] Change default theme to Onedark --- remote/src/main.rs | 2 + remote/ui/app-manager.slint | 2 + remote/ui/app.slint | 2 + remote/ui/pages/settings-page.slint | 60 ++++++++++++++--------------- remote/ui/themes/onedark.slint | 30 +++++++-------- remote/ui/themes/palettes.slint | 10 +++-- remote/ui/widgets/clickable.slint | 3 +- 7 files changed, 58 insertions(+), 51 deletions(-) diff --git a/remote/src/main.rs b/remote/src/main.rs index 7a76603..4db23c3 100644 --- a/remote/src/main.rs +++ b/remote/src/main.rs @@ -15,6 +15,8 @@ fn main() -> Result<(), slint::PlatformError> { let app = App::new()?; + app.global::().invoke_reload_color(); + media::init(&app, messages_to_server, message_from_server); virtual_keyboard::init(&app); diff --git a/remote/ui/app-manager.slint b/remote/ui/app-manager.slint index 656e2ca..7bacba0 100644 --- a/remote/ui/app-manager.slint +++ b/remote/ui/app-manager.slint @@ -4,4 +4,6 @@ export global AppManager { in-out property keyboard-enabled: true; in-out property widgets-enabled: true; + + in-out property debug: false; } diff --git a/remote/ui/app.slint b/remote/ui/app.slint index 9e4db54..7d5124a 100644 --- a/remote/ui/app.slint +++ b/remote/ui/app.slint @@ -3,11 +3,13 @@ import { MediaPage , SettingsPage } from "pages/pages.slint"; import { AppManager } from "app-manager.slint"; import { SideBarView } from "side-bar-view.slint"; import { MediaControls, MediaLogic } from "widgets/mediacontrols.slint"; +import { ColorReload } from "pages/settings-page.slint"; export { VirtualKeyboardHandler } export { AppManager } export { Palette } export { MediaLogic } +export { ColorReload } export component App inherits CoopWindow { // preferred-width: 600px; diff --git a/remote/ui/pages/settings-page.slint b/remote/ui/pages/settings-page.slint index 49afb78..91d569f 100644 --- a/remote/ui/pages/settings-page.slint +++ b/remote/ui/pages/settings-page.slint @@ -1,19 +1,33 @@ import { Page } from "page.slint"; import { AppManager } from "../app-manager.slint"; -import { ComboBox, Switch, Palette, ColorTheme, Icons, ColorVariant, CheckBox } from "../_imports/coop-widgets.slint"; -import { ThemeSwitcher, ColorPalette,Settings } from "../themes/palettes.slint"; +import { ComboBox, Switch, Palette, Icons, ColorVariant, CheckBox, ColorTheme } from "../_imports/coop-widgets.slint"; +import { ColorPalette, ThemeSettings, ThemeSwitcher } from "../themes/palettes.slint"; import { Onedark } from "../themes/onedark.slint"; import { BrushesPage } from "brushes-page.slint"; +export global ColorReload { + public function reload_color() { + ThemeSettings.built-in-theme = true; + if (ThemeSettings.color-index == 0) { + Palette.set-color-theme(ColorTheme.Coop); + return; + } else if (ThemeSettings.color-index == 1) { + Palette.set-color-theme(ColorTheme.Cosmic); + return; + } else if (ThemeSettings.color-index == 2){ + ThemeSettings.color-palette = Onedark.palette; + } + ThemeSettings.built-in-theme = false; + ThemeSwitcher.switch(ThemeSettings.color-palette); + + } +} + export component SettingsPage inherits Page { title: "Settings"; in-out property keyboard_check_box: true; in-out property disabled_check_box: true; - in-out property color_palette; - in-out property built-in-theme: true; - in-out property color_index; - in-out property debug: false; - + Flickable { VerticalLayout { alignment: start; @@ -30,26 +44,11 @@ export component SettingsPage inherits Page { checked <=> AppManager.widgets_enabled; } - function reload_color() { - root.built-in-theme = true; - if (root.color-index == 0) { - Palette.set-color-theme(ColorTheme.Coop); - return; - } else if (root.color-index == 1) { - Palette.set-color-theme(ColorTheme.Cosmic); - return; - } else if (root.color-index == 2){ - root.color-palette = Onedark.palette; - } - root.built-in-theme = false; - ThemeSwitcher.switch(root.color-palette); - - } ComboBox { width: 128px; height: 40px; placeholder-text: @tr("Select theme:"); - current-index: root.color-index; + current-index: ThemeSettings.color-index; model: [ { text: "Coop" }, @@ -58,8 +57,8 @@ export component SettingsPage inherits Page { ]; selected (index) => { - root.color-index=index; - reload-color(); + ThemeSettings.color-index=index; + ColorReload.reload-color(); } } @@ -70,20 +69,19 @@ export component SettingsPage inherits Page { height: 48px; on_icon: Icons.mode-night; off_icon: Icons.light-mode; - checked: !Palette.dark-color-scheme; + checked: !ThemeSettings.dark-color-scheme; toggled(checked) => { - Settings.dark-color-scheme = !checked; - if (root.built-in-theme){ + ThemeSettings.dark-color-scheme = !checked; + if (ThemeSettings.built-in-theme){ Palette.set-color-variant(checked ? ColorVariant.Light : ColorVariant.Dark); } else { - // ThemeSwitcher.switch(root.color-palette); - reload-color(); + ColorReload.reload-color(); } } } } - if root.debug : BrushesPage { } + if AppManager.debug : BrushesPage { } } } } diff --git a/remote/ui/themes/onedark.slint b/remote/ui/themes/onedark.slint index 44f0313..dd58595 100644 --- a/remote/ui/themes/onedark.slint +++ b/remote/ui/themes/onedark.slint @@ -1,4 +1,4 @@ -import { ColorPalette, Settings } from "palettes.slint"; +import { ColorPalette, ThemeSettings } from "palettes.slint"; struct ColorPalette_ { black : color, @@ -92,20 +92,20 @@ export global Onedark { out property palette: { - background: Settings.dark-color-scheme ? darker.bg0: light.bg0, - background-alt: Settings.dark-color-scheme ? darker.bg1: light.bg1, - foreground: Settings.dark-color-scheme ? darker.fg: light.fg, - foreground-disabled: Settings.dark-color-scheme ? darker.bg2: light.bg2, - surface: Settings.dark-color-scheme ? darker.bg3: light.bg3, - surface-disabled: Settings.dark-color-scheme ? darker.bg1: light.bg1, - on-surface: Settings.dark-color-scheme ? darker.bg-d: light.bg-d, - primary: Settings.dark-color-scheme ? darker.dark-purple: light.dark-purple, - on-primary: Settings.dark-color-scheme ? darker.bg-d: light.bg-d, - border: Settings.dark-color-scheme ? darker.bg2: light.bg2, - border-disabled: Settings.dark-color-scheme ? darker.bg3: light.bg3, - shadow: Settings.dark-color-scheme ? #00000052 : #00000014, + background: ThemeSettings.dark-color-scheme ? darker.bg0: light.bg0, + background-alt: ThemeSettings.dark-color-scheme ? darker.bg1: light.bg1, + foreground: ThemeSettings.dark-color-scheme ? darker.fg: light.fg, + foreground-disabled: ThemeSettings.dark-color-scheme ? darker.bg2: light.bg2, + surface: ThemeSettings.dark-color-scheme ? darker.bg3: light.bg3, + surface-disabled: ThemeSettings.dark-color-scheme ? darker.bg1: light.bg1, + on-surface: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d, + primary: ThemeSettings.dark-color-scheme ? darker.dark-purple: light.dark-purple, + on-primary: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d, + border: ThemeSettings.dark-color-scheme ? darker.bg2: light.bg2, + border-disabled: ThemeSettings.dark-color-scheme ? darker.bg3: light.bg3, + shadow: ThemeSettings.dark-color-scheme ? #00000052 : #00000014, error: darker.dark-red, - accent: Settings.dark-color-scheme ? darker.dark-purple: light.dark-purple, - on-accent: Settings.dark-color-scheme ? darker.bg-d: light.bg-d, + accent: ThemeSettings.dark-color-scheme ? darker.dark-purple: light.dark-purple, + on-accent: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d, }; } diff --git a/remote/ui/themes/palettes.slint b/remote/ui/themes/palettes.slint index 807e89a..24f7b3b 100644 --- a/remote/ui/themes/palettes.slint +++ b/remote/ui/themes/palettes.slint @@ -1,9 +1,6 @@ import { Palette } from "../_imports/coop-widgets.slint"; import { StyleMetrics } from "std-widgets.slint"; -export global Settings { - in-out property dark-color-scheme: StyleMetrics.dark-color-scheme; -} export struct ColorPalette { background: brush, background-alt: brush, @@ -22,6 +19,13 @@ export struct ColorPalette { on-accent: brush, } +export global ThemeSettings { + in-out property dark-color-scheme: StyleMetrics.dark-color-scheme; + in-out property color_palette; + in-out property built-in-theme; + in-out property color_index: 2; +} + export global ThemeSwitcher { public function switch(palette: ColorPalette) { Palette.background = palette.background; diff --git a/remote/ui/widgets/clickable.slint b/remote/ui/widgets/clickable.slint index 5d3af38..b6bd69a 100644 --- a/remote/ui/widgets/clickable.slint +++ b/remote/ui/widgets/clickable.slint @@ -4,11 +4,10 @@ export component Clickable inherits TouchArea { in property icon; callback action; - Image { width: 128px; height: 128px; - colorize: root.pressed ? Palette.foreground-disabled: Palette.foreground; + colorize: root.pressed ? Palette.accent: Palette.foreground; source: icon; }