feat(wallpaper): responsive selection lists
This commit is contained in:
parent
900bb45758
commit
ed625deb0b
1 changed files with 59 additions and 26 deletions
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue