improv(appearance): checkmark for selected font

Also includes using spacing variables in more places, and some tweaks to more closely match designs in code (no visual changes), like the 8 padding around icons in `page_list_item`.
2024-10-10 19:35:24 +02:00 · 2024-10-10 19:35:24 +02:00 · 8d96ea362e
commit 8d96ea362e
parent 4cbc7da0d9
8 changed files with 78 additions and 42 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -1457,7 +1457,7 @@ dependencies = [
 [[package]]
 name = "cosmic-config"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "atomicwrites",
 "cosmic-config-derive",
@ -1479,7 +1479,7 @@ dependencies = [
 [[package]]
 name = "cosmic-config-derive"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "quote",
 "syn 1.0.109",
@ -1734,7 +1734,7 @@ dependencies = [
 [[package]]
 name = "cosmic-theme"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "almost",
 "cosmic-config",
@ -3085,7 +3085,7 @@ dependencies = [
 [[package]]
 name = "iced"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "dnd",
 "iced_accessibility",
@ -3104,7 +3104,7 @@ dependencies = [
 [[package]]
 name = "iced_accessibility"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "accesskit",
 "accesskit_unix",
@ -3113,7 +3113,7 @@ dependencies = [
 [[package]]
 name = "iced_core"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "bitflags 2.6.0",
 "dnd",
@ -3135,7 +3135,7 @@ dependencies = [
 [[package]]
 name = "iced_futures"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "futures",
 "iced_core",
@ -3148,7 +3148,7 @@ dependencies = [
 [[package]]
 name = "iced_graphics"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "bitflags 2.6.0",
 "bytemuck",
@ -3172,7 +3172,7 @@ dependencies = [
 [[package]]
 name = "iced_renderer"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "iced_graphics",
 "iced_tiny_skia",
@ -3184,7 +3184,7 @@ dependencies = [
 [[package]]
 name = "iced_runtime"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "dnd",
 "iced_accessibility",
@ -3198,7 +3198,7 @@ dependencies = [
 [[package]]
 name = "iced_sctk"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "enum-repr",
 "float-cmp",
@ -3224,7 +3224,7 @@ dependencies = [
 [[package]]
 name = "iced_style"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "iced_core",
 "once_cell",
@ -3234,7 +3234,7 @@ dependencies = [
 [[package]]
 name = "iced_tiny_skia"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "bytemuck",
 "cosmic-text",
@ -3251,7 +3251,7 @@ dependencies = [
 [[package]]
 name = "iced_wgpu"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "as-raw-xcb-connection",
 "bitflags 2.6.0",
@ -3280,7 +3280,7 @@ dependencies = [
 [[package]]
 name = "iced_widget"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "dnd",
 "iced_renderer",
@ -3297,7 +3297,7 @@ dependencies = [
 [[package]]
 name = "iced_winit"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "dnd",
 "iced_graphics",
@ -4109,7 +4109,7 @@ checksum = "561d97a539a36e26a9a5fad1ea11a3039a67714694aaa379433e580854bc3dc5"
 [[package]]
 name = "libcosmic"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
 "apply",
 "ashpd 0.9.1",
--- a/cosmic-settings/src/pages/desktop/appearance/font_config.rs
+++ b/cosmic-settings/src/pages/desktop/appearance/font_config.rs
@ -1,12 +1,15 @@
 // Copyright 2024 System76 <info@system76.com>
 // SPDX-License-Identifier: GPL-3.0-only

+use std::rc::Rc;
 use std::sync::Arc;

 use cosmic::{
    config::{CosmicTk, FontConfig},
    iced::Length,
    iced_core::text::Wrap,
+    iced_style::svg::Appearance,
+    theme,
    widget::{self, settings},
    Apply, Command, Element,
 };
@ -66,17 +69,35 @@ pub fn load_font_families() -> (Vec<Arc<str>>, Vec<Arc<str>>) {
 pub fn selection_context<'a>(
    families: &'a [Arc<str>],
    search: &'a str,
+    current_font: &'a str,
    system: bool,
 ) -> Element<'a, super::Message> {
+    let space_l = theme::active().cosmic().spacing.space_l;
+
+    let svg_accent = Rc::new(|theme: &cosmic::Theme| {
+        let color = theme.cosmic().accent_color().into();
+        Appearance { color: Some(color) }
+    });
+
    let search_input = widget::search_input(fl!("type-to-search"), search)
        .on_input(super::Message::FontSearch)
        .on_clear(super::Message::FontSearch(String::new()));

    let list = families.iter().fold(widget::list_column(), |list, family| {
+        let selected = &**family == current_font;
        list.add(
            settings::item_row(vec![
                widget::text::body(&**family).wrap(Wrap::Word).into(),
                widget::horizontal_space(Length::Fill).into(),
+                if selected {
+                    widget::icon::from_name("object-select-symbolic")
+                        .size(16)
+                        .icon()
+                        .style(cosmic::theme::Svg::Custom(svg_accent.clone()))
+                        .into()
+                } else {
+                    widget::horizontal_space(16).into()
+                },
            ])
            .apply(widget::container)
            .style(cosmic::theme::Container::List)
@ -88,7 +109,7 @@ pub fn selection_context<'a>(

    widget::column()
        .padding([2, 0])
-        .spacing(32)
+        .spacing(space_l)
        .push(search_input)
        .push(list)
        .into()
--- a/cosmic-settings/src/pages/desktop/appearance/mod.rs
+++ b/cosmic-settings/src/pages/desktop/appearance/mod.rs
@ -22,8 +22,7 @@ use cosmic::widget::{
    button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, radio, row,
    settings, spin_button, text, ColorPickerModel,
 };
-use cosmic::Apply;
-use cosmic::{command, Command, Element};
+use cosmic::{command, Apply, Command, Element};
 use cosmic_panel_config::CosmicPanelConfig;
 use cosmic_settings_page::Section;
 use cosmic_settings_page::{self as page, section};
@ -1466,8 +1465,9 @@ impl page::Page<crate::pages::Message> for Page {
                } else {
                    &self.font_filter
                };
+                let current_font = cosmic::config::interface_font().family.as_str();

-                font_config::selection_context(filter, &self.font_search, true)
+                font_config::selection_context(filter, &self.font_search, current_font, true)
                    .map(crate::pages::Message::Appearance)
            }

@ -1477,8 +1477,9 @@ impl page::Page<crate::pages::Message> for Page {
                } else {
                    &self.font_filter
                };
+                let current_font = cosmic::config::monospace_font().family.as_str();

-                font_config::selection_context(filter, &self.font_search, false)
+                font_config::selection_context(filter, &self.font_search, current_font, false)
                    .map(crate::pages::Message::Appearance)
            }

@ -1516,6 +1517,10 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
        .title(fl!("mode-and-colors"))
        .descriptions(descriptions)
        .view::<Page>(move |_binder, page, section| {
+            let Spacing {
+                space_xxs, space_s, ..
+            } = cosmic::theme::active().cosmic().spacing;
+
            let descriptions = &section.descriptions;
            let palette = &page.theme_builder.palette.as_ref();
            let cur_accent = page
@ -1539,7 +1544,7 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                                .on_press(Message::DarkMode(true)),
                                text::body(&descriptions[dark])
                            ]
-                            .spacing(8)
+                            .spacing(space_xxs)
                            .width(Length::FillPortion(1))
                            .align_items(cosmic::iced_core::Alignment::Center),
                            cosmic::iced::widget::column![
@ -1554,11 +1559,11 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                                .on_press(Message::DarkMode(false)),
                                text::body(&descriptions[light])
                            ]
-                            .spacing(8)
+                            .spacing(space_xxs)
                            .width(Length::FillPortion(1))
                            .align_items(cosmic::iced_core::Alignment::Center)
                        ]
-                        .spacing(48)
+                        .spacing(48) // TODO: dynamic spacing based on window width
                        .align_items(cosmic::iced_core::Alignment::Center)
                        .width(Length::Fixed(424.0)),
                    )
@ -1675,8 +1680,8 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                            scrollable::Properties::new()
                        ))
                    ]
-                    .padding([16, 24, 0, 24])
-                    .spacing(8),
+                    .padding([16, space_s, 0, space_s])
+                    .spacing(space_xxs),
                )
                .add(
                    settings::item::builder(&descriptions[app_bg]).control(
--- a/cosmic-settings/src/pages/desktop/panel/applets_inner.rs
+++ b/cosmic-settings/src/pages/desktop/panel/applets_inner.rs
@ -297,7 +297,7 @@ impl Page {
                        .on_press(msg_map(Message::AddApplet(info.clone())))
                        .into(),
                ])
-                .padding([0, 32, 0, 32])
+                .padding([0, spacing.space_l])
                .spacing(spacing.space_xs)
                .align_items(Alignment::Center),
            );
@ -571,8 +571,8 @@ pub fn lists<
            .spacing(spacing.space_xxs)
            .into(),
        ])
-        .padding([0, 16, 0, 16])
-        .spacing(12.0)
+        .padding([0, spacing.space_s])
+        .spacing(spacing.space_xs)
        .apply(Element::from)
        .map(msg_map)
    })
--- a/cosmic-settings/src/pages/input/keyboard/mod.rs
+++ b/cosmic-settings/src/pages/input/keyboard/mod.rs
@ -505,6 +505,8 @@ impl Page {
    }

    pub fn add_input_source_view(&self) -> Element<'_, crate::pages::Message> {
+        let space_l = theme::active().cosmic().spacing.space_l;
+
        let search = widget::search_input(fl!("type-to-search"), &self.input_source_search)
            .on_input(Message::InputSourceSearch)
            .on_clear(Message::InputSourceSearch(String::new()));
@ -528,7 +530,7 @@ impl Page {

        widget::column()
            .padding([2, 0])
-            .spacing(32)
+            .spacing(space_l)
            .push(search)
            .push(toggler)
            .push(list)
--- a/cosmic-settings/src/pages/input/keyboard/shortcuts/common.rs
+++ b/cosmic-settings/src/pages/input/keyboard/shortcuts/common.rs
@ -476,6 +476,13 @@ fn context_drawer(
    id: usize,
    show_action: bool,
 ) -> Element<ShortcutMessage> {
+    let cosmic::cosmic_theme::Spacing {
+        space_xxs,
+        space_xs,
+        space_l,
+        ..
+    } = theme::active().cosmic().spacing;
+
    let model = &shortcuts[id];

    let action = show_action.then(|| {
@ -489,7 +496,7 @@ fn context_drawer(
    });

    let bindings = model.bindings.iter().enumerate().fold(
-        widget::list_column().spacing(8),
+        widget::list_column().spacing(space_xxs),
        |section, (_, (bind_id, shortcut))| {
            let text: Cow<'_, str> = if !shortcut.editing && shortcut.binding.is_set() {
                Cow::Owned(shortcut.binding.to_string())
@ -503,7 +510,7 @@ fn context_drawer(
            .select_on_focus(true)
            .on_input(move |text| ShortcutMessage::InputBinding(bind_id, text))
            .on_submit(ShortcutMessage::SubmitBinding(bind_id))
-            .padding([0, 12])
+            .padding([0, space_xs])
            .id(shortcut.id.clone())
            .into();

@ -533,13 +540,13 @@ fn context_drawer(
    let button_container = widget::row::with_capacity(2)
        .push_maybe(reset_keybinding_button)
        .push(add_keybinding_button)
-        .spacing(12)
+        .spacing(space_xs)
        .apply(widget::container)
        .width(Length::Fill)
        .align_x(Horizontal::Right);

    widget::column::with_capacity(if show_action { 3 } else { 2 })
-        .spacing(32)
+        .spacing(space_l)
        .push_maybe(action)
        .push(bindings)
        .push(button_container)
--- a/cosmic-settings/src/pages/time/date.rs
+++ b/cosmic-settings/src/pages/time/date.rs
@ -306,6 +306,8 @@ impl Page {
    }

    fn timezone_context_view(&self) -> Element<'_, crate::pages::Message> {
+        let space_l = cosmic::theme::active().cosmic().spacing.space_l;
+
        let search = widget::search_input(fl!("type-to-search"), &self.timezone_search)
            .on_input(Message::TimezoneSearch)
            .on_clear(Message::TimezoneSearch(String::new()));
@ -322,7 +324,7 @@ impl Page {

        widget::column()
            .padding([2, 0])
-            .spacing(32)
+            .spacing(space_l)
            .push(search)
            .push(list)
            .apply(Element::from)
--- a/cosmic-settings/src/widget/mod.rs
+++ b/cosmic-settings/src/widget/mod.rs
@ -143,16 +143,15 @@ pub fn page_list_item<'a, Message: 'static + Clone>(
    }

    builder
-        .icon(icon::from_name(icon).size(20))
+        .icon(container(icon::from_name(icon).size(20)).padding(8))
        .control(
            row::with_capacity(2)
-                .padding([8, 0]) // fixed value to set minimum height to 36
-                .spacing(space_xxs)
                .push(text::body(info))
-                .push(icon::from_name("go-next-symbolic").size(20)),
+                .push(container(icon::from_name("go-next-symbolic").size(20)).padding(8))
+                .align_items(alignment::Alignment::Center),
        )
-        .padding([0, space_xxs])
-        .spacing(space_s)
+        .padding(0)
+        .spacing(space_xxs)
        .apply(container)
        .padding([space_s, space_m])
        .align_x(alignment::Horizontal::Center)