refactor: use icon button and popup

applets/cosmic-applet-network/Cargo.toml

@@ -15,3 +15,4 @@ slotmap = "1.0.6"
 tokio = { version = "1.15.0", features = ["full"] }
 zbus = "2.0.1"
 libcosmic-widgets = { git = "https://github.com/pop-os/libcosmic", branch = "lucy/widgets" }
+cosmic-panel-config = {git = "https://github.com/pop-os/cosmic-panel", features = ["gtk4"]}

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

@@ -7,9 +7,10 @@ pub mod task;
 pub mod ui;
 pub mod widgets;
 
-use gtk4::{gio::ApplicationFlags, prelude::*, Orientation, Separator};
+use gtk4::{glib, gio::ApplicationFlags, prelude::*, Orientation, Separator};
 use once_cell::sync::Lazy;
 use tokio::runtime::Runtime;
+use cosmic_panel_config::config::CosmicPanelConfig;
 
 static RT: Lazy<Runtime> = Lazy::new(|| Runtime::new().expect("failed to build tokio runtime"));
 
@@ -26,8 +27,9 @@ fn build_ui(application: &gtk4::Application) {
     let window = gtk4::ApplicationWindow::builder()
         .application(application)
         .title("COSMIC Network Applet")
-        .default_width(400)
+        .default_width(1)
-        .default_height(300)
+        .default_height(1)
+        .decorated(false)
         .build();
 
     view! {
@@ -40,14 +42,44 @@ fn build_ui(application: &gtk4::Application) {
             set_margin_end: 24
         }
     }
-    ui::current_networks::add_current_networks(&main_box);
+
+    let config = CosmicPanelConfig::load_from_env().unwrap_or_default();
+    let popover = gtk4::builders::PopoverBuilder::new()
+        .autohide(true)
+        .has_arrow(false)
+        .build();
+
+    let button = gtk4::Button::new();
+    button.add_css_class("panel_icon");
+    button.connect_clicked(glib::clone!(@weak popover => move |_| {
+        popover.show();
+    }));
+
+    // TODO cleanup
+    let image = gtk4::Image::from_icon_name("preferences-system-network");
+    image.add_css_class("panel_icon");
+    image.set_pixel_size(config.get_applet_icon_size().try_into().unwrap());
+    button.set_child(Some(&image));
+
+    view! {
+        icon_box = gtk4::Box {
+            set_orientation: Orientation::Vertical,
+            set_spacing: 0,
+        }
+    }
+
+    popover.set_child(Some(&main_box));
+
+    icon_box.append(&button);
+    icon_box.append(&popover);
+
+    ui::current_networks::add_current_networks(&main_box, &image);
     main_box.append(&Separator::new(Orientation::Horizontal));
     ui::toggles::add_toggles(&main_box);
     let available_wifi_separator = Separator::new(Orientation::Horizontal);
     main_box.append(&available_wifi_separator);
     available_wifi_separator.hide();
     ui::available_wifi::add_available_wifi(&main_box, available_wifi_separator);
-    window.set_child(Some(&main_box));
+    window.set_child(Some(&icon_box));
-
     window.show();
 }

applets/cosmic-applet-network/src/ui/current_networks.rs

@@ -18,16 +18,16 @@ use gtk4::{
 use std::{cell::RefCell, net::IpAddr, rc::Rc};
 use zbus::Connection;
 
-pub fn add_current_networks(target: &gtk4::Box) {
+pub fn add_current_networks(target: &gtk4::Box, icon_image: &gtk4::Image) {
     let networks_list = ListBox::builder().show_separators(true).build();
     let entries = Rc::<RefCell<Vec<ListBoxRow>>>::default();
     let (tx, rx) = MainContext::channel::<Vec<ActiveConnectionInfo>>(PRIORITY_DEFAULT);
     crate::task::spawn(handle_devices(tx));
     rx.attach(
         None,
-        clone!(@weak networks_list, @strong entries => @default-return Continue(true), move |connections| {
+        clone!(@weak networks_list, @weak icon_image, @strong entries => @default-return Continue(true), move |connections| {
             let mut entries = entries.borrow_mut();
-            display_active_connections(connections, &networks_list, &mut *entries);
+            display_active_connections(connections, &networks_list, &mut *entries, &icon_image);
             Continue(true)
         }),
     );
@@ -38,6 +38,7 @@ fn display_active_connections(
     connections: Vec<ActiveConnectionInfo>,
     target: &ListBox,
     entries: &mut Vec<ListBoxRow>,
+    icon_image: &gtk4::Image,
 ) {
     for old_entry in entries.drain(..) {
         target.remove(&old_entry);
@@ -49,7 +50,10 @@ fn display_active_connections(
                 hw_address,
                 speed,
                 ip_addresses,
-            } => render_wired_connection(name, speed, ip_addresses),
+            } => {
+                icon_image.set_icon_name(Some("network-wired-symbolic"));
+                render_wired_connection(name, speed, ip_addresses)
+            },
             ActiveConnectionInfo::WiFi {
                 name,
                 hw_address,
@@ -57,7 +61,10 @@ fn display_active_connections(
                 rsn_flags,
                 wpa_flags,
             } => continue,
-            ActiveConnectionInfo::Vpn { name, ip_addresses } => render_vpn(name, ip_addresses),
+            ActiveConnectionInfo::Vpn { name, ip_addresses } => {
+                icon_image.set_icon_name(Some("network-vpn-symbolic"));
+                render_vpn(name, ip_addresses)
+            },
         };
         let entry = ListBoxRow::builder().child(&entry).build();
         target.append(&entry);