Theme switcher (#45)

Author: petiaccja

sed_manager_config/src/main.rs

@@ -20,7 +20,6 @@ mod utility;
 use backend::Backend;
 use core::error::Error;
 use frontend::Frontend;
-use license::{get_license_fingerprint, get_plain_license};
 use slint::ComponentHandle;
 use std::rc::Rc;
 use utility::PeekCell;
@@ -35,7 +34,7 @@ fn main() -> Result<(), Box<dyn Error>> {
     let backend = Rc::new(PeekCell::new(Backend::new()));
 
     // Load settings.
-    let settings = Rc::new(PeekCell::new(settings::load().unwrap_or(settings::Settings::default())));
+    let settings = settings::load().unwrap_or(settings::Settings::default());
 
     // Configure callbacks.
     let _ = slint::BackendSelector::new().backend_name("winit".into()).renderer_name("skia".into()).select();
@@ -46,31 +45,24 @@ fn main() -> Result<(), Box<dyn Error>> {
     configuration::set_callbacks(backend.clone(), frontend.clone());
     troubleshooting::set_callbacks(backend.clone(), frontend.clone());
     device_list::set_callbacks(backend.clone(), frontend.clone());
-    settings::set_callbacks(settings.clone(), frontend.clone());
     app_window.on_quit(|| {
         let _ = slint::quit_event_loop();
     });
 
     // Set parameters for the about page and the license.
     let ui_settings = app_window.global::<ui::SettingsState>();
-    ui_settings.set_license_text(get_plain_license().into());
-    ui_settings.set_license_changed(settings.peek(|settings| settings.accepted_license_fingerprint.is_some()));
+    settings::set_ui(settings, &ui_settings);
 
     // Refresh device list right after starting.
     let _ = app_window.show();
     app_window.global::<ui::DeviceListState>().invoke_list();
 
-    // Show license agreement if not already accepted.
-    let accepted_license_fingerprint = settings.peek(|settings| settings.accepted_license_fingerprint.clone());
-    if accepted_license_fingerprint != Some(get_license_fingerprint()) {
-        app_window.invoke_show_license();
-    }
-
     // Display GUI.
     app_window.run()?;
 
     // Save settings if changed.
-    if let Err(error) = settings::save(&settings.peek(|settings| settings.clone())) {
+    let settings = settings::get_ui(&ui_settings);
+    if let Err(error) = settings::save(&settings) {
         eprint!("Cannot save settings: {error}");
     }
 

sed_manager_config/src/settings.rs

@@ -3,31 +3,35 @@
 //L Please refer to the full license distributed with this software.
 //L-----------------------------------------------------------------------------
 
-use slint::ComponentHandle as _;
 use std::fs;
 use std::io::{Read, Write};
-use std::rc::Rc;
 
-use crate::frontend::Frontend;
-use crate::license::get_license_fingerprint;
+use crate::license::{get_license_fingerprint, get_plain_license};
 use crate::ui;
-use crate::utility::PeekCell;
 
 #[derive(Debug, Clone, Default, serde::Serialize, serde::Deserialize)]
 pub struct Settings {
     #[serde(default = "make_none")]
     pub accepted_license_fingerprint: Option<String>,
+    #[serde(default = "default_theme")]
+    pub theme: ui::Theme,
 }
 
-pub fn set_callbacks(settings: Rc<PeekCell<Settings>>, frontend: Frontend) {
-    frontend.with(move |window| {
-        let settings_state = window.global::<ui::SettingsState>();
-        settings_state.on_accept_license(move || {
-            settings.peek_mut(|settings| {
-                settings.accepted_license_fingerprint = Some(get_license_fingerprint());
-            });
-        });
-    });
+pub fn set_ui(settings: Settings, ui: &ui::SettingsState) {
+    ui.set_license_text(get_plain_license().into());
+    ui.set_accepted_license_fingerprint(settings.accepted_license_fingerprint.unwrap_or("".into()).into());
+    ui.set_license_fingerprint(get_license_fingerprint().into());
+    ui.set_theme(settings.theme);
+}
+
+pub fn get_ui(ui: &ui::SettingsState) -> Settings {
+    let accepted_license_fingerprint: String = ui.get_accepted_license_fingerprint().into();
+    let theme = ui.get_theme();
+    Settings {
+        accepted_license_fingerprint: (!accepted_license_fingerprint.is_empty())
+            .then_some(accepted_license_fingerprint),
+        theme,
+    }
 }
 
 pub fn save(settings: &Settings) -> Result<(), std::io::Error> {
@@ -59,3 +63,7 @@ pub fn load() -> Result<Settings, std::io::Error> {
 fn make_none<T>() -> Option<T> {
     None
 }
+
+fn default_theme() -> ui::Theme {
+    ui::Theme::System
+}

sed_manager_config_ui/Cargo.toml

@@ -15,4 +15,7 @@ default-features = false
 features = ["std", "compat-1-2"]
 
 [build-dependencies]
-slint-build = "1.12.0"
+slint-build = "1.12.0"
+
+[dependencies.serde]
+version = "1.0.219"

sed_manager_config_ui/images/action/contrast.svg

@@ -11,9 +11,10 @@ import {
     DeviceListState, TroubleshootingState, UserEditorState, RangeEditorState, SingleStepState, 
     PermissionEditorState, MBREditorState, SettingsState, ChangePasswordState 
 } from "state.slint";
-import { Button, Spinner, Palette } from "std-widgets.slint";
+import { Button, Palette } from "std-widgets.slint";
 import { DevicePage } from "pages/device_page.slint";
 import { UnavailableDevicesPage } from "pages/unavailable_devices_page.slint";
+import { Theme } from "data/theme.slint";
 import { Status } from "data/status.slint";
 import { StatusIndicator } from "widgets/progress.slint";
 import { PaletteExtra, Island } from "widgets/visual.slint";
@@ -60,6 +61,33 @@ component DriveTabView {
                     }
                 }
             }
+
+            Island {
+                width: 42px;
+                height: 32px;
+                IconButton {
+                    width: 100%;
+                    height: 100%;
+                    icon: {
+                        if SettingsState.theme == Theme.dark {
+                            Icons.dark-mode
+                        } else if SettingsState.theme == Theme.light {
+                            Icons.light-mode
+                        } else {
+                            Icons.contrast
+                        }
+                    };
+                    clicked => {
+                        if SettingsState.theme == Theme.dark {
+                            SettingsState.theme = Theme.light
+                        } else if SettingsState.theme == Theme.light {
+                            SettingsState.theme = Theme.system
+                        } else {
+                            SettingsState.theme = Theme.dark
+                        }
+                    }
+                }
+            }
         }
 
         AlternativeLayout {
@@ -139,14 +167,11 @@ component LoadingView {
 }
 
 export component AppWindow inherits Window {
-    title: "SED Manager";
+    title: "SEDManager";
     icon: Icons.sed-manager;
     preferred-width: 960px;
     preferred-height: 600px;
     private property <bool> loaded: DeviceListState.extended-status.status == Status.success && DeviceListState.tab-names.length != 0;
-    public function show-license() {
-        license-popup.visible = true;
-    }
     callback quit();
     VerticalLayout {
         if loaded: DriveTabView { }
@@ -157,11 +182,10 @@ export component AppWindow inherits Window {
         preferred-width: 100%;
         preferred-height: 100%;
         license-text: SettingsState.license-text;
-        license-changed: SettingsState.license-changed;
-        visible: false;
+        license-changed: !SettingsState.accepted-license-fingerprint.is-empty;
+        visible: SettingsState.accepted-license-fingerprint != SettingsState.license-fingerprint;
         accept => {
-            self.visible = false;
-            SettingsState.accept-license();
+            SettingsState.accepted-license-fingerprint = SettingsState.license-fingerprint;
         }
         decline => {
             quit();

sed_manager_config_ui/images/action/dark_mode.svg

@@ -0,0 +1,11 @@
+//L-----------------------------------------------------------------------------
+//L Copyright (C) Péter Kardos
+//L Please refer to the full license distributed with this software.
+//L-----------------------------------------------------------------------------
+
+@rust-attr(derive(serde::Serialize, serde::Deserialize))
+export enum Theme {
+    system, // The first is always the default.
+    dark,
+    light,
+}

sed_manager_config_ui/images/action/light_mode.svg

@@ -45,6 +45,9 @@ export global Icons {
     out property <image> file-open: @image-url("../images/action/file_open.svg");
     out property <image> close: @image-url("../images/action/close.svg");
     out property <image> cancel: @image-url("../images/action/cancel.svg");
+    out property <image> dark-mode: @image-url("../images/action/dark_mode.svg");
+    out property <image> light-mode: @image-url("../images/action/light_mode.svg");
+    out property <image> contrast: @image-url("../images/action/contrast.svg");
 }
 
 export global IconColors {

sed_manager_config_ui/ui/app_window.slint

@@ -10,6 +10,8 @@ import { RangeAccess } from "data/range_access.slint";
 import { DeviceDescription } from "data/device_description.slint";
 import { UnavailableDevice } from "data/unavailable_device.slint";
 import { MBRControl } from "data/mbr_control.slint";
+import { Theme } from "data/theme.slint";
+import { Palette } from "std-widgets.slint";
 
 export struct RangeList {
     names: [string],
@@ -125,6 +127,16 @@ export global DeviceListState {
 
 export global SettingsState {
     in property <string> license-text;
-    in property <bool> license-changed;
-    callback accept-license();
+    in property <string> accepted-license-fingerprint;
+    in property <string> license-fingerprint;
+    in property <Theme> theme;
+    changed theme => {
+        if theme == Theme.dark {
+            Palette.color-scheme = ColorScheme.dark;
+        } else if theme == Theme.light {
+            Palette.color-scheme = ColorScheme.light;
+        } else {
+            Palette.color-scheme = ColorScheme.unknown;
+        }
+    }
 }