refactor ui layout

examples/dock/dock_item/imp.rs

@@ -13,11 +13,11 @@ pub struct DockItem {
 impl ObjectSubclass for DockItem {
     const NAME: &'static str = "DockItem";
     type Type = super::DockItem;
-    type ParentType = gtk4::Box;
+    type ParentType = gtk4::Button;
 }
 
 impl ObjectImpl for DockItem {}
 
 impl WidgetImpl for DockItem {}
 
-impl BoxImpl for DockItem {}
+impl ButtonImpl for DockItem {}

examples/dock/dock_item/mod.rs

@@ -5,8 +5,11 @@ use gtk4::glib;
 use gtk4::prelude::*;
 use gtk4::subclass::prelude::*;
 use gtk4::Align;
+use gtk4::AspectFrame;
+use gtk4::Box;
 use gtk4::Image;
 use gtk4::Label;
+use gtk4::Orientation;
 
 use crate::dock_object::DockObject;
 use crate::utils::BoxedWindowList;
@@ -15,9 +18,8 @@ mod imp;
 
 glib::wrapper! {
     pub struct DockItem(ObjectSubclass<imp::DockItem>)
-        @extends gtk4::Widget, gtk4::Box,
-        @implements gtk4::Accessible, gtk4::Buildable, gtk4::ConstraintTarget, gtk4::Orientable;
-
+        @extends gtk4::Button, gtk4::Widget,
+        @implements gtk4::Accessible, gtk4::Actionable, gtk4::Buildable, gtk4::ConstraintTarget;
 }
 
 impl Default for DockItem {
@@ -29,21 +31,24 @@ impl Default for DockItem {
 impl DockItem {
     pub fn new() -> Self {
         let self_: DockItem = glib::Object::new(&[]).expect("Failed to create DockItem");
-        self_.set_orientation(gtk4::Orientation::Vertical);
+
+        let item_box = Box::new(Orientation::Vertical, 0);
+        self_.set_child(Some(&item_box));
+
         let image = cascade! {
             Image::new();
-            ..set_margin_start(4);
-            ..set_margin_end(4);
-            ..set_margin_top(4);
-            ..set_pixel_size(48);
+            ..set_hexpand(true);
+            ..set_halign(Align::Center);
+            ..set_pixel_size(64);
         };
         let dots = cascade! {
             Label::new(Some(""));
             ..set_hexpand(true);
             ..set_halign(Align::Center);
         };
-        self_.append(&image);
-        self_.append(&dots);
+        item_box.append(&image);
+        item_box.append(&dots);
+
         let imp = imp::DockItem::from_instance(&self_);
         imp.image.replace(image);
         imp.dots.replace(dots);

examples/dock/style.css

@@ -1,12 +1,26 @@
-row:hover {
+listview row:hover {
     transition: 100ms;
     background: #888888;
     border-radius: 12px;
+    padding: 0px;
 }
 
-row {
+listview row {
     background: #333333;
     border-radius: 12px;
+    padding: 0px;
+}
+
+button:hover {
+    background: #888888;
+    border-radius: 12px;
+    border-width: 0px;
+}
+
+button {
+    background: #333333;
+    border-radius: 12px;
+    border-width: 0px;
 }
 
 listview {
@@ -18,7 +32,7 @@ window {
     background: rgba(50, 50, 50, 0.0);
 }
 
-box#dock-container {
+box.dock {
     border-radius: 12px;
     background: #333333;
 }

examples/dock/window/imp.rs

@@ -38,7 +38,7 @@ pub struct Window {
 #[glib::object_subclass]
 impl ObjectSubclass for Window {
     // `NAME` needs to match `class` attribute of template
-    const NAME: &'static str = "LauncherWindow";
+    const NAME: &'static str = "DockWindow";
     type Type = super::Window;
     type ParentType = gtk4::ApplicationWindow;
 }

examples/dock/window/mod.rs

@@ -19,6 +19,7 @@ use glib::Type;
 use gtk4::prelude::ListModelExt;
 use gtk4::prelude::*;
 use gtk4::subclass::prelude::*;
+use gtk4::Align;
 use gtk4::Box;
 use gtk4::DropTarget;
 use gtk4::EventControllerMotion;
@@ -58,7 +59,7 @@ impl Window {
         let imp = imp::Window::from_instance(&self_);
         cascade! {
             &self_;
-            ..set_height_request(80);
+            ..set_height_request(100);
             ..set_width_request(128);
             ..set_title(Some("Cosmic Dock"));
             ..set_decorated(false);
@@ -77,43 +78,32 @@ impl Window {
         let revealer = cascade! {
             Revealer::new();
             ..set_reveal_child(true);
+            ..set_valign(Align::Baseline);
             ..set_transition_duration(300);
             ..set_transition_type(RevealerTransitionType::SlideUp);
         };
         cursor_handle.append(&revealer);
 
-        let dock_container = cascade! {
-            Box::new(Orientation::Vertical, 0);
-            ..set_height_request(0);
-        };
-        revealer.set_child(Some(&dock_container));
-
         let dock = cascade! {
             Box::new(Orientation::Horizontal, 4);
-            ..set_height_request(64);
             ..set_margin_start(4);
             ..set_margin_end(4);
+            ..set_margin_bottom(4);
         };
-        dock_container.append(&dock);
-
-        let dock_bottom_gap = cascade! {
-            Box::new(Orientation::Horizontal, 0);
-            ..set_height_request(4);
-        };
-        dock_container.append(&dock_bottom_gap);
+        dock.add_css_class("dock");
+        revealer.set_child(Some(&dock));
 
         let saved_app_list_view = cascade! {
             ListView::builder().build();
             ..set_orientation(Orientation::Horizontal);
+            ..set_width_request(64);
         };
         dock.append(&saved_app_list_view);
 
         let separator = cascade! {
             Separator::new(Orientation::Vertical);
-            ..set_margin_top(4);
-            ..set_margin_start(4);
-            ..set_margin_bottom(4);
-            ..set_margin_end(4);
+            ..set_margin_start(8);
+            ..set_margin_end(8);
         };
         dock.append(&separator);