From a1ab52b3117d9281cfeb74410a8785ee3df388c7 Mon Sep 17 00:00:00 2001 From: Ashley Wulber Date: Thu, 30 Dec 2021 22:23:17 -0500 Subject: [PATCH] refactor ui layout --- examples/dock/dock_item/imp.rs | 4 ++-- examples/dock/dock_item/mod.rs | 25 +++++++++++++++---------- examples/dock/style.css | 20 +++++++++++++++++--- examples/dock/window/imp.rs | 2 +- examples/dock/window/mod.rs | 28 +++++++++------------------- 5 files changed, 44 insertions(+), 35 deletions(-) diff --git a/examples/dock/dock_item/imp.rs b/examples/dock/dock_item/imp.rs index 9104158c..ab347120 100644 --- a/examples/dock/dock_item/imp.rs +++ b/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 {} diff --git a/examples/dock/dock_item/mod.rs b/examples/dock/dock_item/mod.rs index c55dfc12..175978c0 100644 --- a/examples/dock/dock_item/mod.rs +++ b/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) - @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); diff --git a/examples/dock/style.css b/examples/dock/style.css index 0f112128..877834a0 100644 --- a/examples/dock/style.css +++ b/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; } diff --git a/examples/dock/window/imp.rs b/examples/dock/window/imp.rs index 1cc234ef..ae889d6b 100644 --- a/examples/dock/window/imp.rs +++ b/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; } diff --git a/examples/dock/window/mod.rs b/examples/dock/window/mod.rs index 6a0f2c59..ed4bb278 100644 --- a/examples/dock/window/mod.rs +++ b/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);