From 6f5e0b4a79410759f3974b1f902b774bec9ea47a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 1 Oct 2026 16:52:10 -0700 Subject: [PATCH 1/3] Build with Granite 9 --- .github/workflows/main.yml | 2 +- README.md | 2 +- meson.build | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index a3486b19..d12ad463 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -23,7 +23,7 @@ jobs: - name: Install Dependencies run: | apt update - apt install -y libgee-0.8-dev libglib2.0-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev meson sassc valac + apt install -y libgee-0.8-dev libglib2.0-dev libgranite-9-dev libgtk-4-dev libadwaita-1-dev meson sassc valac - name: Build run: | meson build -Dexample=true diff --git a/README.md b/README.md index 6b31d304..5539dfa9 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ You'll need the following dependencies: * libgee-0.8-dev * libglib2.0-dev (>= 2.76) -* libgranite-7-dev (>= 7.7.0) +* libgranite-9-dev * libgtk-4-dev * libadwaita-1-dev (>= 1.4) * meson (>= 0.57.0) diff --git a/meson.build b/meson.build index ec92ed83..ac97fac7 100644 --- a/meson.build +++ b/meson.build @@ -36,7 +36,7 @@ gio_unix_dep = dependency('gio-unix-2.0') gmodule_dep = dependency('gmodule-2.0', version: '>=2.76') gtk_dep = dependency('gtk4', version: '>=3.10') gee_dep = dependency('gee-0.8') -granite_dep = dependency('granite-7', version: '>=7.7.0') +granite_dep = dependency('granite-9', version: '>=7.7.0') adwaita_dep = dependency('libadwaita-1', version: '>=1.4') m_dep = meson.get_compiler('c').find_library('m', required : false) From 2db334bbcacb4d831b5dab21eb1057f00f0cbb75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 29 Oct 2026 12:19:43 -0700 Subject: [PATCH 2/3] Styles: Sidebar --- data/styles/SettingsSidebar.scss | 50 +++++++------------------- lib/SettingsSidebarRow.vala | 62 +++++++++----------------------- src/SearchView.vala | 4 +-- 3 files changed, 32 insertions(+), 84 deletions(-) diff --git a/data/styles/SettingsSidebar.scss b/data/styles/SettingsSidebar.scss index ae35e7be..3f3ffbc5 100644 --- a/data/styles/SettingsSidebar.scss +++ b/data/styles/SettingsSidebar.scss @@ -1,6 +1,5 @@ settingssidebar { list { - background: inherit; min-width: rem(200px); row, @@ -8,63 +7,40 @@ settingssidebar { padding: rem(6px); } - row { - overlay { - // IconSize.LARGE + padding - min-width: calc(32px + #{rem(6px)}); - } - - overlay:dir(ltr) { - margin-right: rem(6px); - } - - overlay:dir(rtl) { - margin-left: rem(6px); - } + row overlay { + // IconSize.LARGE + padding + min-width: calc(32px + 0.5rem); } } toolbarview { revealer.bottom-bar { - color: #{'mix(@text_color, @insensitive_bg_color, 0.15)'}; + color: color-mix(in oklab, var(--fg-color) 85%, var(--bg-level-3)); &.raised { - box-shadow: 0 -1px #{'alpha(@highlight_color, 0.2)'}; - background-color: rgba(black, 0.01); + box-shadow: 0 -1px color-mix(in srgb, var(--highlight-color) 20%, transparent); + background-color: color-mix(in srgb, black 1%, transparent); background-image: linear-gradient( to bottom, - #{'@borders'} 1px, - rgba(black, 0.07) 1px, - transparent rem(3px) + var(--border-color) 1px, + color-mix(in srgb, black 7%, transparent) 1px, + transparent 0.25rem ); } &.raised.border { - background: rgba(black, 0.03); + background: color-mix(in srgb, black 3%, transparent); box-shadow: - 0 -1px #{'@borders'}, - inset 0 1px #{'alpha(@highlight_color, 0.3)'}; + 0 -1px var(--border-color), + inset 0 1px color-mix(in srgb, var(--highlight-color) 30%, transparent); } actionbar { - padding: rem(6px); - box.start > label { - margin: rem(6px); + margin: 0.5rem; font-weight: 500; } - - box.end > switch { - slider, - trough { - min-height: 1.5em; - } - - slider { - min-width: 1.5em; - } - } } } } diff --git a/lib/SettingsSidebarRow.vala b/lib/SettingsSidebarRow.vala index 2fae5fba..13150474 100644 --- a/lib/SettingsSidebarRow.vala +++ b/lib/SettingsSidebarRow.vala @@ -27,35 +27,15 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow { } public string? header { get; set; } + public string? status { get; set; } + public string title { get; set; } public unowned SettingsPage page { get; construct; } public Icon icon { get; set; } - public string status { - set { - status_label.label = value; - status_label.visible = true; - update_property (Gtk.AccessibleProperty.DESCRIPTION, value, -1); - } - } - - public string title { - get { - return _title; - } - set { - _title = value; - title_label.label = value; - update_property (Gtk.AccessibleProperty.LABEL, value, -1); - } - } - private Gtk.Widget display_widget; private Gtk.Image status_icon; - private Gtk.Label status_label; - private Gtk.Label title_label; - private string _title; public SettingsSidebarRow (SettingsPage page) { Object ( @@ -64,27 +44,19 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow { } construct { - title_label = new Gtk.Label (page.title) { - ellipsize = Pango.EllipsizeMode.END, - vexpand = true, - xalign = 0 + var header_label = new Granite.HeaderLabel (page.title) { + ellipsize = END, + mnemonic_widget = this, + size = H3, + valign = CENTER, + vexpand = true }; - title_label.add_css_class (Granite.STYLE_CLASS_H3_LABEL); status_icon = new Gtk.Image () { halign = Gtk.Align.END, valign = Gtk.Align.END }; - status_label = new Gtk.Label (null) { - use_markup = true, - ellipsize = Pango.EllipsizeMode.END, - vexpand = true, - xalign = 0, - visible = false - }; - status_label.add_css_class (Granite.CssClass.SMALL); - if (!page.with_avatar) { display_widget = new Gtk.Image () { icon_size = LARGE @@ -100,23 +72,23 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow { page.bind_property ("title", display_widget, "text", SYNC_CREATE); } - var overlay = new Gtk.Overlay (); - overlay.set_child (display_widget); + var overlay = new Gtk.Overlay () { + child = display_widget + }; overlay.add_overlay (status_icon); - var grid = new Gtk.Grid (); - grid.attach (overlay, 0, 0, 1, 2); - grid.attach (title_label, 1, 0); - grid.attach (status_label, 1, 1); + var box = new Granite.Box (HORIZONTAL, HALF); + box.append (overlay); + box.append (header_label); accessible_role = TAB; - child = grid; + child = box; header = page.header; page.bind_property ("icon", this, "icon", BindingFlags.DEFAULT); - page.bind_property ("status", this, "status", BindingFlags.DEFAULT); + page.bind_property ("status", header_label, "secondary-text", BindingFlags.DEFAULT); page.bind_property ("status-type", this, "status-type", BindingFlags.DEFAULT); - page.bind_property ("title", this, "title", BindingFlags.DEFAULT); + page.bind_property ("title", header_label, "label", BindingFlags.DEFAULT); if (page.status != null) { status = page.status; diff --git a/src/SearchView.vala b/src/SearchView.vala index a3a8f0c2..cf742e47 100644 --- a/src/SearchView.vala +++ b/src/SearchView.vala @@ -36,8 +36,8 @@ public class Switchboard.SearchView : Gtk.Box { listbox = new Gtk.ListBox () { selection_mode = BROWSE }; - listbox.add_css_class (Granite.STYLE_CLASS_BACKGROUND); - listbox.add_css_class (Granite.STYLE_CLASS_RICH_LIST); + // listbox.add_css_class (Granite.STYLE_CLASS_BACKGROUND); + // listbox.add_css_class (Granite.STYLE_CLASS_RICH_LIST); listbox.set_filter_func (filter_func); listbox.set_sort_func (sort_func); listbox.set_placeholder (alert_view); From 99d7792281d96248b23331d2b9010a1c625426e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 29 Oct 2026 12:28:16 -0700 Subject: [PATCH 3/3] more CSS cleanu --- data/styles/CategoryView.scss | 10 +--------- data/styles/SettingsPage.scss | 30 +++++++++++++++--------------- data/styles/SettingsSidebar.scss | 2 +- src/CategoryView.vala | 3 +-- 4 files changed, 18 insertions(+), 27 deletions(-) diff --git a/data/styles/CategoryView.scss b/data/styles/CategoryView.scss index 38c1b61f..20b598f9 100644 --- a/data/styles/CategoryView.scss +++ b/data/styles/CategoryView.scss @@ -1,11 +1,3 @@ category-view .main-clamp { - padding: rem(12px); - - .category-box { - border-spacing: rem(24px); - } - - .rich-list row { - border-radius: rem(3px); - } + padding: 1rem; } diff --git a/data/styles/SettingsPage.scss b/data/styles/SettingsPage.scss index 916bad23..5a23e797 100644 --- a/data/styles/SettingsPage.scss +++ b/data/styles/SettingsPage.scss @@ -4,22 +4,22 @@ settingspage { background: linear-gradient( to top, - #{'alpha(@accent_color, 0)'} 80%, - #{'alpha(@accent_color, 0.25)'} 100% + color-mix(in srgb, var(--accent-color) 0%, transparent) 80%, + color-mix(in srgb, var(--accent-color) 25%, transparent) 100% ), linear-gradient( - #{'@borders'}, - rgba(black, 0.05) 1px, - rgba(black, 0.0) rem(3px) + var(--border-color), + color-mix(in srgb, black 5%, transparent) 1px, + transparent 0.25rem ); } undershoot.top { background: linear-gradient( - #{'@borders'}, - rgba(black, 0.05) 1px, - rgba(black, 0.0) rem(3px) + var(--border-color), + color-mix(in srgb, black 5%, transparent) 1px, + transparent 0.25rem ); } } @@ -33,11 +33,11 @@ settingspage { widget { &:dir(ltr) { margin-left: rem(4px); - margin-right: rem(3px); + margin-right: 0.25rem; } &:dir(rtl) { - margin-left: rem(3px); + margin-left: 0.25rem; margin-right: rem(4px); } } @@ -68,7 +68,7 @@ settingspage { .header-area, .content-area { - padding: rem(12px); + padding: 1rem; } actionbar.action-area { @@ -79,17 +79,17 @@ settingspage { box.end, box.start { - border-spacing: rem(6px); - padding: rem(12px); + border-spacing: 0.5rem; + padding: 1rem; } } windowcontrols { - margin: rem(6px); + margin: 0.5rem; &.start, &.end { - border-spacing: rem(6px); + border-spacing: 0.5rem; } } } diff --git a/data/styles/SettingsSidebar.scss b/data/styles/SettingsSidebar.scss index 3f3ffbc5..1557a3d5 100644 --- a/data/styles/SettingsSidebar.scss +++ b/data/styles/SettingsSidebar.scss @@ -4,7 +4,7 @@ settingssidebar { row, > .title-4 { - padding: rem(6px); + padding: 0.5rem; } row overlay { diff --git a/src/CategoryView.vala b/src/CategoryView.vala index e06dde62..e0cde6e3 100644 --- a/src/CategoryView.vala +++ b/src/CategoryView.vala @@ -56,14 +56,13 @@ public class Switchboard.CategoryView : Adw.NavigationPage { plug_search = new PlugsSearch (); plug_search_result = new Gee.ArrayList (); - var category_box = new Gtk.Box (VERTICAL, 0) { + var category_box = new Granite.Box (VERTICAL, DOUBLE) { vexpand = true }; category_box.append (personal_category); category_box.append (hardware_category); category_box.append (network_category); category_box.append (system_category); - category_box.add_css_class ("category-box"); stack = new Gtk.Stack () { transition_type = CROSSFADE,