feat: redesign devices list

src/ui/devices_box.rs

@@ -3,6 +3,7 @@ use crate::{
     xr_devices::{XRDevice, XRDevices},
 };
 use gtk::prelude::*;
+use adw::prelude::*;
 use relm4::prelude::*;
 
 use super::alert::alert;
@@ -57,18 +58,12 @@ impl SimpleComponent for DevicesBox {
             set_margin_top: 12,
             #[track = "model.changed(Self::devices())"]
             set_visible: model.devices.is_some(),
-            gtk::Separator {
+            gtk::ListBox {
-                set_orientation: gtk::Orientation::Horizontal,
+                add_css_class: "boxed-list",
-                set_hexpand: true,
+                set_selection_mode: gtk::SelectionMode::None,
-            },
+                set_margin_all: 12,
-            // Head
+                // Head
-            gtk::Box {
+                adw::ActionRow {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                gtk::Image {
                     #[track = "model.changed(Self::devices())"]
                     set_icon_name: Some(match model.get_dev(XRDevice::Head) {
                         Some(_) => "emblem-ok-symbolic",
@@ -76,28 +71,15 @@ impl SimpleComponent for DevicesBox {
                     }),
                     #[track = "model.changed(Self::devices())"]
                     set_class_active: ("error", model.get_dev(XRDevice::Head).is_none()),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Head: {}", match model.get_dev(XRDevice::Head) {
+                    set_title: format!("Head: {}", match model.get_dev(XRDevice::Head) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
-                    #[track = "model.changed(Self::devices())"]
-                    set_class_active: ("error", model.get_dev(XRDevice::Head).is_none()),
                     // TODO: status icon with popover
                 },
-            },
+                // Left
-            // Left
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                gtk::Image {
                     #[track = "model.changed(Self::devices())"]
                     set_icon_name: Some(match model.get_dev(XRDevice::Left) {
                         Some(_) => "emblem-ok-symbolic",
@@ -105,28 +87,15 @@ impl SimpleComponent for DevicesBox {
                     }),
                     #[track = "model.changed(Self::devices())"]
                     set_class_active: ("error", model.get_dev(XRDevice::Left).is_none()),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Left: {}", match model.get_dev(XRDevice::Left) {
+                    set_title: format!("Left: {}", match model.get_dev(XRDevice::Left) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
-                    #[track = "model.changed(Self::devices())"]
-                    set_class_active: ("error", model.get_dev(XRDevice::Left).is_none()),
                     // TODO: status icon with popover
                 },
-            },
+                // Right
-            // Right
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                gtk::Image {
                     #[track = "model.changed(Self::devices())"]
                     set_icon_name: Some(match model.get_dev(XRDevice::Right) {
                         Some(_) => "emblem-ok-symbolic",
@@ -134,140 +103,79 @@ impl SimpleComponent for DevicesBox {
                     }),
                     #[track = "model.changed(Self::devices())"]
                     set_class_active: ("error", model.get_dev(XRDevice::Right).is_none()),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Right: {}", match model.get_dev(XRDevice::Right) {
+                    set_title: format!("Right: {}", match model.get_dev(XRDevice::Right) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
-                    #[track = "model.changed(Self::devices())"]
-                    set_class_active: ("error", model.get_dev(XRDevice::Right).is_none()),
                     // TODO: status icon with popover
                 },
-            },
+                // Gamepad
-            // Gamepad
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                #[track = "model.changed(Self::devices())"]
-                set_visible: model.get_dev(XRDevice::Gamepad).is_some(),
-                gtk::Image {
-                    set_icon_name: Some("emblem-ok-symbolic"),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Gamepad: {}", match model.get_dev(XRDevice::Gamepad) {
+                    set_visible: model.get_dev(XRDevice::Gamepad).is_some(),
+                    set_icon_name: Some("emblem-ok-symbolic"),
+                    #[track = "model.changed(Self::devices())"]
+                    set_title: format!("Gamepad: {}", match model.get_dev(XRDevice::Gamepad) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
                 },
-            },
+                // Eyes
-            // Eyes
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                #[track = "model.changed(Self::devices())"]
-                set_visible: model.get_dev(XRDevice::Eyes).is_some(),
-                gtk::Image {
-                    set_icon_name: Some("emblem-ok-symbolic"),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Eye Tracking: {}", match model.get_dev(XRDevice::Eyes) {
+                    set_visible: model.get_dev(XRDevice::Eyes).is_some(),
+                    set_icon_name: Some("emblem-ok-symbolic"),
+                    #[track = "model.changed(Self::devices())"]
+                    set_title: format!("Eye Tracking: {}", match model.get_dev(XRDevice::Eyes) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
                 },
-            },
+                // Hand Tracking Left
-            // Hand Tracking Left
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                #[track = "model.changed(Self::devices())"]
-                set_visible: model.get_dev(XRDevice::HandTrackingLeft).is_some(),
-                gtk::Image {
-                    set_icon_name: Some("emblem-ok-symbolic"),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Hand Tracking Left: {}", match model.get_dev(XRDevice::HandTrackingLeft) {
+                    set_visible: model.get_dev(XRDevice::HandTrackingLeft).is_some(),
+                    set_icon_name: Some("emblem-ok-symbolic"),
+                    #[track = "model.changed(Self::devices())"]
+                    set_title: format!("Hand Tracking Left: {}", match model.get_dev(XRDevice::HandTrackingLeft) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
                 },
-            },
+                // Hand Tracking Right
-            // Hand Tracking Right
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                #[track = "model.changed(Self::devices())"]
-                set_visible: model.get_dev(XRDevice::HandTrackingRight).is_some(),
-                gtk::Image {
-                    set_icon_name: Some("emblem-ok-symbolic"),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Hand Tracking Left: {}", match model.get_dev(XRDevice::HandTrackingRight) {
+                    set_visible: model.get_dev(XRDevice::HandTrackingRight).is_some(),
+                    set_icon_name: Some("emblem-ok-symbolic"),
+                    #[track = "model.changed(Self::devices())"]
+                    set_title: format!("Hand Tracking Left: {}", match model.get_dev(XRDevice::HandTrackingRight) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
                 },
-            },
+                // Generic Trackers
-            // Generic Trackers
+                adw::ActionRow {
-            gtk::Box {
-                set_orientation: gtk::Orientation::Horizontal,
-                set_hexpand: true,
-                set_spacing: 12,
-                set_margin_start: 12,
-                set_margin_end: 12,
-                #[track = "model.changed(Self::devices())"]
-                set_visible: model.get_dev(XRDevice::GenericTracker).is_some(),
-                gtk::Image {
-                    set_icon_name: Some("emblem-ok-symbolic"),
-                },
-                gtk::Label {
-                    set_xalign: 0.0,
-                    set_hexpand: true,
                     #[track = "model.changed(Self::devices())"]
-                    set_label: format!("Generic Trackers: {}", match model.get_dev(XRDevice::GenericTracker) {
+                    set_visible: model.get_dev(XRDevice::GenericTracker).is_some(),
+                    set_icon_name: Some("emblem-ok-symbolic"),
+                    #[track = "model.changed(Self::devices())"]
+                    set_title: format!("Generic Trackers: {}", match model.get_dev(XRDevice::GenericTracker) {
                         Some(v) => v.clone(),
                         None => "None".to_string(),
                     }).as_str(),
+                    add_suffix: save_trackers_btn = &gtk::Button {
+                        set_halign: gtk::Align::Center,
+                        set_valign: gtk::Align::Center,
+                        set_icon_name: "document-save-symbolic",
+                        set_tooltip_text: Some("Save current trackers"),
+                        set_css_classes: &["circular", "flat"],
+                        connect_clicked => move |_| {
+                            sender.input(Self::Input::DumpGenericTrackers);
+                        }
+                    },
                 },
-                gtk::Button {
+            }
-                    set_halign: gtk::Align::Start,
-                    set_hexpand: false,
-                    set_icon_name: "document-save-symbolic",
-                    set_tooltip_text: Some("Save current trackers"),
-                    set_css_classes: &["circular", "flat"],
-                    connect_clicked => move |_| {
-                        sender.input(Self::Input::DumpGenericTrackers);
-                    }
-                },
-            },
         }
     }