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

refactor(appearance): use image button in the appearance panel

Browse source
This commit is contained in:
Ashley Wulber 2023-11-13 10:29:08 -05:00 • committed by Michael Murphy
parent dc9db64592
commit 8ec10e0fc0
3 changed files with 87 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

210
app/src/pages/desktop/appearance.rs
View file

@ -20,6 +20,7 @@ use cosmic::widget::{
spin_button, text, ColorPickerModel, spin_button, text, ColorPickerModel,
}; };
use cosmic::{Command, Element}; use cosmic::{Command, Element};
use cosmic_settings_desktop::wallpaper;
use cosmic_settings_page::Section; use cosmic_settings_page::Section;
use cosmic_settings_page::{self as page, section}; use cosmic_settings_page::{self as page, section};
use ron::ser::PrettyConfig; use ron::ser::PrettyConfig;
@ -27,6 +28,8 @@ use slotmap::SlotMap;
use tracing::warn; use tracing::warn;
use crate::app; use crate::app;
use super::wallpaper::widgets::color_image;
pub const COLOR_PICKER_DIALOG_ID: window::Id = window::Id(1003); pub const COLOR_PICKER_DIALOG_ID: window::Id = window::Id(1003);
enum NamedColorPicker { enum NamedColorPicker {
@ -1036,8 +1039,9 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fixed(100.0)) .height(Length::Fixed(100.0))
) )
.style(cosmic::theme::Button::IconVertical) .style(button::Style::Image)
.padding(8) .padding([0, 0])
.selected(page.theme_mode.is_dark)
.on_press(Message::DarkMode(true)), .on_press(Message::DarkMode(true)),
text(&descriptions[14]) text(&descriptions[14])
] ]
@ -1050,8 +1054,9 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fixed(100.0)) .height(Length::Fixed(100.0))
) )
.style(cosmic::theme::Button::IconVertical) .style(button::Style::Image)
.padding(8) .selected(!page.theme_mode.is_dark)
.padding([8, 0])
.on_press(Message::DarkMode(false)), .on_press(Message::DarkMode(false)),
text(&descriptions[15]) text(&descriptions[15])
] ]
@ -1080,51 +1085,83 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
Some(Message::PaletteAccent(palette.accent_blue.into())), Some(Message::PaletteAccent(palette.accent_blue.into())),
palette.accent_blue.into(), palette.accent_blue.into(),
cur_accent == palette.accent_blue, cur_accent == palette.accent_blue,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_indigo.into())), Some(Message::PaletteAccent(palette.accent_indigo.into())),
palette.accent_indigo.into(), palette.accent_indigo.into(),
cur_accent == palette.accent_indigo, cur_accent == palette.accent_indigo,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_purple.into())), Some(Message::PaletteAccent(palette.accent_purple.into())),
palette.accent_purple.into(), palette.accent_purple.into(),
cur_accent == palette.accent_purple, cur_accent == palette.accent_purple,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_pink.into())), Some(Message::PaletteAccent(palette.accent_pink.into())),
palette.accent_pink.into(), palette.accent_pink.into(),
cur_accent == palette.accent_pink, cur_accent == palette.accent_pink,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_red.into())), Some(Message::PaletteAccent(palette.accent_red.into())),
palette.accent_red.into(), palette.accent_red.into(),
cur_accent == palette.accent_red, cur_accent == palette.accent_red,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_orange.into())), Some(Message::PaletteAccent(palette.accent_orange.into())),
palette.accent_orange.into(), palette.accent_orange.into(),
cur_accent == palette.accent_orange, cur_accent == palette.accent_orange,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_yellow.into())), Some(Message::PaletteAccent(palette.accent_yellow.into())),
palette.accent_yellow.into(), palette.accent_yellow.into(),
cur_accent == palette.accent_yellow, cur_accent == palette.accent_yellow,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_green.into())), Some(Message::PaletteAccent(palette.accent_green.into())),
palette.accent_green.into(), palette.accent_green.into(),
cur_accent == palette.accent_green, cur_accent == palette.accent_green,
48,
48
), ),
color_button( color_button(
Some(Message::PaletteAccent(palette.accent_warm_grey.into())), Some(Message::PaletteAccent(palette.accent_warm_grey.into())),
palette.accent_warm_grey.into(), palette.accent_warm_grey.into(),
cur_accent == palette.accent_warm_grey, cur_accent == palette.accent_warm_grey,
48,
48
), ),
page.custom_accent if let Some(c) = page.custom_accent.get_applied_color() {
.picker_button(Message::CustomAccent, None) container(color_button(
.width(Length::Fixed(48.0)) Some(Message::CustomAccent(
.height(Length::Fixed(48.0)) ColorPickerUpdate::ToggleColorPicker,
)),
c,
cosmic::iced::Color::from(cur_accent) == c,
48,
48,
))
} else {
container(
page.custom_accent
.picker_button(Message::CustomAccent, None)
.width(Length::Fixed(48.0))
.height(Length::Fixed(48.0)),
)
},
] ]
.padding([0, 0, 16, 0]) .padding([0, 0, 16, 0])
.spacing(16) .spacing(16)
@ -1149,17 +1186,15 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
.description(&descriptions[5]) .description(&descriptions[5])
.control( .control(
if let Some(c) = page.container_background.get_applied_color() { if let Some(c) = page.container_background.get_applied_color() {
container( container(color_button(
color_button( Some(Message::ContainerBackground(
Some(Message::ContainerBackground( ColorPickerUpdate::ToggleColorPicker,
ColorPickerUpdate::ToggleColorPicker, )),
)), c,
c, true,
true, 48,
) 24,
.width(Length::Fixed(48.0)) ))
.height(Length::Fixed(24.0)),
)
} else { } else {
container( container(
button::text(fl!("auto")) button::text(fl!("auto"))
@ -1380,114 +1415,37 @@ fn color_picker_window_settings() -> SctkWindowSettings {
} }
// TODO replace with image button / toggle buttons // TODO replace with image button / toggle buttons
fn color_button<'a, Message: 'a>( // fn color_button_<'a, Message: 'a>(
// on_press: Option<Message>,
// color: cosmic::iced::Color,
// selected: bool,
// ) -> cosmic::widget::Button<'a, Message, cosmic::Renderer> {
// let ret = button(cosmic::widget::vertical_space(Length::Fixed(48.0)))
// .width(Length::Fixed(48.0))
// .height(Length::Fixed(48.0))
// .on_press_maybe(on_press);
// color_button(ret, color, selected)
// }
/// A button for selecting a color or gradient.
pub fn color_button<'a, Message: 'a + Clone>(
on_press: Option<Message>, on_press: Option<Message>,
color: cosmic::iced::Color, color: cosmic::iced::Color,
selected: bool, selected: bool,
) -> cosmic::widget::Button<'a, Message, cosmic::Renderer> { width: u16,
let ret = button(cosmic::widget::vertical_space(Length::Fixed(48.0))) height: u16,
.width(Length::Fixed(48.0)) ) -> Element<'a, Message> {
.height(Length::Fixed(48.0)) button(color_image(
.on_press_maybe(on_press); wallpaper::Color::Single([color.r, color.g, color.b]),
style_color_button(ret, color, selected) width,
} height,
8.0,
fn style_color_button<'a, Message: 'a>( ))
b: button::Button<'a, Message, cosmic::Renderer>, .padding(0)
color: cosmic::iced::Color, .selected(selected)
selected: bool, .style(button::Style::Image)
) -> button::Button<'a, Message, cosmic::Renderer> { .on_press_maybe(on_press)
b.style(cosmic::theme::Button::Custom { .width(Length::Fixed(f32::from(width)))
active: Box::new(move |focused, theme| { .height(Length::Fixed(f32::from(height)))
let cosmic = theme.cosmic(); .into()
let (outline_width, outline_color) = if focused {
(1.0, cosmic.accent_color().into())
} else {
(0.0, cosmic::iced::Color::TRANSPARENT)
};
cosmic::widget::button::Appearance {
shadow_offset: cosmic::iced_core::Vector::default(),
background: Some(color.into()),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: if selected {
cosmic.on_bg_color().into()
} else {
cosmic::iced::Color::TRANSPARENT
},
outline_width,
outline_color,
icon_color: None,
text_color: None,
}
}),
disabled: Box::new(move |theme| {
let cosmic = theme.cosmic();
cosmic::widget::button::Appearance {
shadow_offset: cosmic::iced_core::Vector::default(),
background: Some(color.into()),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: if selected {
cosmic.on_bg_color().into()
} else {
cosmic::iced::Color::TRANSPARENT
},
outline_width: 0.0,
outline_color: cosmic::iced::Color::TRANSPARENT,
icon_color: None,
text_color: None,
}
}),
hovered: Box::new(move |focused, theme| {
let cosmic = theme.cosmic();
let (outline_width, outline_color) = if focused {
(1.0, cosmic.accent_color().into())
} else {
(0.0, cosmic::iced::Color::TRANSPARENT)
};
cosmic::widget::button::Appearance {
shadow_offset: cosmic::iced_core::Vector::default(),
background: Some(color.into()),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: if selected {
cosmic.on_bg_color().into()
} else {
cosmic::iced::Color::TRANSPARENT
},
outline_width,
outline_color,
icon_color: None,
text_color: None,
}
}),
pressed: Box::new(move |focused, theme| {
let cosmic = theme.cosmic();
let (outline_width, outline_color) = if focused {
(1.0, cosmic.accent_color().into())
} else {
(0.0, cosmic::iced::Color::TRANSPARENT)
};
cosmic::widget::button::Appearance {
shadow_offset: cosmic::iced_core::Vector::default(),
background: Some(color.into()),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: if selected {
cosmic.on_bg_color().into()
} else {
cosmic::iced::Color::TRANSPARENT
},
outline_width,
outline_color,
icon_color: None,
text_color: None,
}
}),
})
} }

2
app/src/pages/desktop/wallpaper/mod.rs
View file

@ -1,7 +1,7 @@
// Copyright 2023 System76 <info@system76.com> // Copyright 2023 System76 <info@system76.com>
// SPDX-License-Identifier: GPL-3.0-only // SPDX-License-Identifier: GPL-3.0-only
mod widgets; pub mod widgets;
use std::{ use std::{
collections::HashMap, collections::HashMap,

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

@ -25,12 +25,12 @@ pub fn color_button(color: wallpaper::Color, selected: bool) -> Element<'static,
} }
/// A sized container that's filled with a color or gradient. /// A sized container that's filled with a color or gradient.
pub fn color_image( pub fn color_image<'a, M: 'a>(
color: wallpaper::Color, color: wallpaper::Color,
width: u16, width: u16,
height: u16, height: u16,
border_radius: f32, border_radius: f32,
) -> Element<'static, Message> { ) -> Element<'a, M> {
container(space::Space::new(width, height)) container(space::Space::new(width, height))
.style(cosmic::theme::Container::custom(move |_theme| { .style(cosmic::theme::Container::custom(move |_theme| {
container::Appearance { container::Appearance {