[PATCH yew-widget-toolkit 1/2] widget: theme mode selector: add tooltips for the different modes

[PATCH yew-widget-toolkit 1/2] widget: theme mode selector: add tooltips for the different modes

[Dominik Csapak]

So it's clear which mode is activated currently.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/theme_mode_selector.rs | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/widget/theme_mode_selector.rs b/src/widget/theme_mode_selector.rs
index 78df587..b254108 100644
--- a/src/widget/theme_mode_selector.rs
+++ b/src/widget/theme_mode_selector.rs
@@ -3,7 +3,7 @@ use std::rc::Rc;
 use yew::virtual_dom::{Key, VComp, VNode};
 
 use crate::state::{Theme, ThemeMode};
-use crate::widget::Button;
+use crate::widget::{Button, Tooltip};
 use crate::{impl_class_prop_builder, impl_yew_std_props_builder, prelude::*};
 
 /// Round icon button to select light/dark theme.
@@ -78,15 +78,20 @@ impl Component for PwtThemeModeSelector {
 
         let onclick = ctx.link().callback(|_| Msg::NextMode);
 
-        Button::new_icon(match self.theme {
-            ThemeMode::System => "fa fa-fw fa-asterisk",
-            ThemeMode::Dark => "fa fa-fw fa-moon-o",
-            ThemeMode::Light => "fa fa-fw fa-sun-o",
-        })
-        .class(props.class.clone())
-        .class("circle")
-        .onclick(onclick)
-        .aria_label("Select Theme Mode")
+        let (icon, tip) = match self.theme {
+            ThemeMode::System => ("fa fa-fw fa-asterisk", tr!("System Theme")),
+            ThemeMode::Dark => ("fa fa-fw fa-moon-o", tr!("Dark Mode")),
+            ThemeMode::Light => ("fa fa-fw fa-sun-o", tr!("Light Mode")),
+        };
+
+        Tooltip::new(
+            Button::new_icon(icon)
+                .class(props.class.clone())
+                .class("circle")
+                .onclick(onclick)
+                .aria_label("Select Theme Mode"),
+        )
+        .tip(tip)
         .into()
     }
 
-- 
2.47.3

[PATCH yew-widget-toolkit 2/2] widget: theme mode selector: use 'fa-desktop' for system theme

[Dominik Csapak]

this is a more common icon used to represent the system theme and the
asterisk and sun icon are too similar on first glance.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/theme_mode_selector.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widget/theme_mode_selector.rs b/src/widget/theme_mode_selector.rs
index b254108..81390e7 100644
--- a/src/widget/theme_mode_selector.rs
+++ b/src/widget/theme_mode_selector.rs
@@ -79,7 +79,7 @@ impl Component for PwtThemeModeSelector {
         let onclick = ctx.link().callback(|_| Msg::NextMode);
 
         let (icon, tip) = match self.theme {
-            ThemeMode::System => ("fa fa-fw fa-asterisk", tr!("System Theme")),
+            ThemeMode::System => ("fa fa-fw fa-desktop", tr!("System Theme")),
             ThemeMode::Dark => ("fa fa-fw fa-moon-o", tr!("Dark Mode")),
             ThemeMode::Light => ("fa fa-fw fa-sun-o", tr!("Light Mode")),
         };
-- 
2.47.3