feat(wallpaper): responsive selection lists

This commit is contained in:
Michael Aaron Murphy 2023-06-23 19:52:11 +02:00 committed by Michael Murphy
parent 900bb45758
commit ed625deb0b

View file

@ -3,7 +3,7 @@
use super::Message;
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,
@ -13,11 +13,16 @@ use cosmic::{
use cosmic_settings_desktop::wallpaper;
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.
pub fn color_button(color: wallpaper::Color) -> Element<'static, Message> {
iced::widget::button(color_image(color.clone(), 70, 70, 8.0))
.width(Length::Fixed(71.0))
.height(Length::Fixed(71.0))
iced::widget::button(color_image(color.clone(), COLOR_WIDTH, COLOR_WIDTH, 8.0))
.padding(0)
.style(cosmic::theme::Button::Transparent)
.on_press(Message::ColorSelect(color))
.into()
@ -58,55 +63,83 @@ pub fn color_image(
border_color: Color::TRANSPARENT,
}
}))
.padding(0)
.into()
}
/// Color selection list
pub fn color_select_options() -> Element<'static, Message> {
let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / 8);
let mut colors = wallpaper::DEFAULT_COLORS.iter();
cosmic::iced::widget::responsive(|size| {
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_row = Vec::with_capacity(8);
let mut color_column = Vec::with_capacity(wallpaper::DEFAULT_COLORS.len() / items_per_row);
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()));
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(12).padding(0).into()
column(color_column)
.spacing(COLUMN_SPACING)
.padding(0)
.apply(cosmic::iced::widget::container)
.align_x(iced_core::alignment::Horizontal::Center)
.width(size.width)
.into()
})
.into()
}
/// Background selection list
pub fn wallpaper_select_options(page: &super::Page) -> Element<Message> {
let mut image_column = Vec::with_capacity(page.selection.selection_handles.len() / 4);
let mut image_handles = page.selection.selection_handles.iter();
cosmic::iced::widget::responsive(|size| {
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_row = Vec::with_capacity(4);
let mut image_column =
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));
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(12).padding(0).into()
column(image_column)
.spacing(COLUMN_SPACING)
.padding(0)
.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> {
let image = iced::widget::image(handle.clone()).apply(iced::Element::from);
iced::widget::button(image)
.width(Length::Fixed(158.0))
.height(Length::Fixed(105.0))
.padding(0)
.style(cosmic::theme::Button::Transparent)
.on_press(Message::Select(id))
.into()