From de0c1921f71a2cbd26a653fa2bbf7e5f948a36fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vuka=C5=A1in=20Vojinovi=C4=87?= Date: Thu, 28 Nov 2024 15:24:15 +0100 Subject: [PATCH] fix(list_column): match padding/spacing to designs --- examples/cosmic/src/window.rs | 26 ++++++++++++------------ src/app/mod.rs | 36 ++++++++++++++++++---------------- src/widget/dialog.rs | 2 +- src/widget/flex_row/widget.rs | 2 +- src/widget/header_bar.rs | 2 +- src/widget/list/column.rs | 32 +++++++++++++++++++++--------- src/widget/list/mod.rs | 12 ------------ src/widget/menu/menu_tree.rs | 8 ++++---- src/widget/settings/item.rs | 14 +++---------- src/widget/settings/mod.rs | 5 +---- src/widget/settings/section.rs | 1 - 11 files changed, 65 insertions(+), 75 deletions(-) diff --git a/examples/cosmic/src/window.rs b/examples/cosmic/src/window.rs index da5356b6805..9fce8767fd0 100644 --- a/examples/cosmic/src/window.rs +++ b/examples/cosmic/src/window.rs @@ -17,7 +17,7 @@ use cosmic::{ prelude::*, theme::{self, Theme}, widget::{ - button, header_bar, icon, list, nav_bar, nav_bar_toggle, scrollable, segmented_button, + button, container, header_bar, icon, nav_bar, nav_bar_toggle, scrollable, segmented_button, settings, warning, }, Element, @@ -231,7 +231,7 @@ impl Window { } fn page_title(&self, page: Page) -> Element { - row!(text(page.title()).size(28), horizontal_space(Length::Fill),).into() + row!(text(page.title()).size(28), horizontal_space(),).into() } fn is_condensed(&self) -> bool { @@ -253,10 +253,7 @@ impl Window { .label(page.title()) .padding(0) .on_press(Message::from(page)), - row!( - text(sub_page.title()).size(28), - horizontal_space(Length::Fill), - ), + row!(text(sub_page.title()).size(28), horizontal_space(),), ) .spacing(10) .into() @@ -272,7 +269,7 @@ impl Window { sub_page: impl SubPage, ) -> Element { iced::widget::Button::new( - list::container( + container( settings::item_row(vec![ icon::from_name(sub_page.icon_name()).size(20).icon().into(), column!( @@ -281,12 +278,14 @@ impl Window { ) .spacing(2) .into(), - horizontal_space(iced::Length::Fill).into(), + horizontal_space().into(), icon::from_name("go-next-symbolic").size(20).icon().into(), ]) .spacing(16), ) - .padding([20, 24]), + .padding([20, 24]) + .class(theme::Container::List) + .width(Length::Fill), ) .width(Length::Fill) .padding(0) @@ -361,10 +360,7 @@ impl Application for Window { fn subscription(&self) -> Subscription { let window_break = listen_raw(|event, _| match event { - cosmic::iced::Event::Window( - _window_id, - window::Event::Resized { width, height: _ }, - ) => { + cosmic::iced::Event::Window(window::Event::Resized { width, height: _ }) => { let old_width = WINDOW_WIDTH.load(Ordering::Relaxed); if old_width == 0 || old_width < BREAK_POINT && width > BREAK_POINT @@ -584,7 +580,9 @@ impl Application for Window { header, container(column(vec![ warning, - iced::widget::vertical_space(Length::Fixed(12.0)).into(), + iced::widget::vertical_space() + .width(Length::Fixed(12.0)) + .into(), content, ])) .style(theme::Container::Background) diff --git a/src/app/mod.rs b/src/app/mod.rs index 3f77a78bb66..426f92f83c6 100644 --- a/src/app/mod.rs +++ b/src/app/mod.rs @@ -888,7 +888,7 @@ impl ApplicationExt for App { // Needed to avoid header bar corner gaps for apps without a content container header .apply(container) - .style(move |theme| container::Style { + .class(crate::theme::Container::custom(|theme| container::Style { background: Some(iced::Background::Color( theme.cosmic().background.base.into(), )), @@ -903,7 +903,7 @@ impl ApplicationExt for App { ..Default::default() }, ..Default::default() - }) + })) .apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header"))) } }) @@ -914,21 +914,23 @@ impl ApplicationExt for App { .push(content) .apply(container) .padding(if sharp_corners { 0 } else { 1 }) - .style(move |theme| container::Style { - background: if content_container { - Some(iced::Background::Color( - theme.cosmic().background.base.into(), - )) - } else { - None - }, - border: iced::Border { - color: theme.cosmic().bg_divider().into(), - width: if sharp_corners { 0.0 } else { 1.0 }, - radius: theme.cosmic().radius_s().into(), - }, - ..Default::default() - }); + .class(crate::theme::Container::custom(move |theme| { + container::Style { + background: if content_container { + Some(iced::Background::Color( + theme.cosmic().background.base.into(), + )) + } else { + None + }, + border: iced::Border { + color: theme.cosmic().bg_divider().into(), + width: if sharp_corners { 0.0 } else { 1.0 }, + radius: theme.cosmic().radius_s().into(), + }, + ..Default::default() + } + })); // Show any current dialog on top and centered over the view content // We have to use a popover even without a dialog to keep the tree from changing diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs index 0ee5dcb1c0b..0c7907e45a5 100644 --- a/src/widget/dialog.rs +++ b/src/widget/dialog.rs @@ -109,7 +109,7 @@ impl<'a, Message: Clone + 'static> From> for Element<'a, Mes if let Some(button) = dialog.tertiary_action { button_row = button_row.push(button); } - button_row = button_row.push(widget::horizontal_space().width(Length::Fill)); + button_row = button_row.push(widget::horizontal_space()); if let Some(button) = dialog.secondary_action { button_row = button_row.push(button); } diff --git a/src/widget/flex_row/widget.rs b/src/widget/flex_row/widget.rs index 40aee414885..49955217732 100644 --- a/src/widget/flex_row/widget.rs +++ b/src/widget/flex_row/widget.rs @@ -10,7 +10,7 @@ use iced_core::{ Widget, }; -/// Responsively generates rows and columns of widgets based on its dimmensions. +/// Responsively generates rows and columns of widgets based on its dimensions. #[derive(Setters)] #[must_use] pub struct FlexRow<'a, Message> { diff --git a/src/widget/header_bar.rs b/src/widget/header_bar.rs index 7108e65263b..fd0106032e9 100644 --- a/src/widget/header_bar.rs +++ b/src/widget/header_bar.rs @@ -329,7 +329,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> { .center_x(Length::Fill) .into() } else if self.title.is_empty() { - widget::horizontal_space().width(Length::Fill).into() + widget::horizontal_space().into() } else { self.title_widget() }) diff --git a/src/widget/list/column.rs b/src/widget/list/column.rs index eb3b7646d88..9a908fb7f09 100644 --- a/src/widget/list/column.rs +++ b/src/widget/list/column.rs @@ -4,7 +4,11 @@ use iced_core::Padding; use iced_widget::container::Catalog; -use crate::{theme, widget::divider, Apply, Element}; +use crate::{ + theme, + widget::{container, divider, vertical_space}, + Apply, Element, +}; pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> { ListColumn::default() @@ -14,16 +18,16 @@ pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> { pub struct ListColumn<'a, Message> { spacing: u16, padding: Padding, - style: crate::theme::Container<'a>, + style: theme::Container<'a>, children: Vec>, } impl<'a, Message: 'static> Default for ListColumn<'a, Message> { fn default() -> Self { Self { - spacing: theme::THEME.lock().unwrap().cosmic().spacing.space_xxs, + spacing: 0, padding: Padding::from(0), - style: crate::theme::Container::List, + style: theme::Container::List, children: Vec::with_capacity(4), } } @@ -36,15 +40,24 @@ impl<'a, Message: 'static> ListColumn<'a, Message> { #[allow(clippy::should_implement_trait)] pub fn add(mut self, item: impl Into>) -> Self { + let cosmic_theme::Spacing { + space_xxs, space_m, .. + } = theme::active().cosmic().spacing; + if !self.children.is_empty() { - self.children.push(divider::horizontal::light().into()); + self.children.push( + container(divider::horizontal::default()) + .padding([0, 16]) + .into(), + ); } // Ensure a minimum height of 32. let list_item = iced::widget::row![ - crate::widget::container(item).align_y(iced::Alignment::Center), - crate::widget::vertical_space().height(iced::Length::Fixed(32.)) + container(item).align_y(iced::Alignment::Center), + vertical_space().height(iced::Length::Fixed(32.)) ] + .padding([space_xxs, space_m]) .align_y(iced::Alignment::Center); self.children.push(list_item.into()); @@ -72,9 +85,10 @@ impl<'a, Message: 'static> ListColumn<'a, Message> { crate::widget::column::with_children(self.children) .spacing(self.spacing) .padding(self.padding) - .apply(super::container) - .padding([self.spacing, 8]) + .apply(container) + .padding([self.spacing, 0]) .class(self.style) + .width(iced::Length::Fill) .into() } } diff --git a/src/widget/list/mod.rs b/src/widget/list/mod.rs index 9b844e2e644..7ec5d107d10 100644 --- a/src/widget/list/mod.rs +++ b/src/widget/list/mod.rs @@ -4,15 +4,3 @@ pub mod column; pub use self::column::{list_column, ListColumn}; - -use crate::widget::Container; -use crate::Element; - -pub fn container<'a, Message>( - content: impl Into>, -) -> Container<'a, Message, crate::Theme, crate::Renderer> { - super::container(content) - .padding([16, 6]) - .class(crate::theme::Container::List) - .width(iced::Length::Fill) -} diff --git a/src/widget/menu/menu_tree.rs b/src/widget/menu/menu_tree.rs index 85ef8f5e33d..01ca3076699 100644 --- a/src/widget/menu/menu_tree.rs +++ b/src/widget/menu/menu_tree.rs @@ -248,7 +248,7 @@ where let key = find_key(&action, key_binds); let mut items = vec![ widget::text(label).into(), - widget::horizontal_space().width(Length::Fill).into(), + widget::horizontal_space().into(), widget::text(key).into(), ]; @@ -266,7 +266,7 @@ where let mut items = vec![ widget::text(label).into(), - widget::horizontal_space().width(Length::Fill).into(), + widget::horizontal_space().into(), widget::text(key).into(), ]; @@ -298,7 +298,7 @@ where }, widget::Space::with_width(spacing.space_xxs).into(), widget::text(label).align_x(iced::Alignment::Start).into(), - widget::horizontal_space().width(Length::Fill).into(), + widget::horizontal_space().into(), widget::text(key).into(), ]; @@ -313,7 +313,7 @@ where trees.push(MenuTree::::with_children( menu_button(vec![ widget::text(label).into(), - widget::horizontal_space().width(Length::Fill).into(), + widget::horizontal_space().into(), widget::icon::from_name("pan-end-symbolic") .size(16) .icon() diff --git a/src/widget/settings/item.rs b/src/widget/settings/item.rs index 8c978f7b87e..36cc555ffde 100644 --- a/src/widget/settings/item.rs +++ b/src/widget/settings/item.rs @@ -21,7 +21,7 @@ pub fn item<'a, Message: 'static>( ) -> Row<'a, Message> { item_row(vec![ text(title).wrapping(Wrapping::Word).into(), - horizontal_space().width(iced::Length::Fill).into(), + horizontal_space().into(), widget.into(), ]) } @@ -30,13 +30,9 @@ pub fn item<'a, Message: 'static>( #[must_use] #[allow(clippy::module_name_repetitions)] pub fn item_row(children: Vec>) -> Row { - let cosmic_theme::Spacing { - space_s, space_xs, .. - } = theme::THEME.lock().unwrap().cosmic().spacing; row::with_children(children) - .spacing(space_xs) + .spacing(theme::active().cosmic().space_xs()) .align_y(iced::Alignment::Center) - .padding([0, space_s]) } /// A settings item aligned in a flex row @@ -57,12 +53,8 @@ pub fn flex_item<'a, Message: 'static>( /// A settings item aligned in a flex row #[allow(clippy::module_name_repetitions)] pub fn flex_item_row(children: Vec>) -> FlexRow { - let cosmic_theme::Spacing { - space_s, space_xs, .. - } = theme::THEME.lock().unwrap().cosmic().spacing; flex_row(children) - .padding([0, space_s]) - .spacing(space_xs) + .spacing(theme::active().cosmic().space_xs()) .min_item_width(200.0) .justify_items(iced::Alignment::Center) .justify_content(AlignContent::SpaceBetween) diff --git a/src/widget/settings/mod.rs b/src/widget/settings/mod.rs index 9e2eccf950a..805e58c872a 100644 --- a/src/widget/settings/mod.rs +++ b/src/widget/settings/mod.rs @@ -13,8 +13,5 @@ use crate::{theme, Element}; /// A column with a predefined style for creating a settings panel #[must_use] pub fn view_column(children: Vec>) -> Column { - let space_m = theme::THEME.lock().unwrap().cosmic().spacing.space_m; - column::with_children(children) - .spacing(space_m) - .padding([0, space_m]) + column::with_children(children).spacing(theme::active().cosmic().space_m()) } diff --git a/src/widget/settings/section.rs b/src/widget/settings/section.rs index d42c2318a00..e32251efffb 100644 --- a/src/widget/settings/section.rs +++ b/src/widget/settings/section.rs @@ -1,7 +1,6 @@ // Copyright 2022 System76 // SPDX-License-Identifier: MPL-2.0 -use crate::ext::CollectionWidget; use crate::widget::{column, text, ListColumn}; use crate::Element; use std::borrow::Cow;