leyoda/libcosmic-yoda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(list_column): match padding/spacing to designs

Browse source
This commit is contained in:
Vukašin Vojinović 2024-11-28 15:24:15 +01:00 • committed by Michael Murphy
parent a6c08d68f9
commit de0c1921f7
11 changed files with 65 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

26
examples/cosmic/src/window.rs
View file

@ -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<Message: 'static>(&self, page: Page) -> Element<Message> {
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<Message> {
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<Message> {
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)

36
src/app/mod.rs
View file

@ -888,7 +888,7 @@ impl<App: Application> 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<App: Application> ApplicationExt for App {
..Default::default()
},
..Default::default()
})
}))
.apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header")))
}
})
@ -914,21 +914,23 @@ impl<App: Application> 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

2
src/widget/dialog.rs
View file

@ -109,7 +109,7 @@ impl<'a, Message: Clone + 'static> From<Dialog<'a, Message>> 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);
}

2
src/widget/flex_row/widget.rs
View file

@ -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> {

2
src/widget/header_bar.rs
View file

@ -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()
})

32
src/widget/list/column.rs
View file

@ -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<Element<'a, Message>>,
}
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<Element<'a, Message>>) -> 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()
}
}

12
src/widget/list/mod.rs
View file

@ -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<Element<'a, Message>>,
) -> Container<'a, Message, crate::Theme, crate::Renderer> {
super::container(content)
.padding([16, 6])
.class(crate::theme::Container::List)
.width(iced::Length::Fill)
}

8
src/widget/menu/menu_tree.rs
View file

@ -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::<Message, Renderer>::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()

14
src/widget/settings/item.rs
View file

@ -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<Message>(children: Vec<Element<Message>>) -> Row<Message> {
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<Message>(children: Vec<Element<Message>>) -> FlexRow<Message> {
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)

5
src/widget/settings/mod.rs
View file

@ -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<Message: 'static>(children: Vec<Element<Message>>) -> Column<Message> {
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())
}

1
src/widget/settings/section.rs
View file

@ -1,7 +1,6 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use crate::ext::CollectionWidget;
use crate::widget::{column, text, ListColumn};
use crate::Element;
use std::borrow::Cow;