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

Aesthetic improvements for icon theme previews

Browse source 
* Padded buttons
* Use correct text style for "Icon theme"
* Truncate long theme names
This commit is contained in:
Josh Megnauth 2024-04-19 02:40:10 -04:00
parent d4b422228d
commit 78d597c56f
No known key found for this signature in database
GPG key ID: 70813183462EFAD3
1 changed files with 60 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

117
cosmic-settings/src/pages/desktop/appearance.rs
View file

@ -18,8 +18,8 @@ use cosmic::iced_widget::scrollable;
use cosmic::prelude::CollectionWidget; use cosmic::prelude::CollectionWidget;
use cosmic::widget::icon::{self, from_name, icon}; use cosmic::widget::icon::{self, from_name, icon};
use cosmic::widget::{ use cosmic::widget::{
button, color_picker::ColorPickerUpdate, column, container, flex_row, horizontal_space, row, button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, row, settings,
settings, spin_button, text, ColorPickerModel, spin_button, text, ColorPickerModel,
}; };
use cosmic::Apply; use cosmic::Apply;
use cosmic::{command, Command, Element}; use cosmic::{command, Command, Element};
@ -460,8 +460,8 @@ impl Page {
// Icon theme previews // Icon theme previews
// cosmic::iced::widget::column![text(&*ICON_THEME), text(&*ICON_THEME_DESC).size(10)] // cosmic::iced::widget::column![text(&*ICON_THEME), text(&*ICON_THEME_DESC).size(10)]
// .spacing(2), // .spacing(2),
cosmic::iced::widget::column![ cosmic::widget::column::with_children(vec![
text(&*ICON_THEME), text::heading(&*ICON_THEME).into(),
scrollable( scrollable(
flex_row( flex_row(
self.icon_themes self.icon_themes
@ -477,7 +477,8 @@ impl Page {
.row_spacing(theme.space_xs()) .row_spacing(theme.space_xs())
.column_spacing(theme.space_xxxs()) .column_spacing(theme.space_xxxs())
) )
] .into()
])
.spacing(theme.space_xxs()) .spacing(theme.space_xxs())
] ]
// .padding(theme.space_s()) // .padding(theme.space_s())
@ -1673,89 +1674,91 @@ fn icon_theme_button(
) -> Element<'static, Message> { ) -> Element<'static, Message> {
let theme = cosmic::theme::active(); let theme = cosmic::theme::active();
let theme = theme.cosmic(); let theme = theme.cosmic();
// let image_style = cosmic::theme::Button::Image; let background = Background::Color(theme.palette.neutral_4.into());
let background = theme.palette.neutral_4.into();
cosmic::widget::column() cosmic::widget::column()
.push( .push(
button::Button::new_image( cosmic::widget::button::custom_image_button(
cosmic::iced::widget::column![ cosmic::widget::column::with_children(vec![
cosmic::widget::row::row() cosmic::widget::row()
.extend( .extend(
handles handles
.iter() .iter()
.take(ICON_PREV_ROW) .take(ICON_PREV_ROW)
.cloned() .cloned()
.map(|handle| handle.icon().size(ICON_PREV_SIZE)) // TODO: Maybe allow choosable sizes/zooming
.map(|handle| handle.icon().size(ICON_PREV_SIZE)),
) )
.spacing(theme.space_xs()), .spacing(theme.space_xxs())
row::Row::new() .into(),
cosmic::widget::row()
.extend( .extend(
handles handles
.iter() .iter()
.skip(ICON_PREV_ROW) .skip(ICON_PREV_ROW)
.cloned() .cloned()
.map(|handle| handle.icon().size(ICON_PREV_SIZE)) // TODO: Maybe allow choosable sizes/zooming
.map(|handle| handle.icon().size(ICON_PREV_SIZE)),
) )
.spacing(theme.space_xs()), .spacing(theme.space_xxs())
] .into(),
])
.spacing(theme.space_xs()), .spacing(theme.space_xs()),
None, None,
) )
.on_press(Message::IconTheme(id)) .on_press(Message::IconTheme(id))
.selected(selected) .selected(selected)
.padding(theme.space_xxs())
// Image button's style mostly works, but it needs a background to fit the design
.style(button::Style::Custom { .style(button::Style::Custom {
active: Box::new(move |focused, theme| { active: Box::new(move |focused, theme| {
icon_theme_style( let mut appearance = <cosmic::theme::Theme as button::StyleSheet>::active(
<cosmic::theme::Theme as button::StyleSheet>::active( theme,
theme, focused,
focused, selected,
selected, &cosmic::theme::Button::Image,
&cosmic::theme::Button::Image, );
), appearance.background = Some(background);
background, appearance
)
}), }),
disabled: Box::new(move |theme| { disabled: Box::new(move |theme| {
icon_theme_style( let mut appearance = <cosmic::theme::Theme as button::StyleSheet>::disabled(
<cosmic::theme::Theme as button::StyleSheet>::disabled( theme,
theme, &cosmic::theme::Button::Image,
&cosmic::theme::Button::Image, );
), appearance.background = Some(background);
background, appearance
)
}), }),
hovered: Box::new(move |focused, theme| { hovered: Box::new(move |focused, theme| {
icon_theme_style( let mut appearance = <cosmic::theme::Theme as button::StyleSheet>::hovered(
<cosmic::theme::Theme as button::StyleSheet>::hovered( theme,
theme, focused,
focused, selected,
selected, &cosmic::theme::Button::Image,
&cosmic::theme::Button::Image, );
), appearance.background = Some(background);
background, appearance
)
}), }),
pressed: Box::new(move |focused, theme| { pressed: Box::new(move |focused, theme| {
icon_theme_style( let mut appearance = <cosmic::theme::Theme as button::StyleSheet>::pressed(
<cosmic::theme::Theme as button::StyleSheet>::pressed( theme,
theme, focused,
focused, selected,
selected, &cosmic::theme::Button::Image,
&cosmic::theme::Button::Image, );
), appearance.background = Some(background);
background, appearance
)
}), }),
}), }),
) )
.push(text(name.to_owned()).width(Length::Fixed((ICON_PREV_SIZE * 3) as _))) .push(
text(if name.len() > 18 {
format!("{name:.20}...")
} else {
name.into()
})
.width(Length::Fixed((ICON_PREV_SIZE * 3) as _)),
)
.spacing(theme.space_xs()) .spacing(theme.space_xs())
.into() .into()
} }
/// Add background color to the thumbnails button.
fn icon_theme_style(mut appearance: button::Appearance, background: Color) -> button::Appearance {
appearance.background = Some(Background::Color(background));
appearance
}