Use SettingsPage and SettingsSidebar (#400)

* Use SettingsPage and SettingsSidebar

* Remove extra margins

* Clean up sep

---------

Co-authored-by: Ryan Kornheisl <ryan@skarva.tech>

data/plug.css

@@ -83,12 +83,12 @@
     -gtk-icon-transform: scale(0.6);
 }
 
-appearance-view desktop-preview {
+.appearance-view desktop-preview {
     min-height: 96px;
     margin: 6px 6px 12px 12px;
 }
 
-appearance-view desktop-preview .shell {
+.appearance-view desktop-preview .shell {
     background-image:
         url("resource:///io/elementary/settings/desktop/notify-center.svg"),
         url("resource:///io/elementary/settings/desktop/dock.svg");
@@ -98,37 +98,37 @@ appearance-view desktop-preview .shell {
     transition: all 300ms ease-in-out;
 }
 
-appearance-view desktop-preview box:dir(rtl) {
+.appearance-view desktop-preview box:dir(rtl) {
     background-position: 3px 3px, calc(50% + 0.5px) bottom;
 }
 
-appearance-view desktop-preview.dark .shell {
+.appearance-view desktop-preview.dark .shell {
     background-image:
         url("resource:///io/elementary/settings/desktop/notify-center-dark.svg"),
         url("resource:///io/elementary/settings/desktop/dock-dark.svg");
 }
 
-appearance-view desktop-preview.dim .shell {
+.appearance-view desktop-preview.dim .shell {
     background-color: alpha(black, 0.3);
 }
 
-appearance-view desktop-preview .window {
+.appearance-view desktop-preview .window {
     border-radius: 0.25em;
     min-height: 32px;
     min-width: 40px;
 }
 
-appearance-view desktop-preview .window.back {
+.appearance-view desktop-preview .window.back {
     margin-right: 24px;
     margin-bottom: 12px;
 }
 
-appearance-view desktop-preview .window.front {
+.appearance-view desktop-preview .window.front {
     margin-left: 24px;
     margin-top: 12px;
 }
 
-appearance-view desktop-preview .window.front {
+.appearance-view desktop-preview .window.front {
     background: #fafafa;
     box-shadow:
         inset 0 1px 0 0 white,
@@ -140,8 +140,8 @@ appearance-view desktop-preview .window.front {
         0 2px 4px alpha(black, 0.3);
 }
 
-appearance-view desktop-preview .window.back,
-appearance-view desktop-preview.dark .window.front {
+.appearance-view desktop-preview .window.back,
+.appearance-view desktop-preview.dark .window.front {
     background: #444;
     box-shadow:
         inset 0 1px 0 0 alpha(white, 0.15),

src/Plug.vala

@@ -19,8 +19,8 @@
 */
 
 public class PantheonShell.Plug : Switchboard.Plug {
+    private Gtk.Paned paned;
     private Gtk.Stack stack;
-    private Gtk.Grid main_grid;
 
     private Wallpaper wallpaper_view;
 
@@ -53,8 +53,8 @@ public class PantheonShell.Plug : Switchboard.Plug {
     }
 
     public override Gtk.Widget get_widget () {
-        if (main_grid == null) {
-            wallpaper_view = new Wallpaper (this);
+        if (paned == null) {
+            wallpaper_view = new Wallpaper ();
 
             var dock = new Dock ();
             var multitasking = new Multitasking ();
@@ -68,28 +68,20 @@ public class PantheonShell.Plug : Switchboard.Plug {
             stack.add_titled (dock, "dock", _("Dock & Panel"));
             stack.add_titled (multitasking, "multitasking", _("Multitasking"));
 
-            var stack_switcher = new Gtk.StackSwitcher () {
-                stack = stack
+            var sidebar = new Switchboard.SettingsSidebar (stack) {
+                show_title_buttons = true
             };
 
-            var switcher_sizegroup = new Gtk.SizeGroup (HORIZONTAL);
-            unowned var switcher_child = stack_switcher.get_first_child ();
-            while (switcher_child != null) {
-                switcher_sizegroup.add_widget (switcher_child);
-                switcher_child = switcher_child.get_next_sibling ();
-            }
-
-            var headerbar = new Adw.HeaderBar () {
-                title_widget = stack_switcher
+            paned = new Gtk.Paned (HORIZONTAL) {
+                start_child = sidebar,
+                end_child = stack,
+                shrink_start_child = false,
+                shrink_end_child = false,
+                resize_start_child = false
             };
-            headerbar.add_css_class (Granite.STYLE_CLASS_FLAT);
-
-            main_grid = new Gtk.Grid ();
-            main_grid.attach (headerbar, 0, 0);
-            main_grid.attach (stack, 0, 1);
         }
 
-        return main_grid;
+        return paned;
     }
 
     public override void shown () {

src/Views/Appearance.vala

@@ -18,7 +18,7 @@
 *
 */
 
-public class PantheonShell.Appearance : Gtk.Box {
+public class PantheonShell.Appearance : Switchboard.SettingsPage {
     private const string INTERFACE_SCHEMA = "org.gnome.desktop.interface";
     private const string STYLESHEET_KEY = "gtk-theme";
     private const string STYLESHEET_PREFIX = "io.elementary.stylesheet.";
@@ -64,8 +64,13 @@ public class PantheonShell.Appearance : Gtk.Box {
         }
     }
 
-    class construct {
-        set_css_name ("appearance-view");
+    public Appearance () {
+        Object (
+            title: _("Appearance"),
+            description : _("Preferred accents and style for system components. Apps may also follow these preferences, but can always choose their own accents or style."),
+            icon: new ThemedIcon ("preferences-desktop-theme"),
+            show_end_title_buttons: true
+        );
     }
 
     construct {
@@ -178,10 +183,7 @@ public class PantheonShell.Appearance : Gtk.Box {
         }
 
         var grid = new Gtk.Grid () {
-            row_spacing = 6,
-            margin_start = 12,
-            margin_end = 12,
-            margin_bottom = 24
+            row_spacing = 6
         };
 
         if (((GLib.DBusProxy) pantheon_act).get_cached_property ("PrefersColorScheme") != null) {
@@ -405,11 +407,8 @@ public class PantheonShell.Appearance : Gtk.Box {
         grid.attach (animations_box, 0, 10, 2);
         grid.attach (scrollbar_box, 0, 11, 2);
 
-        var clamp = new Adw.Clamp () {
-            child = grid
-        };
-
-        append (clamp);
+        child = grid;
+        add_css_class ("appearance-view");
 
         var animations_settings = new Settings ("org.pantheon.desktop.gala.animations");
         animations_settings.bind ("enable-animations", animations_switch, "active", SettingsBindFlags.INVERT_BOOLEAN);

src/Views/Dock.vala

@@ -3,10 +3,18 @@
  * SPDX-FileCopyrightText: 2016-2023 elementary, Inc. (https://elementary.io)
  */
 
-public class PantheonShell.Dock : Gtk.Box {
+public class PantheonShell.Dock : Switchboard.SettingsPage {
     private const string PANEL_SCHEMA = "io.elementary.desktop.wingpanel";
     private const string TRANSLUCENCY_KEY = "use-transparency";
 
+    public Dock () {
+        Object (
+            title: _("Dock & Panel"),
+            icon: new ThemedIcon ("preferences-desktop"),
+            show_end_title_buttons: true
+        );
+    }
+
     construct {
         var icon_header = new Granite.HeaderLabel (_("Dock Icon Size"));
 
@@ -96,9 +104,6 @@ public class PantheonShell.Dock : Gtk.Box {
         }
 
         var box = new Gtk.Box (VERTICAL, 18) {
-            margin_start = 12,
-            margin_end = 12,
-            margin_bottom = 12
         };
         box.append (icon_box);
         box.append (translucency_box);
@@ -108,15 +113,7 @@ public class PantheonShell.Dock : Gtk.Box {
             box.append (indicators_box);
         }
 
-        var clamp = new Adw.Clamp () {
-            child = box
-        };
-
-        var scrolled = new Gtk.ScrolledWindow () {
-            child = clamp
-        };
-
-        append (scrolled);
+        child = box;
 
         var dock_schema = SettingsSchemaSource.get_default ().lookup ("io.elementary.dock", true);
         if (dock_schema != null && dock_schema.has_key ("icon-size")) {

src/Views/Multitasking.vala

@@ -19,9 +19,17 @@
 * Authored by: Tom Beckmann
 */
 
-public class PantheonShell.Multitasking : Gtk.Box {
+public class PantheonShell.Multitasking : Switchboard.SettingsPage {
     private GLib.Settings behavior_settings;
 
+    public Multitasking () {
+        Object (
+            title: _("Multitasking"),
+            icon: new ThemedIcon ("preferences-desktop-workspaces"),
+            show_end_title_buttons: true
+        );
+    }
+
     construct {
         var hotcorner_title = new Gtk.Label (_("When the pointer enters a display corner")) {
             halign = Gtk.Align.START,
@@ -49,10 +57,7 @@ public class PantheonShell.Multitasking : Gtk.Box {
 
         var grid = new Gtk.Grid () {
             column_spacing = 12,
-            row_spacing = 6,
-            margin_start = 12,
-            margin_end = 12,
-            margin_bottom = 12
+            row_spacing = 6
         };
         grid.attach (hotcorner_title, 0, 0, 2);
         grid.attach (topleft, 0, 1, 2);
@@ -62,16 +67,7 @@ public class PantheonShell.Multitasking : Gtk.Box {
         grid.attach (workspaces_label, 0, 6, 2);
         grid.attach (checkbutton_box, 0, 7, 2);
 
-        var clamp = new Adw.Clamp () {
-            child = grid
-        };
-
-        var scrolled = new Gtk.ScrolledWindow () {
-            child = clamp,
-            hscrollbar_policy = Gtk.PolicyType.NEVER
-        };
-
-        append (scrolled);
+        child = grid;
 
         behavior_settings = new GLib.Settings ("org.pantheon.desktop.gala.behavior");
         behavior_settings.bind ("move-fullscreened-workspace", fullscreen_checkbutton, "active", GLib.SettingsBindFlags.DEFAULT);

src/Views/Text.vala

@@ -18,7 +18,7 @@
 *
 */
 
-public class PantheonShell.Text : Gtk.Box {
+public class PantheonShell.Text : Switchboard.SettingsPage {
     private const string DYSLEXIA_KEY = "dyslexia-friendly-support";
     private const string FONT_KEY = "font-name";
     private const string DOCUMENT_FONT_KEY = "document-font-name";
@@ -30,6 +30,14 @@ public class PantheonShell.Text : Gtk.Box {
 
     private uint scale_timeout;
 
+    public Text () {
+        Object (
+            title: _("Text"),
+            icon: new ThemedIcon ("preferences-desktop-font"),
+            show_end_title_buttons: true
+        );
+    }
+
     construct {
         var size_label = new Granite.HeaderLabel (_("Size"));
 
@@ -65,19 +73,11 @@ public class PantheonShell.Text : Gtk.Box {
         dyslexia_box.append (dyslexia_font_label);
         dyslexia_box.append (dyslexia_font_switch);
 
-        var box = new Gtk.Box (VERTICAL, 24) {
-            margin_start = 12,
-            margin_end = 12,
-            margin_bottom = 24
-        };
+        var box = new Gtk.Box (VERTICAL, 24);
         box.append (size_grid);
         box.append (dyslexia_box);
 
-        var clamp = new Adw.Clamp () {
-            child = box
-        };
-
-        append (clamp);
+        child = box;
 
         var interface_settings = new Settings ("org.gnome.desktop.interface");
         interface_settings.bind ("text-scaling-factor", size_adjustment, "value", SettingsBindFlags.GET);

src/Views/Wallpaper.vala

@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: 2015-2023 elementary, Inc. (https://elementary.io)
  */
 
-public class PantheonShell.Wallpaper : Gtk.Box {
+public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
     public enum ColumnType {
         ICON,
         NAME
@@ -20,8 +20,6 @@ public class PantheonShell.Wallpaper : Gtk.Box {
         FileAttribute.THUMBNAIL_IS_VALID
     };
 
-    public Switchboard.Plug plug { get; construct set; }
-
     private static GLib.Settings gnome_background_settings;
 
     private Gtk.ScrolledWindow wallpaper_scrolled_window;
@@ -40,17 +38,19 @@ public class PantheonShell.Wallpaper : Gtk.Box {
     private bool prevent_update_mode = false; // When restoring the combo state, don't trigger the update.
     private bool finished; // Shows that we got or wallpapers together
 
-    public Wallpaper (Switchboard.Plug _plug) {
-        Object (plug: _plug);
+    public Wallpaper () {
+        Object (
+            title: _("Wallpaper"),
+            icon: new ThemedIcon ("preferences-desktop-wallpaper"),
+            show_end_title_buttons: true
+        );
     }
 
     static construct {
         gnome_background_settings = new GLib.Settings ("org.gnome.desktop.background");
     }
 
     construct {
-        var separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
-
         var drop_target = new Gtk.DropTarget (typeof (Gdk.FileList), Gdk.DragAction.COPY);
 
         wallpaper_view = new Gtk.FlowBox () {
@@ -122,10 +122,12 @@ public class PantheonShell.Wallpaper : Gtk.Box {
         actionbar.pack_end (color_button);
         actionbar.pack_end (combo);
 
-        orientation = VERTICAL;
-        append (separator);
-        append (view_overlay);
-        append (actionbar);
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.append (view_overlay);
+        box.append (actionbar);
+        box.add_css_class (Granite.STYLE_CLASS_FRAME);
+
+        child = box;
 
         add_wallpaper_button.clicked.connect (show_wallpaper_chooser);