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

improv: make popover styling consistent

Browse source 
Makes all popovers use the same styling, with hover highlights.
This commit is contained in:
Vukašin Vojinović 2025-11-12 21:34:47 +01:00 • committed by Jacob Kauffmann
parent a73f8c85db
commit 7a1a3115d8
11 changed files with 98 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cosmic-settings/src/app.rs
View file

@ -400,7 +400,7 @@ impl cosmic::Application for SettingsApp {
crate::pages::Message::AccessibilityShortcuts(message) => {
if let Some(page) = self
.pages
.page_mut::<input::keyboard::shortcuts::accessibility::Page>()
.page_mut::<input::keyboard::shortcuts::accessibility::Page>()
{
return page.update(message).map(Into::into);
}

44
cosmic-settings/src/pages/bluetooth/mod.rs
View file

@ -238,7 +238,7 @@ impl page::Page<crate::pages::Message> for Page {
let control = widget::column::with_capacity(2)
.push(description)
.push(pin)
.spacing(theme::active().cosmic().space_xxs());
.spacing(theme::spacing().space_xxs);
let confirm_button =
widget::button::suggested(fl!("confirm")).on_press(Message::PinConfirm);
@ -783,12 +783,11 @@ fn status() -> Section<crate::pages::Message> {
}
fn popup_button(message: Option<Message>, text: &str) -> Element<'_, Message> {
let theme = theme::active();
let theme = theme.cosmic();
let spacing = theme::spacing();
widget::text::body(text)
.align_y(Alignment::Center)
.apply(widget::button::custom)
.padding([theme.space_xxxs(), theme.space_xs()])
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(theme::Button::MenuItem)
.on_press_maybe(message)
@ -839,24 +838,23 @@ fn connected_devices() -> Section<crate::pages::Message> {
)
.position(widget::popover::Position::Bottom)
.on_close(Message::PopupDevice(None))
.popup({
widget::container(
widget::column()
.push_maybe(device.is_connected().then(|| {
popup_button(
Some(Message::DisconnectDevice(path.clone())),
&descriptions[device_disconnect],
)
}))
.push(popup_button(
Some(Message::ForgetDevice(path.clone())),
&descriptions[device_forget],
)),
)
.width(Length::Fixed(200.0))
.padding(theme::active().cosmic().space_xxxs())
.class(theme::Container::Dialog)
})
.popup(
widget::column()
.push_maybe(device.is_connected().then(|| {
popup_button(
Some(Message::DisconnectDevice(path.clone())),
&descriptions[device_disconnect],
)
}))
.push(popup_button(
Some(Message::ForgetDevice(path.clone())),
&descriptions[device_forget],
))
.width(Length::Fixed(200.0))
.apply(widget::container)
.padding(theme::spacing().space_xxs)
.class(theme::Container::Dropdown),
)
.into()
} else {
widget::button::icon(widget::icon::from_name("view-more-symbolic"))
@ -983,7 +981,7 @@ fn multiple_adapter() -> Section<crate::pages::Message> {
.size(20)
.into(),
widget::horizontal_space()
.width(theme::active().cosmic().space_xxs())
.width(theme::spacing().space_xxs)
.into(),
text(&adapter.alias).wrapping(Wrapping::Word).into(),
widget::horizontal_space().into(),

2
cosmic-settings/src/pages/desktop/appearance/drawer.rs
View file

@ -441,7 +441,7 @@ impl Content {
})
),
// Icon theme previews
widget::column::with_children(vec![
widget::column::with_children([
text::heading(&*ICON_THEME).into(),
flex_row(
self.icon_themes

2
cosmic-settings/src/pages/desktop/appearance/icon_themes.rs
View file

@ -35,7 +35,7 @@ pub fn button(
cosmic::widget::column()
.push(
cosmic::widget::button::custom_image_button(
cosmic::widget::column::with_children(vec![
cosmic::widget::column::with_children([
cosmic::widget::row()
.extend(
handles

8
cosmic-settings/src/pages/desktop/panel/applets_inner.rs
View file

@ -439,8 +439,8 @@ pub fn lists<
return Element::from(text::body(fl!("unknown")));
};
column::with_children(vec![
column::with_children(vec![
column::with_children([
column::with_children([
text::body(fl!("start-segment")).into(),
AppletReorderList::new(
config
@ -471,7 +471,7 @@ pub fn lists<
])
.spacing(space_xxs)
.into(),
column::with_children(vec![
column::with_children([
text::body(fl!("center-segment")).into(),
AppletReorderList::new(
config
@ -501,7 +501,7 @@ pub fn lists<
])
.spacing(space_xxs)
.into(),
column::with_children(vec![
column::with_children([
text::body(fl!("end-segment")).into(),
AppletReorderList::new(
config

58
cosmic-settings/src/pages/input/keyboard/mod.rs
View file

@ -9,8 +9,7 @@ use cosmic::{
Apply, Element, Task,
app::{ContextDrawer, context_drawer},
cosmic_config::{self, ConfigSet},
iced::{Alignment, Color, Length},
iced_core::Border,
iced::{Alignment, Length},
theme,
widget::{self, ListColumn, button, container, icon, radio, row, settings},
};
@ -166,23 +165,19 @@ fn popover_menu_row(
label: String,
message: impl Fn(DefaultKey) -> SourceContext + 'static,
) -> cosmic::Element<'static, Message> {
let spacing = theme::spacing();
widget::text::body(label)
.apply(widget::container)
.class(cosmic::theme::Container::custom(|theme| {
widget::container::Style {
background: None,
..container::Catalog::style(theme, &cosmic::theme::Container::List)
}
}))
.align_y(Alignment::Center)
.apply(button::custom)
.on_press(())
.class(theme::Button::Transparent)
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(theme::Button::MenuItem)
.on_press(Message::SourceContext(message(id)))
.apply(Element::from)
.map(move |()| Message::SourceContext(message(id)))
}
fn popover_menu(id: DefaultKey) -> cosmic::Element<'static, Message> {
widget::column::with_children(vec![
widget::column::with_children([
popover_menu_row(
id,
fl!("keyboard-sources", "move-up"),
@ -193,7 +188,10 @@ fn popover_menu(id: DefaultKey) -> cosmic::Element<'static, Message> {
fl!("keyboard-sources", "move-down"),
SourceContext::MoveDown,
),
cosmic::widget::divider::horizontal::default().into(),
widget::divider::horizontal::default()
.apply(widget::container)
.padding(8)
.into(),
popover_menu_row(
id,
fl!("keyboard-sources", "settings"),
@ -206,25 +204,10 @@ fn popover_menu(id: DefaultKey) -> cosmic::Element<'static, Message> {
),
popover_menu_row(id, fl!("keyboard-sources", "remove"), SourceContext::Remove),
])
.padding([2, 8])
.width(Length::Shrink)
.height(Length::Shrink)
.apply(cosmic::widget::container)
.class(cosmic::theme::Container::custom(|theme| {
let cosmic = theme.cosmic();
let background = &cosmic.background;
container::Style {
icon_color: Some(background.on.into()),
text_color: Some(background.on.into()),
background: Some(Color::from(background.base).into()),
border: Border {
color: background.component.divider.into(),
width: 1.0,
radius: cosmic.corner_radii.radius_s.into(),
},
shadow: Default::default(),
}
}))
.width(Length::Fixed(200.0))
.apply(widget::container)
.padding(theme::spacing().space_xxs)
.class(theme::Container::Dropdown)
.into()
}
@ -236,7 +219,8 @@ fn popover_button(id: DefaultKey, expanded: bool) -> cosmic::Element<'static, Me
.on_press(on_press);
if expanded {
cosmic::widget::popover(button)
widget::popover(button)
.position(widget::popover::Position::Bottom)
.popup(popover_menu(id))
.on_close(Message::ExpandInputSourcePopover(None))
.into()
@ -713,7 +697,7 @@ fn input_sources() -> Section<crate::pages::Message> {
.on_press(Message::ShowInputSourcesContext);
widget::column::with_capacity(2)
.spacing(cosmic::theme::spacing().space_xxs)
.spacing(theme::spacing().space_xxs)
.push(section)
.push(
widget::container(add_input_source)
@ -816,7 +800,7 @@ fn keyboard_typing_assist() -> Section<crate::pages::Message> {
row::with_capacity(3)
.align_y(Alignment::Center)
.spacing(cosmic::theme::spacing().space_s)
.spacing(theme::spacing().space_s)
.push(widget::text::body(&descriptions[short]))
.push(delay_slider)
.push(widget::text::body(&descriptions[long]))
@ -836,7 +820,7 @@ fn keyboard_typing_assist() -> Section<crate::pages::Message> {
row::with_capacity(3)
.align_y(Alignment::Center)
.spacing(cosmic::theme::spacing().space_s)
.spacing(theme::spacing().space_s)
.push(widget::text::body(&descriptions[slow]))
.push(rate_slider)
.push(widget::text::body(&descriptions[fast]))

4
cosmic-settings/src/pages/input/keyboard/shortcuts/mod.rs
View file

@ -16,13 +16,13 @@ pub mod tiling;
use cosmic::app::ContextDrawer;
use cosmic::iced::Length;
use cosmic::widget::{self, icon, settings, text};
use cosmic::{theme, Apply, Element, Task};
use cosmic::{Apply, Element, Task, theme};
use cosmic_config::ConfigGet;
use cosmic_settings_config::Binding;
use cosmic_settings_config::shortcuts::action::{
Direction, FocusDirection, Orientation, ResizeDirection,
};
use cosmic_settings_config::shortcuts::{self, Action, Shortcuts};
use cosmic_settings_config::Binding;
use cosmic_settings_page::Section;
use cosmic_settings_page::{self as page, section};
use itertools::Itertools;

16
cosmic-settings/src/pages/networking/vpn/mod.rs
View file

@ -826,8 +826,7 @@ fn devices_view() -> Section<crate::pages::Message> {
return cosmic::widget::column().into();
};
let theme = cosmic::theme::active();
let spacing = &theme.cosmic().spacing;
let spacing = cosmic::theme::spacing();
let mut view = widget::column::with_capacity(4);
@ -883,7 +882,7 @@ fn devices_view() -> Section<crate::pages::Message> {
widget::popover(view_more_button.on_press(Message::ViewMore(None)))
.position(widget::popover::Position::Bottom)
.on_close(Message::ViewMore(None))
.popup({
.popup(
widget::column()
.push_maybe(is_connected.then(|| {
popup_button(
@ -901,9 +900,9 @@ fn devices_view() -> Section<crate::pages::Message> {
))
.width(Length::Fixed(200.0))
.apply(widget::container)
.padding(1)
.class(cosmic::style::Container::Dropdown)
})
.padding(cosmic::theme::spacing().space_xxs)
.class(cosmic::theme::Container::Dropdown),
)
.apply(|e| Some(Element::from(e)))
} else {
view_more_button
@ -937,12 +936,11 @@ fn devices_view() -> Section<crate::pages::Message> {
}
fn popup_button(message: Message, text: &str) -> Element<'_, Message> {
let theme = cosmic::theme::active();
let theme = theme.cosmic();
let spacing = cosmic::theme::spacing();
widget::text::body(text)
.align_y(Alignment::Center)
.apply(widget::button::custom)
.padding([theme.space_xxxs(), theme.space_xs()])
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(cosmic::theme::Button::MenuItem)
.on_press(message)

21
cosmic-settings/src/pages/networking/wifi.rs
View file

@ -225,9 +225,7 @@ impl page::Page<crate::pages::Message> for Page {
fn context_drawer(&self) -> Option<ContextDrawer<'_, crate::pages::Message>> {
let drawer = self.qr_drawer.as_ref()?;
let theme = cosmic::theme::active();
let spacing = &theme.cosmic().spacing;
let spacing = cosmic::theme::spacing();
let qr_section = if let Some(ref qr_data) = self.qr_code_data {
widget::container(widget::qr_code(qr_data).cell_size(5)).center_x(Length::Fill)
@ -749,8 +747,7 @@ fn devices_view() -> Section<crate::pages::Message> {
return cosmic::widget::column().into();
};
let theme = cosmic::theme::active();
let spacing = &theme.cosmic().spacing;
let spacing = cosmic::theme::spacing();
let wifi_enable = widget::settings::item::builder(&section.descriptions[wifi_txt])
.control(widget::toggler(state.wifi_enabled).on_toggle(Message::WiFiEnable));
@ -851,7 +848,7 @@ fn devices_view() -> Section<crate::pages::Message> {
widget::popover(view_more_button.on_press(Message::ViewMore(None)))
.position(widget::popover::Position::Bottom)
.on_close(Message::ViewMore(None))
.popup({
.popup(
widget::column()
.push_maybe(is_connected.then(|| {
popup_button(
@ -875,10 +872,11 @@ fn devices_view() -> Section<crate::pages::Message> {
&section.descriptions[forget_txt],
)
}))
.width(Length::Fixed(170.0))
.width(Length::Fixed(200.0))
.apply(widget::container)
.class(cosmic::style::Container::Dialog)
})
.padding(cosmic::theme::spacing().space_xxs)
.class(cosmic::theme::Container::Dropdown),
)
.apply(|e| Some(Element::from(e)))
} else if is_known {
view_more_button
@ -938,12 +936,11 @@ fn is_connected(state: &NetworkManagerState, network: &AccessPoint) -> bool {
}
fn popup_button(message: Message, text: &str) -> Element<'_, Message> {
let theme = cosmic::theme::active();
let theme = theme.cosmic();
let spacing = cosmic::theme::spacing();
widget::text::body(text)
.align_y(Alignment::Center)
.apply(widget::button::custom)
.padding([theme.space_xxxs(), theme.space_xs()])
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(cosmic::theme::Button::MenuItem)
.on_press(message)

18
cosmic-settings/src/pages/networking/wired.rs
View file

@ -449,7 +449,7 @@ impl Page {
fn device_view<'a>(
&'a self,
spacing: &cosmic::cosmic_theme::Spacing,
spacing: cosmic::cosmic_theme::Spacing,
nm_state: &'a NmState,
connect_txt: &'a str,
connected_txt: &'a str,
@ -509,7 +509,7 @@ impl Page {
widget::popover(view_more_button.on_press(Message::ViewMore(None)))
.position(widget::popover::Position::Bottom)
.on_close(Message::ViewMore(None))
.popup({
.popup(
widget::column()
.push_maybe(is_connected.then(|| {
popup_button(
@ -529,9 +529,9 @@ impl Page {
}))
.width(Length::Fixed(200.0))
.apply(widget::container)
.padding(spacing.space_xxxs)
.class(cosmic::style::Container::Dialog)
})
.padding(cosmic::theme::spacing().space_xxs)
.class(cosmic::theme::Container::Dropdown),
)
.apply(|e| Some(Element::from(e)))
} else {
view_more_button
@ -576,8 +576,7 @@ fn devices_view() -> Section<crate::pages::Message> {
return cosmic::widget::column().into();
};
let theme = cosmic::theme::active();
let spacing = &theme.cosmic().spacing;
let spacing = cosmic::theme::spacing();
let mut view = widget::column::with_capacity(4);
@ -611,12 +610,11 @@ fn devices_view() -> Section<crate::pages::Message> {
}
fn popup_button(message: Message, text: &str) -> Element<'_, Message> {
let theme = cosmic::theme::active();
let theme = theme.cosmic();
let spacing = cosmic::theme::spacing();
widget::text::body(text)
.align_y(Alignment::Center)
.apply(widget::button::custom)
.padding([theme.space_xxxs(), theme.space_xs()])
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(cosmic::theme::Button::MenuItem)
.on_press(message)

56
cosmic-settings/src/pages/time/region.rs
View file

@ -6,10 +6,10 @@ use std::rc::Rc;
use std::sync::Arc;
use cosmic::app::{ContextDrawer, context_drawer};
use cosmic::iced::{Alignment, Border, Color, Length};
use cosmic::iced::{Alignment, Length};
use cosmic::iced_core::text::Wrapping;
use cosmic::widget::{self, button, container};
use cosmic::{Apply, Element, theme};
use cosmic::widget::{self, button};
use cosmic::{Apply, Element};
use cosmic_config::{ConfigGet, ConfigSet};
use cosmic_settings_page::Section;
use cosmic_settings_page::{self as page, section};
@ -817,6 +817,7 @@ fn popover_button(id: usize, expanded: bool) -> Element<'static, Message> {
if expanded {
widget::popover(button)
.position(widget::popover::Position::Bottom)
.popup(popover_menu(id))
.on_close(Message::ExpandLanguagePopover(None))
.into()
@ -826,38 +827,31 @@ fn popover_button(id: usize, expanded: bool) -> Element<'static, Message> {
}
fn popover_menu(id: usize) -> Element<'static, Message> {
widget::column::with_children(vec![
widget::column::with_children([
popover_menu_row(
id,
fl!("keyboard-sources", "move-up"),
SourceContext::MoveUp,
),
cosmic::widget::divider::horizontal::default().into(),
widget::divider::horizontal::default()
.apply(widget::container)
.padding([0, 8])
.into(),
popover_menu_row(
id,
fl!("keyboard-sources", "move-down"),
SourceContext::MoveDown,
),
cosmic::widget::divider::horizontal::default().into(),
widget::divider::horizontal::default()
.apply(widget::container)
.padding([0, 8])
.into(),
popover_menu_row(id, fl!("keyboard-sources", "remove"), SourceContext::Remove),
])
.padding(8)
.width(Length::Shrink)
.height(Length::Shrink)
.apply(cosmic::widget::container)
.class(cosmic::theme::Container::custom(|theme| {
let cosmic = theme.cosmic();
container::Style {
icon_color: Some(theme.cosmic().background.on.into()),
text_color: Some(theme.cosmic().background.on.into()),
background: Some(Color::from(theme.cosmic().background.base).into()),
border: Border {
radius: cosmic.corner_radii.radius_m.into(),
..Default::default()
},
shadow: Default::default(),
}
}))
.width(Length::Fixed(200.0))
.apply(widget::container)
.padding(cosmic::theme::spacing().space_xxs)
.class(cosmic::theme::Container::Dropdown)
.into()
}
@ -866,19 +860,15 @@ fn popover_menu_row(
label: String,
message: impl Fn(usize) -> SourceContext + 'static,
) -> cosmic::Element<'static, Message> {
let spacing = cosmic::theme::spacing();
widget::text::body(label)
.apply(widget::container)
.class(cosmic::theme::Container::custom(|theme| {
widget::container::Style {
background: None,
..widget::container::Catalog::style(theme, &cosmic::theme::Container::List)
}
}))
.align_y(Alignment::Center)
.apply(button::custom)
.on_press(())
.class(theme::Button::Transparent)
.padding([spacing.space_xxxs, spacing.space_xs])
.width(Length::Fill)
.class(cosmic::theme::Button::MenuItem)
.on_press(Message::SourceContext(message(id)))
.apply(Element::from)
.map(move |()| Message::SourceContext(message(id)))
}
pub async fn set_locale(