feat(list_column): button list items

This commit is contained in:
Vukašin Vojinović 2026-04-04 16:34:25 +02:00 committed by Michael Murphy
parent 9cac422c24
commit 9b465a8b5c
6 changed files with 298 additions and 163 deletions

View file

@ -27,7 +27,7 @@ pub enum Button {
IconVertical,
Image,
Link,
ListItem,
ListItem([f32; 4]),
MenuFolder,
MenuItem,
MenuRoot,
@ -148,8 +148,8 @@ pub fn appearance(
appearance.text_color = Some(component.on.into());
corner_radii = &cosmic.corner_radii.radius_s;
}
Button::ListItem => {
corner_radii = &[0.0; 4];
Button::ListItem(radii) => {
corner_radii = radii;
let (background, text, icon) = color(&cosmic.background.component);
if selected {
@ -197,7 +197,7 @@ impl Catalog for crate::Theme {
return active(focused, self);
}
appearance(self, focused, selected, false, style, move |component| {
let mut s = appearance(self, focused, selected, false, style, move |component| {
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
@ -209,7 +209,15 @@ impl Catalog for crate::Theme {
};
(component.base.into(), text_color, text_color)
})
});
if let Button::ListItem(_) = style {
if !selected {
s.background = None;
}
}
s
}
fn disabled(&self, style: &Self::Class) -> Style {
@ -237,7 +245,7 @@ impl Catalog for crate::Theme {
return hovered(focused, self);
}
appearance(
let mut s = appearance(
self,
focused || matches!(style, Button::Image),
selected,
@ -256,7 +264,15 @@ impl Catalog for crate::Theme {
(component.hover.into(), text_color, text_color)
},
)
);
if let Button::ListItem(_) = style {
if !selected {
s.background = None;
}
}
s
}
fn pressed(&self, focused: bool, selected: bool, style: &Self::Class) -> Style {

View file

@ -1,128 +0,0 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use iced_core::Padding;
use iced_widget::container::Catalog;
use crate::{
Apply, Element, theme,
widget::{container, divider, space::vertical},
};
#[inline]
pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> {
ListColumn::default()
}
#[must_use]
pub struct ListColumn<'a, Message> {
spacing: u16,
padding: Padding,
list_item_padding: Padding,
divider_padding: u16,
style: theme::Container<'a>,
children: Vec<Element<'a, Message>>,
}
impl<Message: 'static> Default for ListColumn<'_, Message> {
fn default() -> Self {
let cosmic_theme::Spacing {
space_xxs, space_m, ..
} = theme::spacing();
Self {
spacing: 0,
padding: Padding::from(0),
divider_padding: 16,
list_item_padding: [space_xxs, space_m].into(),
style: theme::Container::List,
children: Vec::with_capacity(4),
}
}
}
impl<'a, Message: 'static> ListColumn<'a, Message> {
#[inline]
pub fn new() -> Self {
Self::default()
}
#[allow(clippy::should_implement_trait)]
pub fn add(self, item: impl Into<Element<'a, Message>>) -> Self {
#[inline(never)]
fn inner<'a, Message: 'static>(
mut this: ListColumn<'a, Message>,
item: Element<'a, Message>,
) -> ListColumn<'a, Message> {
if !this.children.is_empty() {
this.children.push(
container(divider::horizontal::default())
.padding([0, this.divider_padding])
.into(),
);
}
// Ensure a minimum height of 32.
let list_item = crate::widget::row![
container(item).align_y(iced::Alignment::Center),
vertical().height(iced::Length::Fixed(32.))
]
.padding(this.list_item_padding)
.align_y(iced::Alignment::Center);
this.children.push(list_item.into());
this
}
inner(self, item.into())
}
#[inline]
pub fn spacing(mut self, spacing: u16) -> Self {
self.spacing = spacing;
self
}
/// Sets the style variant of this [`Circular`].
#[inline]
pub fn style(mut self, style: <crate::Theme as Catalog>::Class<'a>) -> Self {
self.style = style;
self
}
#[inline]
pub fn padding(mut self, padding: impl Into<Padding>) -> Self {
self.padding = padding.into();
self
}
#[inline]
pub fn divider_padding(mut self, padding: u16) -> Self {
self.divider_padding = padding;
self
}
pub fn list_item_padding(mut self, padding: impl Into<Padding>) -> Self {
self.list_item_padding = padding.into();
self
}
#[must_use]
pub fn into_element(self) -> Element<'a, Message> {
crate::widget::column::with_children(self.children)
.spacing(self.spacing)
.padding(self.padding)
.width(iced::Length::Fill)
.apply(container)
.padding([self.spacing, 0])
.class(self.style)
.width(iced::Length::Fill)
.into()
}
}
impl<'a, Message: 'static> From<ListColumn<'a, Message>> for Element<'a, Message> {
fn from(column: ListColumn<'a, Message>) -> Self {
column.into_element()
}
}

View file

@ -0,0 +1,188 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use crate::widget::container::Catalog;
use crate::widget::{button, column, container, divider, row, space::vertical};
use crate::{Apply, Element, theme};
use iced::{Length, Padding};
/// A button list item for use in a [`ListColumn`].
pub struct ListButton<'a, Message> {
content: Element<'a, Message>,
on_press: Option<Message>,
selected: bool,
}
/// Creates a [`ListButton`] with the given content.
pub fn button<'a, Message>(content: impl Into<Element<'a, Message>>) -> ListButton<'a, Message> {
ListButton {
content: content.into(),
on_press: None,
selected: false,
}
}
impl<'a, Message: 'static> ListButton<'a, Message> {
pub fn on_press(mut self, on_press: Message) -> Self {
self.on_press = Some(on_press);
self
}
pub fn on_press_maybe(mut self, on_press: Option<Message>) -> Self {
self.on_press = on_press;
self
}
pub fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
self
}
}
pub enum ListItem<'a, Message> {
Element(Element<'a, Message>),
Button(ListButton<'a, Message>),
}
/// A trait for types that can be added to a [`ListColumn`].
pub trait IntoListItem<'a, Message> {
fn into_list_item(self) -> ListItem<'a, Message>;
}
impl<'a, Message, T> IntoListItem<'a, Message> for T
where
T: Into<Element<'a, Message>>,
{
fn into_list_item(self) -> ListItem<'a, Message> {
ListItem::Element(self.into())
}
}
impl<'a, Message> IntoListItem<'a, Message> for ListButton<'a, Message> {
fn into_list_item(self) -> ListItem<'a, Message> {
ListItem::Button(self)
}
}
#[must_use]
pub struct ListColumn<'a, Message> {
list_item_padding: Padding,
style: theme::Container<'a>,
children: Vec<ListItem<'a, Message>>,
}
#[inline]
pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> {
ListColumn::default()
}
pub fn with_capacity<'a, Message: 'static>(capacity: usize) -> ListColumn<'a, Message> {
let cosmic_theme::Spacing {
space_xxs, space_m, ..
} = theme::spacing();
ListColumn {
list_item_padding: [space_xxs, space_m].into(),
style: theme::Container::List,
children: Vec::with_capacity(capacity),
}
}
impl<Message: 'static> Default for ListColumn<'_, Message> {
fn default() -> Self {
with_capacity(4)
}
}
impl<'a, Message: Clone + 'static> ListColumn<'a, Message> {
#[inline]
pub fn new() -> Self {
Self::default()
}
/// Adds an element to the list column.
#[allow(clippy::should_implement_trait)]
pub fn add(mut self, item: impl IntoListItem<'a, Message>) -> Self {
self.children.push(item.into_list_item());
self
}
/// Sets the style variant of this [`ListColumn`].
#[inline]
pub fn style(mut self, style: <crate::Theme as Catalog>::Class<'a>) -> Self {
self.style = style;
self
}
pub fn list_item_padding(mut self, padding: impl Into<Padding>) -> Self {
self.list_item_padding = padding.into();
self
}
#[must_use]
pub fn into_element(self) -> Element<'a, Message> {
let padding = self.list_item_padding;
let count = self.children.len();
let last_index = count.saturating_sub(1);
let radius_s = theme::active().cosmic().radius_s();
// Ensure minimum height of 32
let content_row = |content| {
row![container(content), vertical().height(32)].align_y(iced::Alignment::Center)
};
self.children
.into_iter()
.enumerate()
.fold(
column::with_capacity((2 * count).saturating_sub(1)),
|mut col, (i, item)| {
if i > 0 {
col = col.push(divider::horizontal::default());
}
match item {
ListItem::Element(content) => {
col.push(content_row(content).padding(padding).width(Length::Fill))
}
ListItem::Button(ListButton {
content,
on_press,
selected,
}) => col.push(
content_row(content)
.apply(button::custom)
.padding(padding)
.width(Length::Fill)
.on_press_maybe(on_press)
.selected(selected)
.class(theme::Button::ListItem(get_radius(
radius_s,
i == 0,
i == last_index,
))),
),
}
},
)
.width(Length::Fill)
.apply(container)
.class(self.style)
.into()
}
}
impl<'a, Message: Clone + 'static> From<ListColumn<'a, Message>> for Element<'a, Message> {
fn from(column: ListColumn<'a, Message>) -> Self {
column.into_element()
}
}
fn get_radius(radius: [f32; 4], first: bool, last: bool) -> [f32; 4] {
match (first, last) {
(true, true) => radius,
(true, false) => [radius[0], radius[1], 0.0, 0.0],
(false, true) => [0.0, 0.0, radius[2], radius[3]],
(false, false) => [0.0, 0.0, 0.0, 0.0],
}
}

View file

@ -1,6 +1,6 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
pub mod column;
pub mod list_column;
pub use self::column::{ListColumn, list_column};
pub use self::list_column::{ListButton, ListColumn, button, list_column};

View file

@ -5,7 +5,7 @@ use std::borrow::Cow;
use crate::{
Element, Theme, theme,
widget::{FlexRow, Row, column, container, flex_row, row, text},
widget::{FlexRow, Row, column, container, flex_row, list, row, text},
};
use derive_setters::Setters;
use iced_core::{Length, text::Wrapping};
@ -114,39 +114,95 @@ impl<'a, Message: 'static> Item<'a, Message> {
flex_item_row(self.control_(widget.into()))
}
#[inline(never)]
fn control_(self, widget: Element<'a, Message>) -> Vec<Element<'a, Message>> {
let mut contents = Vec::with_capacity(4);
if let Some(icon) = self.icon {
contents.push(icon);
}
fn label(self) -> Element<'a, Message> {
if let Some(description) = self.description {
let column = column::with_capacity(2)
column::with_capacity(2)
.spacing(2)
.push(text::body(self.title).wrapping(Wrapping::Word))
.push(text::caption(description).wrapping(Wrapping::Word))
.width(Length::Fill);
contents.push(column.into());
.width(Length::Fill)
.into()
} else {
contents.push(text(self.title).width(Length::Fill).into());
text(self.title).width(Length::Fill).into()
}
}
#[inline(never)]
fn control_(mut self, widget: Element<'a, Message>) -> Vec<Element<'a, Message>> {
let mut contents = Vec::with_capacity(3);
if let Some(icon) = self.icon.take() {
contents.push(icon);
}
contents.push(self.label());
contents.push(widget);
contents
}
fn control_start(self, widget: impl Into<Element<'a, Message>>) -> Row<'a, Message, Theme> {
item_row(vec![widget.into(), self.label()])
}
pub fn toggler(
self,
is_checked: bool,
message: impl Fn(bool) -> Message + 'static,
) -> Row<'a, Message, Theme> {
self.control(
crate::widget::toggler(is_checked)
.width(Length::Shrink)
.on_toggle(message),
) -> list::ListButton<'a, Message> {
let on_press = message(!is_checked);
list::button(
self.control(
crate::widget::toggler(is_checked)
.width(Length::Shrink)
.on_toggle(message),
),
)
.on_press(on_press)
}
pub fn toggler_maybe(
self,
is_checked: bool,
message: Option<impl Fn(bool) -> Message + 'static>,
) -> list::ListButton<'a, Message> {
let on_press = message.as_ref().map(|f| f(!is_checked));
list::button(
self.control(
crate::widget::toggler(is_checked)
.width(Length::Shrink)
.on_toggle_maybe(message),
),
)
.on_press_maybe(on_press)
}
pub fn checkbox(
self,
is_checked: bool,
message: impl Fn(bool) -> Message + 'static,
) -> list::ListButton<'a, Message> {
let on_press = message(!is_checked);
list::button(
self.control_start(
crate::widget::checkbox(is_checked)
.width(Length::Shrink)
.on_toggle(message),
),
)
.on_press(on_press)
}
pub fn checkbox_maybe(
self,
is_checked: bool,
message: Option<impl Fn(bool) -> Message + 'static>,
) -> list::ListButton<'a, Message> {
let on_press = message.as_ref().map(|f| f(!is_checked));
list::button(
self.control_start(
crate::widget::checkbox(is_checked)
.width(Length::Shrink)
.on_toggle_maybe(message),
),
)
.on_press_maybe(on_press)
}
}

View file

@ -2,16 +2,19 @@
// SPDX-License-Identifier: MPL-2.0
use crate::Element;
use crate::widget::list_column::IntoListItem;
use crate::widget::{ListColumn, column, text};
use std::borrow::Cow;
/// A section within a settings view column.
pub fn section<'a, Message: 'static>() -> Section<'a, Message> {
pub fn section<'a, Message: Clone + 'static>() -> Section<'a, Message> {
with_column(ListColumn::default())
}
/// A section with a pre-defined list column.
pub fn with_column<Message: 'static>(children: ListColumn<'_, Message>) -> Section<'_, Message> {
pub fn with_column<Message: Clone + 'static>(
children: ListColumn<'_, Message>,
) -> Section<'_, Message> {
Section {
header: None,
children,
@ -24,9 +27,9 @@ pub struct Section<'a, Message> {
children: ListColumn<'a, Message>,
}
impl<'a, Message: 'static> Section<'a, Message> {
impl<'a, Message: Clone + 'static> Section<'a, Message> {
/// Define an optional title for the section.
pub fn title(mut self, title: impl Into<Cow<'a, str>>) -> Self {
pub fn title(self, title: impl Into<Cow<'a, str>>) -> Self {
self.header(text::heading(title.into()))
}
@ -38,8 +41,8 @@ impl<'a, Message: 'static> Section<'a, Message> {
/// Add a child element to the section's list column.
#[allow(clippy::should_implement_trait)]
pub fn add(mut self, item: impl Into<Element<'a, Message>>) -> Self {
self.children = self.children.add(item.into());
pub fn add(mut self, item: impl IntoListItem<'a, Message>) -> Self {
self.children = self.children.add(item);
self
}
@ -61,7 +64,7 @@ impl<'a, Message: 'static> Section<'a, Message> {
}
}
impl<'a, Message: 'static> From<Section<'a, Message>> for Element<'a, Message> {
impl<'a, Message: Clone + 'static> From<Section<'a, Message>> for Element<'a, Message> {
fn from(data: Section<'a, Message>) -> Self {
column::with_capacity(2)
.spacing(8)