Merge pull request #51 from nazar-pc/fix-icons

Render icons properly in cross-platform way
autonomys · Dec 19, 2023 · 109f608 · 109f608
2 parents a1e0429 + d545af9
commit 109f608
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 27 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -50,6 +50,7 @@ mimalloc = "0.1.39"
 names = "0.14.0"
 parking_lot = "0.12.1"
 relm4 = { version = "0.7.0-beta.2", git = "https://github.com/Relm4/Relm4", rev = "f216c7f5ba1324413cb16e45c37e0b9297473ec2" }
+relm4-icons = { version = "0.7.0-alpha.2", features = ["checkmark", "cross", "menu-large", "size-horizontally", "ssd", "wallet2"] }
 relm4-components = { version = "0.7.0-beta.2", git = "https://github.com/Relm4/Relm4", rev = "f216c7f5ba1324413cb16e45c37e0b9297473ec2", default-features = false }
 sc-client-api = { git = "https://github.com/subspace/polkadot-sdk", rev = "c63a8b28a9fd26d42116b0dcef1f2a5cefb9cd1c", default-features = false }
 sc-client-db = { git = "https://github.com/subspace/polkadot-sdk", rev = "c63a8b28a9fd26d42116b0dcef1f2a5cefb9cd1c", default-features = false }

diff --git a/src/frontend/configuration.rs b/src/frontend/configuration.rs
@@ -5,6 +5,7 @@ use relm4::prelude::*;
 use relm4_components::open_dialog::{
     OpenDialog, OpenDialogMsg, OpenDialogResponse, OpenDialogSettings,
 };
+use relm4_icons::icon_name;
 use std::ops::Deref;
 use std::path::PathBuf;
 use std::str::FromStr;
@@ -79,8 +80,8 @@ impl<T> MaybeValid<T> {
     fn icon(&self) -> Option<&'static str> {
         match self {
             MaybeValid::Unknown(_) => None,
-            MaybeValid::Valid(_) => Some("emblem-ok-symbolic"),
-            MaybeValid::Invalid(_) => Some("window-close-symbolic"),
+            MaybeValid::Valid(_) => Some(icon_name::CHECKMARK),
+            MaybeValid::Invalid(_) => Some(icon_name::CROSS),
         }
     }
 }
@@ -150,6 +151,9 @@ impl Component for ConfigurationView {
                                     set_placeholder_text: Some(
                                         "stB4S14whneyomiEa22Fu2PzVoibMB7n5PvBFUwafbCbRkC1K",
                                     ),
+                                    set_primary_icon_name: Some(icon_name::WALLET2),
+                                    set_primary_icon_activatable: false,
+                                    set_primary_icon_sensitive: false,
                                     #[watch]
                                     set_secondary_icon_name: model.reward_address.icon(),
                                     set_secondary_icon_activatable: false,
@@ -193,6 +197,9 @@ impl Component for ConfigurationView {
                                                 "/media/subspace-node"
                                             },
                                         ),
+                                        set_primary_icon_name: Some(icon_name::SSD),
+                                        set_primary_icon_activatable: false,
+                                        set_primary_icon_sensitive: false,
                                         #[watch]
                                         set_secondary_icon_name: model.node_path.icon(),
                                         set_secondary_icon_activatable: false,
@@ -210,18 +217,7 @@ impl Component for ConfigurationView {
                                         connect_clicked => ConfigurationInput::OpenDirectory(
                                             DirectoryKind::NodePath
                                         ),
-
-                                        gtk::Box {
-                                            set_spacing: 10,
-
-                                            gtk::Image {
-                                                set_icon_name: Some("folder-new-symbolic"),
-                                            },
-
-                                            gtk::Label {
-                                                set_label: "Select",
-                                            },
-                                        },
+                                        set_label: "Select",
                                     },
                                 },
                             },
@@ -259,6 +255,9 @@ impl Component for ConfigurationView {
                                                     "/media/subspace-farm"
                                                 },
                                             ),
+                                            set_primary_icon_name: Some(icon_name::SSD),
+                                            set_primary_icon_activatable: false,
+                                            set_primary_icon_sensitive: false,
                                             #[watch]
                                             set_secondary_icon_name: model.farms.get(0).map(|farm| farm.path.icon()).unwrap_or_default(),
                                             set_secondary_icon_activatable: false,
@@ -275,18 +274,7 @@ impl Component for ConfigurationView {
                                             connect_clicked => ConfigurationInput::OpenDirectory(
                                                 DirectoryKind::FarmPath(0)
                                             ),
-
-                                            gtk::Box {
-                                                set_spacing: 10,
-
-                                                gtk::Image {
-                                                    set_icon_name: Some("folder-new-symbolic"),
-                                                },
-
-                                                gtk::Label {
-                                                    set_label: "Select",
-                                                },
-                                            },
+                                            set_label: "Select",
                                         },
                                     },
 
@@ -306,6 +294,9 @@ impl Component for ConfigurationView {
                                         set_placeholder_text: Some(
                                             "4T, 2.5TB, 500GiB, etc.",
                                         ),
+                                        set_primary_icon_name: Some(icon_name::SIZE_HORIZONTALLY),
+                                        set_primary_icon_activatable: false,
+                                        set_primary_icon_sensitive: false,
                                         #[watch]
                                         set_secondary_icon_name: model.farms.get(0).map(|farm| farm.size.icon()).unwrap_or_default(),
                                         set_secondary_icon_activatable: false,

diff --git a/src/main.rs b/src/main.rs
@@ -20,6 +20,7 @@ use futures::{select, FutureExt, SinkExt, StreamExt};
 use gtk::prelude::*;
 use relm4::prelude::*;
 use relm4::RELM_THREADS;
+use relm4_icons::icon_name;
 use std::future::Future;
 use std::io::{Read, Write};
 use std::path::{Path, PathBuf};
@@ -194,7 +195,7 @@ impl AsyncComponent for App {
                 gtk::HeaderBar {
                     pack_end = &gtk::MenuButton {
                         set_direction: gtk::ArrowType::None,
-                        set_icon_name: "open-menu-symbolic",
+                        set_icon_name: icon_name::MENU_LARGE,
                         #[wrap(Some)]
                         set_popover: menu_popover = &gtk::Popover {
                             set_halign: gtk::Align::End,
@@ -616,6 +617,7 @@ impl Cli {
         });
 
         app.set_global_css(GLOBAL_CSS);
+        relm4_icons::initialize_icons();
 
         // Prefer dark theme in cross-platform way if environment is configured that way
         if let Some(settings) = gtk::Settings::default() {