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

fix(appearance): roundness button style

Browse source
This commit is contained in:
Vukašin Vojinović 2024-12-17 16:22:11 +01:00 • committed by Michael Murphy
parent 85dcfc6f45
commit 8981501834
6 changed files with 74 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

53
cosmic-settings/src/pages/desktop/appearance/mod.rs
View file

@ -1603,7 +1603,7 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
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<crate::pages::Message> {
.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<crate::pages::Message> {
.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<crate::pages::Message> {
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<crate::pages::Message> {
)
.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<crate::pages::Message> {
)
.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<crate::pages::Message> {
.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),

1
cosmic-settings/src/pages/display/mod.rs
View file

@ -1095,7 +1095,6 @@ pub fn display_arrangement() -> Section<crate::pages::Message> {
.width(Length::Shrink)
.direction(Direction::Horizontal(Scrollbar::new()))
.apply(container)
.padding([48, 32, 32, 32])
.center_x(Length::Fill)
})
.apply(container)

16
cosmic-settings/src/pages/system/users/mod.rs
View file

@ -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<crate::pages::Message> 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<crate::pages::Message> {
.view::<Page>(move |_binder, page, section| {
let descriptions = &section.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<crate::pages::Message> {
]));
}
details_list.apply(cosmic::Element::from)
details_list.apply(Element::from)
});
let profile_icon_handle = user
@ -682,7 +678,7 @@ fn user_list() -> Section<crate::pages::Message> {
.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<crate::pages::Message> {
.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<crate::pages::Message> {
.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()))))

18
resources/icons/scalable/status/illustration-appearance-dark-style-round.svg
View file

@ -1,9 +1,11 @@
<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M16 22C16 16.4772 20.4772 12 26 12H165C170.523 12 175 16.4772 175 22C175 27.5228 170.523 32 165 32H26C20.4772 32 16 27.5228 16 22Z" fill="white"/>
<path d="M36.7454 23.7139L35.6789 24.7804L37.9364 27.0379C38.6556 27.7406 39.7101 26.6629 38.9909 25.9594L36.7454 23.7139Z" fill="white"/>
<path d="M32.8379 16.75C31.7439 16.75 30.6947 17.1846 29.9211 17.9582C29.1475 18.7318 28.7129 19.781 28.7129 20.875C28.7129 21.969 29.1475 23.0182 29.9211 23.7918C30.6947 24.5654 31.7439 25 32.8379 25C33.9319 25 34.9811 24.5654 35.7547 23.7918C36.5283 23.0182 36.9629 21.969 36.9629 20.875C36.9629 19.781 36.5283 18.7318 35.7547 17.9582C34.9811 17.1846 33.9319 16.75 32.8379 16.75ZM32.8379 18.25C33.5341 18.25 34.2018 18.5266 34.694 19.0188C35.1863 19.5111 35.4629 20.1788 35.4629 20.875C35.4629 21.5712 35.1863 22.2389 34.694 22.7312C34.2018 23.2234 33.5341 23.5 32.8379 23.5C32.1417 23.5 31.474 23.2234 30.9817 22.7312C30.4895 22.2389 30.2129 21.5712 30.2129 20.875C30.2129 20.1788 30.4895 19.5111 30.9817 19.0188C31.474 18.5266 32.1417 18.25 32.8379 18.25Z" fill="white"/>
<path opacity="0.2" d="M16 44C16 41.7909 17.7909 40 20 40H115C117.209 40 119 41.7909 119 44C119 46.2091 117.209 48 115 48H20C17.7909 48 16 46.2091 16 44Z" fill="white"/>
<path opacity="0.2" d="M16 56C16 53.7909 17.7909 52 20 52H171C173.209 52 175 53.7909 175 56C175 58.2091 173.209 60 171 60H20C17.7909 60 16 58.2091 16 56Z" fill="white"/>
<path opacity="0.4" d="M71 78C71 72.4772 75.4772 68 81 68H109C114.523 68 119 72.4772 119 78C119 83.5228 114.523 88 109 88H81C75.4772 88 71 83.5228 71 78Z" fill="white"/>
<path opacity="0.6" d="M127 78C127 72.4772 131.477 68 137 68H165C170.523 68 175 72.4772 175 78C175 83.5228 170.523 88 165 88H137C131.477 88 127 83.5228 127 78Z" fill="white"/>
<svg width="191" height="100" fill="none" version="1.1" viewBox="0 0 191 100" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<path d="m16 22c0-5.5228 4.4772-10 10-10h139c5.523 0 10 4.4772 10 10s-4.477 10-10 10h-139c-5.5228 0-10-4.4772-10-10z" opacity=".6"/>
<path d="m36.745 23.714-1.0665 1.0665 2.2575 2.2575c0.7192 0.7027 1.7737-0.375 1.0545-1.0785l-2.2455-2.2455z"/>
<path d="m32.838 16.75c-1.094 0-2.1432 0.4346-2.9168 1.2082s-1.2082 1.8228-1.2082 2.9168 0.4346 2.1432 1.2082 2.9168 1.8228 1.2082 2.9168 1.2082 2.1432-0.4346 2.9168-1.2082 1.2082-1.8228 1.2082-2.9168-0.4346-2.1432-1.2082-2.9168-1.8228-1.2082-2.9168-1.2082zm0 1.5c0.6962 0 1.3639 0.2766 1.8561 0.7688 0.4923 0.4923 0.7689 1.16 0.7689 1.8562s-0.2766 1.3639-0.7689 1.8562c-0.4922 0.4922-1.1599 0.7688-1.8561 0.7688s-1.3639-0.2766-1.8562-0.7688c-0.4922-0.4923-0.7688-1.16-0.7688-1.8562s0.2766-1.3639 0.7688-1.8562c0.4923-0.4922 1.16-0.7688 1.8562-0.7688z"/>
<path d="m16 44c0-2.2091 1.7909-4 4-4h95c2.209 0 4 1.7909 4 4s-1.791 4-4 4h-95c-2.2091 0-4-1.7909-4-4z" opacity=".5"/>
<path d="m16 56c0-2.2091 1.7909-4 4-4h151c2.209 0 4 1.7909 4 4s-1.791 4-4 4h-151c-2.2091 0-4-1.7909-4-4z" opacity=".5"/>
<path d="m71 78c0-5.5228 4.4772-10 10-10h28c5.523 0 10 4.4772 10 10s-4.477 10-10 10h-28c-5.5228 0-10-4.4772-10-10z" opacity=".6"/>
<path d="m127 78c0-5.5228 4.477-10 10-10h28c5.523 0 10 4.4772 10 10s-4.477 10-10 10h-28c-5.523 0-10-4.4772-10-10z" opacity=".8"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

18
resources/icons/scalable/status/illustration-appearance-dark-style-slightly-round.svg
View file

@ -1,9 +1,11 @@
<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M16 20C16 15.5817 19.5817 12 24 12H167C171.418 12 175 15.5817 175 20V24C175 28.4183 171.418 32 167 32H24C19.5817 32 16 28.4183 16 24V20Z" fill="white"/>
<path d="M36.7454 23.7139L35.6789 24.7804L37.9364 27.0379C38.6556 27.7406 39.7101 26.6629 38.9909 25.9594L36.7454 23.7139Z" fill="white"/>
<path d="M32.8379 16.75C31.7439 16.75 30.6947 17.1846 29.9211 17.9582C29.1475 18.7318 28.7129 19.781 28.7129 20.875C28.7129 21.969 29.1475 23.0182 29.9211 23.7918C30.6947 24.5654 31.7439 25 32.8379 25C33.9319 25 34.9811 24.5654 35.7547 23.7918C36.5283 23.0182 36.9629 21.969 36.9629 20.875C36.9629 19.781 36.5283 18.7318 35.7547 17.9582C34.9811 17.1846 33.9319 16.75 32.8379 16.75ZM32.8379 18.25C33.5341 18.25 34.2018 18.5266 34.694 19.0188C35.1863 19.5111 35.4629 20.1788 35.4629 20.875C35.4629 21.5712 35.1863 22.2389 34.694 22.7312C34.2018 23.2234 33.5341 23.5 32.8379 23.5C32.1417 23.5 31.474 23.2234 30.9817 22.7312C30.4895 22.2389 30.2129 21.5712 30.2129 20.875C30.2129 20.1788 30.4895 19.5111 30.9817 19.0188C31.474 18.5266 32.1417 18.25 32.8379 18.25Z" fill="white"/>
<path opacity="0.2" d="M16 44C16 41.7909 17.7909 40 20 40H115C117.209 40 119 41.7909 119 44C119 46.2091 117.209 48 115 48H20C17.7909 48 16 46.2091 16 44Z" fill="white"/>
<path opacity="0.2" d="M16 56C16 53.7909 17.7909 52 20 52H171C173.209 52 175 53.7909 175 56C175 58.2091 173.209 60 171 60H20C17.7909 60 16 58.2091 16 56Z" fill="white"/>
<path opacity="0.4" d="M71 76C71 71.5817 74.5817 68 79 68H111C115.418 68 119 71.5817 119 76V80C119 84.4183 115.418 88 111 88H79C74.5817 88 71 84.4183 71 80V76Z" fill="white"/>
<path opacity="0.6" d="M127 76C127 71.5817 130.582 68 135 68H167C171.418 68 175 71.5817 175 76V80C175 84.4183 171.418 88 167 88H135C130.582 88 127 84.4183 127 80V76Z" fill="white"/>
<svg width="191" height="100" fill="none" version="1.1" viewBox="0 0 191 100" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<path d="m16 20c0-4.4183 3.5817-8 8-8h143c4.418 0 8 3.5817 8 8v4c0 4.4183-3.582 8-8 8h-143c-4.4183 0-8-3.5817-8-8v-4z" opacity=".6"/>
<path d="m36.745 23.714-1.0665 1.0665 2.2575 2.2575c0.7192 0.7027 1.7737-0.375 1.0545-1.0785l-2.2455-2.2455z"/>
<path d="m32.838 16.75c-1.094 0-2.1432 0.4346-2.9168 1.2082s-1.2082 1.8228-1.2082 2.9168 0.4346 2.1432 1.2082 2.9168 1.8228 1.2082 2.9168 1.2082 2.1432-0.4346 2.9168-1.2082 1.2082-1.8228 1.2082-2.9168-0.4346-2.1432-1.2082-2.9168-1.8228-1.2082-2.9168-1.2082zm0 1.5c0.6962 0 1.3639 0.2766 1.8561 0.7688 0.4923 0.4923 0.7689 1.16 0.7689 1.8562s-0.2766 1.3639-0.7689 1.8562c-0.4922 0.4922-1.1599 0.7688-1.8561 0.7688s-1.3639-0.2766-1.8562-0.7688c-0.4922-0.4923-0.7688-1.16-0.7688-1.8562s0.2766-1.3639 0.7688-1.8562c0.4923-0.4922 1.16-0.7688 1.8562-0.7688z"/>
<path d="m16 44c0-2.2091 1.7909-4 4-4h95c2.209 0 4 1.7909 4 4s-1.791 4-4 4h-95c-2.2091 0-4-1.7909-4-4z" opacity=".5"/>
<path d="m16 56c0-2.2091 1.7909-4 4-4h151c2.209 0 4 1.7909 4 4s-1.791 4-4 4h-151c-2.2091 0-4-1.7909-4-4z" opacity=".5"/>
<path d="m71 76c0-4.4183 3.5817-8 8-8h32c4.418 0 8 3.5817 8 8v4c0 4.4183-3.582 8-8 8h-32c-4.4183 0-8-3.5817-8-8v-4z" opacity=".6"/>
<path d="m127 76c0-4.4183 3.582-8 8-8h32c4.418 0 8 3.5817 8 8v4c0 4.4183-3.582 8-8 8h-32c-4.418 0-8-3.5817-8-8v-4z" opacity=".8"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

18
resources/icons/scalable/status/illustration-appearance-dark-style-square.svg
View file

@ -1,9 +1,11 @@
<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M16 14C16 12.8954 16.8954 12 18 12H173C174.105 12 175 12.8954 175 14V30C175 31.1046 174.105 32 173 32H18C16.8954 32 16 31.1046 16 30V14Z" fill="white"/>
<path d="M36.7454 23.7139L35.6789 24.7804L37.9364 27.0379C38.6556 27.7406 39.7101 26.6629 38.9909 25.9594L36.7454 23.7139Z" fill="white"/>
<path d="M32.8379 16.75C31.7439 16.75 30.6947 17.1846 29.9211 17.9582C29.1475 18.7318 28.7129 19.781 28.7129 20.875C28.7129 21.969 29.1475 23.0182 29.9211 23.7918C30.6947 24.5654 31.7439 25 32.8379 25C33.9319 25 34.9811 24.5654 35.7547 23.7918C36.5283 23.0182 36.9629 21.969 36.9629 20.875C36.9629 19.781 36.5283 18.7318 35.7547 17.9582C34.9811 17.1846 33.9319 16.75 32.8379 16.75ZM32.8379 18.25C33.5341 18.25 34.2018 18.5266 34.694 19.0188C35.1863 19.5111 35.4629 20.1788 35.4629 20.875C35.4629 21.5712 35.1863 22.2389 34.694 22.7312C34.2018 23.2234 33.5341 23.5 32.8379 23.5C32.1417 23.5 31.474 23.2234 30.9817 22.7312C30.4895 22.2389 30.2129 21.5712 30.2129 20.875C30.2129 20.1788 30.4895 19.5111 30.9817 19.0188C31.474 18.5266 32.1417 18.25 32.8379 18.25Z" fill="white"/>
<path opacity="0.2" d="M16 42C16 40.8954 16.8954 40 18 40H117C118.105 40 119 40.8954 119 42V46C119 47.1046 118.105 48 117 48H18C16.8954 48 16 47.1046 16 46V42Z" fill="white"/>
<path opacity="0.2" d="M16 54C16 52.8954 16.8954 52 18 52H173C174.105 52 175 52.8954 175 54V58C175 59.1046 174.105 60 173 60H18C16.8954 60 16 59.1046 16 58V54Z" fill="white"/>
<path opacity="0.4" d="M71 70C71 68.8954 71.8954 68 73 68H117C118.105 68 119 68.8954 119 70V86C119 87.1046 118.105 88 117 88H73C71.8954 88 71 87.1046 71 86V70Z" fill="white"/>
<path opacity="0.6" d="M127 70C127 68.8954 127.895 68 129 68H173C174.105 68 175 68.8954 175 70V86C175 87.1046 174.105 88 173 88H129C127.895 88 127 87.1046 127 86V70Z" fill="white"/>
<svg width="191" height="100" fill="none" version="1.1" viewBox="0 0 191 100" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<path d="m16 14c0-1.1046 0.8954-2 2-2h155c1.105 0 2 0.8954 2 2v16c0 1.1046-0.895 2-2 2h-155c-1.1046 0-2-0.8954-2-2v-16z" opacity=".6"/>
<path d="m36.745 23.714-1.0665 1.0665 2.2575 2.2575c0.7192 0.7027 1.7737-0.375 1.0545-1.0785l-2.2455-2.2455z"/>
<path d="m32.838 16.75c-1.094 0-2.1432 0.4346-2.9168 1.2082s-1.2082 1.8228-1.2082 2.9168 0.4346 2.1432 1.2082 2.9168 1.8228 1.2082 2.9168 1.2082 2.1432-0.4346 2.9168-1.2082 1.2082-1.8228 1.2082-2.9168-0.4346-2.1432-1.2082-2.9168-1.8228-1.2082-2.9168-1.2082zm0 1.5c0.6962 0 1.3639 0.2766 1.8561 0.7688 0.4923 0.4923 0.7689 1.16 0.7689 1.8562s-0.2766 1.3639-0.7689 1.8562c-0.4922 0.4922-1.1599 0.7688-1.8561 0.7688s-1.3639-0.2766-1.8562-0.7688c-0.4922-0.4923-0.7688-1.16-0.7688-1.8562s0.2766-1.3639 0.7688-1.8562c0.4923-0.4922 1.16-0.7688 1.8562-0.7688z"/>
<path d="m16 42c0-1.1046 0.8954-2 2-2h99c1.105 0 2 0.8954 2 2v4c0 1.1046-0.895 2-2 2h-99c-1.1046 0-2-0.8954-2-2v-4z" opacity=".5"/>
<path d="m16 54c0-1.1046 0.8954-2 2-2h155c1.105 0 2 0.8954 2 2v4c0 1.1046-0.895 2-2 2h-155c-1.1046 0-2-0.8954-2-2v-4z" opacity=".5"/>
<path d="m71 70c0-1.1046 0.8954-2 2-2h44c1.105 0 2 0.8954 2 2v16c0 1.1046-0.895 2-2 2h-44c-1.1046 0-2-0.8954-2-2v-16z" opacity=".6"/>
<path d="m127 70c0-1.1046 0.895-2 2-2h44c1.105 0 2 0.8954 2 2v16c0 1.1046-0.895 2-2 2h-44c-1.105 0-2-0.8954-2-2v-16z" opacity=".8"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before After
Before After