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

feat(wallpaper): responsive selection lists

Browse source
This commit is contained in:
Michael Aaron Murphy 2023-06-23 19:52:11 +02:00 • committed by Michael Murphy
parent 900bb45758
commit ed625deb0b
1 changed files with 59 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

85
app/src/pages/desktop/wallpaper/widgets.rs
View file

@ -3,7 +3,7 @@
use super::Message; use super::Message;
use apply::Apply; use apply::Apply;
use cosmic::iced_core::{self, gradient::Linear, Background, BorderRadius, Color, Degrees, Length}; use cosmic::iced_core::{self, gradient::Linear, Background, BorderRadius, Color, Degrees};
use cosmic::iced_runtime::core::image::Handle as ImageHandle; use cosmic::iced_runtime::core::image::Handle as ImageHandle;
use cosmic::{ use cosmic::{
iced, iced,
@ -13,11 +13,16 @@ use cosmic::{
use cosmic_settings_desktop::wallpaper; use cosmic_settings_desktop::wallpaper;
use slotmap::DefaultKey; use slotmap::DefaultKey;
const COLOR_WIDTH: u16 = 70;
const WALLPAPER_WIDTH: f32 = 158.0;
const COLUMN_SPACING: u16 = 12;
const ROW_SPACING: u16 = 16;
/// A button for selecting a color or gradient. /// A button for selecting a color or gradient.
pub fn color_button(color: wallpaper::Color) -> Element<'static, Message> { pub fn color_button(color: wallpaper::Color) -> Element<'static, Message> {
iced::widget::button(color_image(color.clone(), 70, 70, 8.0)) iced::widget::button(color_image(color.clone(), COLOR_WIDTH, COLOR_WIDTH, 8.0))
.width(Length::Fixed(71.0)) .padding(0)
.height(Length::Fixed(71.0))
.style(cosmic::theme::Button::Transparent) .style(cosmic::theme::Button::Transparent)
.on_press(Message::ColorSelect(color)) .on_press(Message::ColorSelect(color))
.into() .into()
@ -58,55 +63,83 @@ pub fn color_image(
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
})) }))
.padding(0)
.into() .into()
} }
/// Color selection list /// Color selection list
pub fn color_select_options() -> Element<'static, Message> { pub fn color_select_options() -> Element<'static, Message> {
let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / 8); cosmic::iced::widget::responsive(|size| {
let mut colors = wallpaper::DEFAULT_COLORS.iter(); let items_per_row = ((size.width / (COLOR_WIDTH + ROW_SPACING) as f32).floor() as usize)
.max(1)
.min(8);
while let Some(color) = colors.next() { let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / items_per_row);
let mut color_row = Vec::with_capacity(8); let mut colors = wallpaper::DEFAULT_COLORS.iter();
color_row.push(color_button(color.clone())); while let Some(color) = colors.next() {
let mut color_row = Vec::with_capacity(items_per_row);
for color in colors.by_ref().take(7) {
color_row.push(color_button(color.clone())); color_row.push(color_button(color.clone()));
for color in colors.by_ref().take(items_per_row - 1) {
color_row.push(color_button(color.clone()));
}
color_column.push(row(color_row).spacing(ROW_SPACING).into());
} }
color_column.push(row(color_row).spacing(16).into()); column(color_column)
} .spacing(COLUMN_SPACING)
.padding(0)
column(color_column).spacing(12).padding(0).into() .apply(cosmic::iced::widget::container)
.align_x(iced_core::alignment::Horizontal::Center)
.width(size.width)
.into()
})
.into()
} }
/// Background selection list /// Background selection list
pub fn wallpaper_select_options(page: &super::Page) -> Element<Message> { pub fn wallpaper_select_options(page: &super::Page) -> Element<Message> {
let mut image_column = Vec::with_capacity(page.selection.selection_handles.len() / 4); cosmic::iced::widget::responsive(|size| {
let mut image_handles = page.selection.selection_handles.iter(); let items_per_row = ((size.width / (WALLPAPER_WIDTH + ROW_SPACING as f32)).floor()
as usize)
.max(1)
.min(4);
while let Some((id, handle)) = image_handles.next() { let mut image_column =
let mut image_row = Vec::with_capacity(4); Vec::with_capacity(page.selection.selection_handles.len() / items_per_row);
let mut image_handles = page.selection.selection_handles.iter();
image_row.push(wallpaper_button(handle, id)); while let Some((id, handle)) = image_handles.next() {
let mut image_row = Vec::with_capacity(items_per_row);
for (id, handle) in image_handles.by_ref().take(3) {
image_row.push(wallpaper_button(handle, id)); image_row.push(wallpaper_button(handle, id));
for (id, handle) in image_handles.by_ref().take(items_per_row - 1) {
image_row.push(wallpaper_button(handle, id));
}
image_column.push(row(image_row).spacing(ROW_SPACING).into());
} }
image_column.push(row(image_row).spacing(16).into()); column(image_column)
} .spacing(COLUMN_SPACING)
.padding(0)
column(image_column).spacing(12).padding(0).into() .apply(cosmic::iced::widget::container)
.align_x(iced_core::alignment::Horizontal::Center)
.width(size.width)
.into()
})
.into()
} }
fn wallpaper_button(handle: &ImageHandle, id: DefaultKey) -> Element<Message> { fn wallpaper_button(handle: &ImageHandle, id: DefaultKey) -> Element<Message> {
let image = iced::widget::image(handle.clone()).apply(iced::Element::from); let image = iced::widget::image(handle.clone()).apply(iced::Element::from);
iced::widget::button(image) iced::widget::button(image)
.width(Length::Fixed(158.0)) .padding(0)
.height(Length::Fixed(105.0))
.style(cosmic::theme::Button::Transparent) .style(cosmic::theme::Button::Transparent)
.on_press(Message::Select(id)) .on_press(Message::Select(id))
.into() .into()