From fd269dd2ea36a4cea76fc9fd42dbede7d4bb2dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vuka=C5=A1in=20Vojinovi=C4=87?= Date: Tue, 17 Dec 2024 16:22:11 +0100 Subject: [PATCH] fix(appearance): roundness button style --- .../src/pages/desktop/appearance/mod.rs | 53 +++++++++++++------ cosmic-settings/src/pages/display/mod.rs | 1 - cosmic-settings/src/pages/system/users/mod.rs | 16 +++--- ...lustration-appearance-dark-style-round.svg | 18 ++++--- ...n-appearance-dark-style-slightly-round.svg | 18 ++++--- ...ustration-appearance-dark-style-square.svg | 18 ++++--- 6 files changed, 74 insertions(+), 50 deletions(-) diff --git a/cosmic-settings/src/pages/desktop/appearance/mod.rs b/cosmic-settings/src/pages/desktop/appearance/mod.rs index 2b5167ff..cef70c39 100644 --- a/cosmic-settings/src/pages/desktop/appearance/mod.rs +++ b/cosmic-settings/src/pages/desktop/appearance/mod.rs @@ -1603,7 +1603,7 @@ pub fn mode_and_colors() -> Section { cosmic::iced::widget::column![ button::custom( icon(dark_mode_illustration.clone()) - .width(Length::Fill) + .width(Length::Fixed(191.0)) .height(Length::Fixed(100.0)) ) .class(button::ButtonClass::Image) @@ -1612,13 +1612,13 @@ pub fn mode_and_colors() -> Section { .on_press(Message::DarkMode(true)), text::body(&descriptions[dark]) ] - .spacing(space_xxs) + .spacing(8) .width(Length::FillPortion(1)) .align_x(Alignment::Center), cosmic::iced::widget::column![ button::custom( icon(light_mode_illustration.clone(),) - .width(Length::Fill) + .width(Length::Fixed(191.0)) .height(Length::Fixed(100.0)) ) .class(button::ButtonClass::Image) @@ -1627,13 +1627,13 @@ pub fn mode_and_colors() -> Section { .on_press(Message::DarkMode(false)), text::body(&descriptions[light]) ] - .spacing(space_xxs) + .spacing(8) .width(Length::FillPortion(1)) .align_x(Alignment::Center) ] - .spacing(48) - .align_y(Alignment::Center) - .width(Length::Fixed(424.0)), + .spacing(8) + .width(Length::Fixed(478.0)) + .align_y(Alignment::Center), ) .center_x(Length::Fill), ) @@ -1836,6 +1836,21 @@ pub fn style() -> Section { let dark_square_style = from_name("illustration-appearance-dark-style-square").handle(); let light_square_style = from_name("illustration-appearance-light-style-square").handle(); + fn style_container() -> cosmic::theme::Container<'static> { + cosmic::theme::Container::custom(|theme| { + let mut background = theme.cosmic().palette.neutral_9; + background.alpha = 0.1; + container::Style { + background: Some(cosmic::iced::Background::Color(background.into())), + border: cosmic::iced::Border { + radius: theme.cosmic().radius_s().into(), + ..Default::default() + }, + ..Default::default() + } + }) + } + Section::default() .title(fl!("style")) .descriptions(descriptions) @@ -1862,8 +1877,11 @@ pub fn style() -> Section { ) .selected(matches!(page.roundness, Roundness::Round)) .class(button::ButtonClass::Image) - .padding(8) - .on_press(Message::Roundness(Roundness::Round)), + .padding(0) + .on_press(Message::Roundness(Roundness::Round)) + .apply(container) + .width(Length::Fixed(191.0)) + .class(style_container()), text::body(&descriptions[round]) ] .spacing(8) @@ -1884,8 +1902,11 @@ pub fn style() -> Section { ) .selected(matches!(page.roundness, Roundness::SlightlyRound)) .class(button::ButtonClass::Image) - .padding(8) - .on_press(Message::Roundness(Roundness::SlightlyRound)), + .padding(0) + .on_press(Message::Roundness(Roundness::SlightlyRound)) + .apply(container) + .width(Length::Fixed(191.0)) + .class(style_container()), text::body(&descriptions[slightly_round]) ] .spacing(8) @@ -1907,16 +1928,18 @@ pub fn style() -> Section { .width(Length::FillPortion(1)) .selected(matches!(page.roundness, Roundness::Square)) .class(button::ButtonClass::Image) - .padding(8) - .on_press(Message::Roundness(Roundness::Square)), + .padding(0) + .on_press(Message::Roundness(Roundness::Square)) + .apply(container) + .width(Length::Fixed(191.0)) + .class(style_container()), text::body(&descriptions[square]) ] .spacing(8) .align_x(Alignment::Center) .width(Length::FillPortion(1)) ] - .spacing(12) - .width(Length::Fixed(628.0)) + .spacing(8) .align_y(Alignment::Center), ) .center_x(Length::Fill), diff --git a/cosmic-settings/src/pages/display/mod.rs b/cosmic-settings/src/pages/display/mod.rs index 243b33c4..89a052e1 100644 --- a/cosmic-settings/src/pages/display/mod.rs +++ b/cosmic-settings/src/pages/display/mod.rs @@ -1095,7 +1095,6 @@ pub fn display_arrangement() -> Section { .width(Length::Shrink) .direction(Direction::Horizontal(Scrollbar::new())) .apply(container) - .padding([48, 32, 32, 32]) .center_x(Length::Fill) }) .apply(container) diff --git a/cosmic-settings/src/pages/system/users/mod.rs b/cosmic-settings/src/pages/system/users/mod.rs index 13c25abd..ce179141 100644 --- a/cosmic-settings/src/pages/system/users/mod.rs +++ b/cosmic-settings/src/pages/system/users/mod.rs @@ -6,7 +6,6 @@ mod getent; use cosmic::{ dialog::file_chooser, iced::{Alignment, Length}, - theme, widget::{self, column, icon, settings, text}, Apply, Element, }; @@ -216,7 +215,7 @@ impl page::Page for Page { ) .primary_action(add_user_button) .secondary_action(cancel_button) - .apply(cosmic::Element::from) + .apply(Element::from) } }; @@ -587,12 +586,9 @@ fn user_list() -> Section { .view::(move |_binder, page, section| { let descriptions = §ion.descriptions; - let theme = cosmic::theme::active(); - let theme = theme.cosmic(); - let cosmic::cosmic_theme::Spacing { space_xxs, space_m, .. - } = theme::active().cosmic().spacing; + } = cosmic::theme::active().cosmic().spacing; let users_list = page .users @@ -661,7 +657,7 @@ fn user_list() -> Section { ])); } - details_list.apply(cosmic::Element::from) + details_list.apply(Element::from) }); let profile_icon_handle = user @@ -682,7 +678,7 @@ fn user_list() -> Section { .push(account_type), ) .align_y(Alignment::Center) - .spacing(theme.space_xxs()) + .spacing(space_xxs) .into(), widget::horizontal_space().width(Length::Fill).into(), icon::from_name(if expanded { @@ -701,7 +697,7 @@ fn user_list() -> Section { .on_press(Message::SelectUser(idx)) .class(cosmic::theme::Button::ListItem) .selected(expanded) - .apply(cosmic::Element::from), + .apply(Element::from), ); vec![account_details, expanded_details] @@ -715,7 +711,7 @@ fn user_list() -> Section { .list_item_padding(0), widget::ListColumn::add, ) - .apply(|list| cosmic::Element::from(settings::section::with_column(list))); + .apply(|list| Element::from(settings::section::with_column(list))); let add_user = widget::button::standard(crate::fl!("add-user")) .on_press(Message::Dialog(Some(Dialog::AddNewUser(User::default())))) diff --git a/resources/icons/scalable/status/illustration-appearance-dark-style-round.svg b/resources/icons/scalable/status/illustration-appearance-dark-style-round.svg index 5f2313b7..93f8284c 100644 --- a/resources/icons/scalable/status/illustration-appearance-dark-style-round.svg +++ b/resources/icons/scalable/status/illustration-appearance-dark-style-round.svg @@ -1,9 +1,11 @@ - - - - - - - - + + + + + + + + + + diff --git a/resources/icons/scalable/status/illustration-appearance-dark-style-slightly-round.svg b/resources/icons/scalable/status/illustration-appearance-dark-style-slightly-round.svg index 445c02d6..c717f57b 100644 --- a/resources/icons/scalable/status/illustration-appearance-dark-style-slightly-round.svg +++ b/resources/icons/scalable/status/illustration-appearance-dark-style-slightly-round.svg @@ -1,9 +1,11 @@ - - - - - - - - + + + + + + + + + + diff --git a/resources/icons/scalable/status/illustration-appearance-dark-style-square.svg b/resources/icons/scalable/status/illustration-appearance-dark-style-square.svg index dd3f8e99..5d7cf894 100644 --- a/resources/icons/scalable/status/illustration-appearance-dark-style-square.svg +++ b/resources/icons/scalable/status/illustration-appearance-dark-style-square.svg @@ -1,9 +1,11 @@ - - - - - - - - + + + + + + + + + +