feat(appearance): interface density

Author: git-f0x

cosmic-settings/src/pages/desktop/appearance.rs

@@ -11,15 +11,16 @@ use cosmic::config::CosmicTk;
 use cosmic::cosmic_config::{Config, ConfigSet, CosmicConfigEntry};
 use cosmic::cosmic_theme::palette::{FromColor, Hsv, Srgb, Srgba};
 use cosmic::cosmic_theme::{
-    CornerRadii, Theme, ThemeBuilder, ThemeMode, DARK_THEME_BUILDER_ID, LIGHT_THEME_BUILDER_ID,
+    CornerRadii, Spacing, Theme, ThemeBuilder, ThemeMode, DARK_THEME_BUILDER_ID,
+    LIGHT_THEME_BUILDER_ID,
 };
 use cosmic::iced_core::{alignment, Background, Color, Length};
 use cosmic::iced_widget::scrollable;
 use cosmic::prelude::CollectionWidget;
 use cosmic::widget::icon::{self, from_name, icon};
 use cosmic::widget::{
-    button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, row, settings,
-    spin_button, text, ColorPickerModel,
+    button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, radio, row,
+    settings, spin_button, text, ColorPickerModel,
 };
 use cosmic::Apply;
 use cosmic::{command, Command, Element};
@@ -83,6 +84,7 @@ pub struct Page {
     interface_text: ColorPickerModel,
     control_component: ColorPickerModel,
     roundness: Roundness,
+    density: Density,
 
     icon_theme_active: Option<usize>,
     icon_themes: IconThemes,
@@ -169,6 +171,7 @@ impl
             theme_builder_needs_update: false,
             context_view: None,
             roundness: theme_builder.corner_radii.into(),
+            density: theme_builder.spacing.into(),
             custom_accent: ColorPickerModel::new(
                 &*HEX,
                 &*RGB,
@@ -286,6 +289,7 @@ pub enum Message {
     ControlComponent(ColorPickerUpdate),
     CustomAccent(ColorPickerUpdate),
     DarkMode(bool),
+    Density(Density),
     Entered((IconThemes, IconHandles)),
     ExperimentalContextDrawer,
     ExportError,
@@ -315,6 +319,13 @@ pub enum Roundness {
     Square,
 }
 
+#[derive(Debug, Clone, Copy, Eq, PartialEq)]
+pub enum Density {
+    Comfortable,
+    Compact,
+    Spacious,
+}
+
 impl From<Roundness> for CornerRadii {
     fn from(value: Roundness) -> Self {
         match value {
@@ -358,6 +369,61 @@ impl From<CornerRadii> for Roundness {
     }
 }
 
+impl From<Density> for Spacing {
+    fn from(value: Density) -> Self {
+        match value {
+            Density::Comfortable => Spacing {
+                space_none: 0,
+                space_xxxs: 4,
+                space_xxs: 8,
+                space_xs: 12,
+                space_s: 16,
+                space_m: 24,
+                space_l: 32,
+                space_xl: 48,
+                space_xxl: 64,
+                space_xxxl: 128,
+            },
+            Density::Compact => Spacing {
+                space_none: 0,
+                space_xxxs: 4,
+                space_xxs: 8,
+                space_xs: 10,
+                space_s: 12,
+                space_m: 16,
+                space_l: 24,
+                space_xl: 32,
+                space_xxl: 48,
+                space_xxxl: 72,
+            },
+            Density::Spacious => Spacing {
+                space_none: 0,
+                space_xxxs: 4,
+                space_xxs: 8,
+                space_xs: 16,
+                space_s: 20,
+                space_m: 32,
+                space_l: 40,
+                space_xl: 56,
+                space_xxl: 72,
+                space_xxxl: 144,
+            },
+        }
+    }
+}
+
+impl From<Spacing> for Density {
+    fn from(value: Spacing) -> Self {
+        if (value.space_m - 32) < 1 {
+            Self::Spacious
+        } else if (value.space_m - 24) < 1 {
+            Self::Comfortable
+        } else {
+            Self::Compact
+        }
+    }
+}
+
 impl Page {
     /// Syncs changes for dark and light theme.
     /// Roundness and window management settings should be consistent between dark / light mode.
@@ -420,6 +486,17 @@ impl Page {
                 tracing::error!(?err, "Error setting corner radii");
             }
         }
+        if theme_builder.spacing != self.theme_builder.spacing {
+            if let Err(err) =
+                theme_builder.set_spacing(&other_builder_config, self.theme_builder.spacing)
+            {
+                tracing::error!(?err, "Error setting spacing");
+            }
+
+            if let Err(err) = theme.set_spacing(&other_theme_config, self.theme_builder.spacing) {
+                tracing::error!(?err, "Error setting spacing");
+            }
+        }
 
         Ok(())
     }
@@ -590,6 +667,13 @@ impl Page {
                 Self::update_panel_radii(r);
                 Command::none()
             }
+            Message::Density(d) => {
+                needs_sync = true;
+                self.density = d;
+                self.theme_builder.spacing = self.density.into();
+                self.theme_builder_needs_update = true;
+                Command::none()
+            }
             Message::Entered((icon_themes, icon_handles)) => {
                 *self = Self::default();
 
@@ -1011,6 +1095,7 @@ impl page::Page<crate::pages::Message> for Page {
         Some(vec![
             sections.insert(mode_and_colors()),
             sections.insert(style()),
+            sections.insert(interface_density()),
             sections.insert(window_management()),
             sections.insert(experimental()),
             sections.insert(reset_button()),
@@ -1456,6 +1541,49 @@ pub fn style() -> Section<crate::pages::Message> {
         })
 }
 
+pub fn interface_density() -> Section<crate::pages::Message> {
+    let mut descriptions = Slab::new();
+
+    let comfortable = descriptions.insert(fl!("interface-density", "comfortable"));
+    let compact = descriptions.insert(fl!("interface-density", "compact"));
+    let spacious = descriptions.insert(fl!("interface-density", "spacious"));
+
+    Section::default()
+        .title(fl!("interface-density"))
+        .descriptions(descriptions)
+        .view::<Page>(move |_binder, page, section| {
+            let descriptions = &section.descriptions;
+
+            settings::view_section(&section.title)
+                .add(settings::item_row(vec![radio(
+                    text::body(&descriptions[comfortable]),
+                    Density::Comfortable,
+                    Some(page.density),
+                    Message::Density,
+                )
+                .width(Length::Fill)
+                .into()]))
+                .add(settings::item_row(vec![radio(
+                    text::body(&descriptions[compact]),
+                    Density::Compact,
+                    Some(page.density),
+                    Message::Density,
+                )
+                .width(Length::Fill)
+                .into()]))
+                .add(settings::item_row(vec![radio(
+                    text::body(&descriptions[spacious]),
+                    Density::Spacious,
+                    Some(page.density),
+                    Message::Density,
+                )
+                .width(Length::Fill)
+                .into()]))
+                .apply(Element::from)
+                .map(crate::pages::Message::Appearance)
+        })
+}
+
 #[allow(clippy::too_many_lines)]
 pub fn window_management() -> Section<crate::pages::Message> {
     let mut descriptions = Slab::new();

i18n/en/cosmic_settings.ftl

@@ -103,7 +103,11 @@ style = Style
     .slightly-round = Slightly round
     .square = Square
 
-# interface density left out for now
+interface-density = Interface Density
+    .comfortable = Comfortable
+    .compact = Compact
+    .spacious = Spacious
+
 window-management-appearance = Window Management
     .active-hint = Active window hint size
     .gaps = Gaps around tiled windows