fix styling and desktop files

Cargo.lock

@@ -278,6 +278,7 @@ dependencies = [
 name = "cosmic-applet-graphics"
 version = "0.1.0"
 dependencies = [
+ "cosmic-panel-config",
  "gtk4",
  "once_cell",
  "relm4-macros 0.4.4",
@@ -306,6 +307,7 @@ dependencies = [
 name = "cosmic-applet-power"
 version = "0.1.0"
 dependencies = [
+ "cosmic-panel-config",
  "futures-util",
  "gtk4",
  "logind-zbus",

applets/cosmic-applet-graphics/data/com.system76.CosmicAppletGraphics.desktop

@@ -1,12 +1,12 @@
 [Desktop Entry]
-Name=Cosmic Dock App List
+Name=Cosmic Applet Graphics
 Comment=Write a GTK + Rust application
 Type=Application
-Exec=cosmic-dock-app-list
+Exec=cosmic-applet-graphics
 Terminal=false
 Categories=GNOME;GTK;
 Keywords=Gnome;GTK;
 # Translators: Do NOT translate or transliterate this text (this is an icon file name)!
-Icon=com.system76.CosmicDockAppList.svg
+Icon=com.system76.CosmicAppletGraphics.svg
 StartupNotify=true
 NoDisplay=true

applets/cosmic-applet-graphics/src/main.rs

@@ -54,20 +54,22 @@ fn row_clicked(_: &ListBox, row: &ListBoxRow) {
 }
 
 fn build_ui(application: &gtk4::Application) {
-    let provider = CssProvider::new();
+    let provider = gtk4::CssProvider::new();
     provider.load_from_data(include_bytes!("style.css"));
-    StyleContext::add_provider_for_display(
+    gtk4::StyleContext::add_provider_for_display(
-        &Display::default().expect("Could not connect to a display."),
+        &gtk4::gdk::Display::default().expect("Could not connect to a display."),
         &provider,
-        STYLE_PROVIDER_PRIORITY_APPLICATION,
+        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
     );
 
     let window = gtk4::ApplicationWindow::builder()
         .application(application)
         .title("COSMIC Graphics Applet")
-        .default_width(1)
-        .default_height(1)
         .decorated(false)
+        .resizable(false)
+        .width_request(1)
+        .height_request(1)
+        .css_classes(vec!["root_window".to_string()])
         .build();
     let config = CosmicPanelConfig::load_from_env().unwrap_or_default();
     let popover = gtk4::builders::PopoverBuilder::new()
@@ -93,6 +95,7 @@ fn build_ui(application: &gtk4::Application) {
         icon_box = gtk4::Box {
             set_orientation: Orientation::Vertical,
             set_spacing: 0,
+            add_css_class: "icon_box",
         }
     }
 

applets/cosmic-applet-graphics/src/style.css

@@ -2,3 +2,32 @@
 	background-color: #2f2f2f;
 	opacity: 0.85;
 }
+
+image.panel_icon {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+button.panel_icon {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: transparent;
+    background: transparent;
+    outline-color: transparent;
+}
+
+button.panel_icon:hover {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: rgba(255, 255, 255, 0.1);
+    outline-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+window.root_window {
+	background: transparent;
+}

applets/cosmic-applet-network/data/com.system76.CosmicAppletNetwork.desktop

@@ -1,12 +1,12 @@
 [Desktop Entry]
-Name=Cosmic Dock App List
+Name=Cosmic Applet Network
 Comment=Write a GTK + Rust application
 Type=Application
-Exec=cosmic-dock-app-list
+Exec=cosmic-applet-network
 Terminal=false
 Categories=GNOME;GTK;
 Keywords=Gnome;GTK;
 # Translators: Do NOT translate or transliterate this text (this is an icon file name)!
-Icon=com.system76.CosmicDockAppList.svg
+Icon=com.system76.CosmicAppletNetwork.svg
 StartupNotify=true
 NoDisplay=true

applets/cosmic-applet-network/src/main.rs

@@ -24,12 +24,22 @@ fn main() {
 }
 
 fn build_ui(application: &gtk4::Application) {
+    let provider = gtk4::CssProvider::new();
+    provider.load_from_data(include_bytes!("style.css"));
+    gtk4::StyleContext::add_provider_for_display(
+        &gtk4::gdk::Display::default().expect("Could not connect to a display."),
+        &provider,
+        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
+    );
+
     let window = gtk4::ApplicationWindow::builder()
         .application(application)
         .title("COSMIC Network Applet")
-        .default_width(1)
-        .default_height(1)
         .decorated(false)
+        .resizable(false)
+        .width_request(1)
+        .height_request(1)
+        .css_classes(vec!["root_window".to_string()])
         .build();
 
     view! {
@@ -65,6 +75,7 @@ fn build_ui(application: &gtk4::Application) {
         icon_box = gtk4::Box {
             set_orientation: Orientation::Vertical,
             set_spacing: 0,
+            add_css_class: "icon_box",
         }
     }
 

applets/cosmic-applet-network/src/style.css

@@ -0,0 +1,28 @@
+image.panel_icon {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+button.panel_icon {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: transparent;
+    background: transparent;
+    outline-color: transparent;
+}
+
+button.panel_icon:hover {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: rgba(255, 255, 255, 0.1);
+    outline-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+window.root_window {
+	background: transparent;
+}

applets/cosmic-applet-power/data/com.system76.CosmicAppletPower.desktop

@@ -1,12 +1,12 @@
 [Desktop Entry]
-Name=Cosmic Dock App List
+Name=Cosmic Applet Power
 Comment=Write a GTK + Rust application
 Type=Application
-Exec=cosmic-dock-app-list
+Exec=cosmic-applet-power
 Terminal=false
 Categories=GNOME;GTK;
 Keywords=Gnome;GTK;
 # Translators: Do NOT translate or transliterate this text (this is an icon file name)!
-Icon=com.system76.CosmicDockAppList.svg
+Icon=com.system76.CosmicAppletPower.svg
 StartupNotify=true
 NoDisplay=true

applets/cosmic-applet-power/src/main.rs

@@ -23,12 +23,22 @@ fn main() {
 }
 
 fn build_ui(application: &gtk4::Application) {
+    let provider = gtk4::CssProvider::new();
+    provider.load_from_data(include_bytes!("style.css"));
+    gtk4::StyleContext::add_provider_for_display(
+        &gtk4::gdk::Display::default().expect("Could not connect to a display."),
+        &provider,
+        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
+    );
+
     let window = gtk4::ApplicationWindow::builder()
         .application(application)
         .title("COSMIC Power Applet")
-        .default_width(1)
-        .default_height(1)
         .decorated(false)
+        .resizable(false)
+        .width_request(1)
+        .height_request(1)
+        .css_classes(vec!["root_window".to_string()])
         .build();
 
     let config = CosmicPanelConfig::load_from_env().unwrap_or_default();
@@ -52,6 +62,7 @@ fn build_ui(application: &gtk4::Application) {
         icon_box = gtk4::Box {
             set_orientation: Orientation::Vertical,
             set_spacing: 0,
+            add_css_class: "icon_box",
         }
     }
     button.set_child(Some(&image));

applets/cosmic-applet-power/src/style.css

@@ -0,0 +1,35 @@
+image.panel_icon {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+button.panel_icon {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: transparent;
+    background: transparent;
+    outline-color: transparent;
+}
+
+button.panel_icon:hover {
+    border-radius: 12px;
+    transition: 100ms;
+    padding: 4px;
+    border-color: rgba(255, 255, 255, 0.1);
+    outline-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+window.root_window {
+	background: transparent;
+}
+
+box.icon_box {
+    padding: 0px;
+    border-color: transparent;
+    background: transparent;
+    outline-color: transparent;
+}