Port to GTK4 (#369)

* Update deps * remove DisplayWindow * Filters view stuff * NightLightView * DisplayPlug * DisplaysView * DisplayWidget: more fixes * rotate labels with css * I hate all of this * Don't subclass overlay * Fix radio issues * Use secondary text in filters view * Maybe fix overlay * Use drag gesture * slightly simplify * one less commented code * Update DisplaysView.vala * Update DisplaysView.vala * Update DisplaysView.vala * Update DisplaysView.vala * Fix weird layout thing * Fix warnings * uncomment code * lint * Css stuff * Finish namespace stuff * Update README.md * Update README.md * Fix review comments * Has frame property * Fix disabled style --------- Co-authored-by: Jeremy Wootten <jeremywootten@gmail.com>
elementary · Feb 29, 2024 · 784f33f · 784f33f
1 parent f761b3c
commit 784f33f
Show file tree

Hide file tree

Showing 17 changed files with 235 additions and 243 deletions.
diff --git a/.github/workflows/gettext.yml b/.github/workflows/gettext.yml
@@ -2,7 +2,7 @@ name: Gettext Updates
 
 on:
   push:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -23,7 +23,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y meson libgranite-dev libswitchboard-2.0-dev valac
+        apt install -y meson libadwaita-1-dev libgranite-7-dev libswitchboard-3-dev valac
     - name: Build
       env:
         DESTDIR: out

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -2,7 +2,7 @@ name: Release
 
 on:
   pull_request:
-    branches: [master]
+    branches: [main]
     types: [closed]
 jobs:
   release:

diff --git a/README.md b/README.md
@@ -1,18 +1,19 @@
-# Switchboard Display Plug
+# Display Settings
 [![Packaging status](https://repology.org/badge/tiny-repos/switchboard-plug-display.svg)](https://repology.org/metapackage/switchboard-plug-display)
 [![Translation status](https://l10n.elementary.io/widgets/switchboard/-/switchboard-plug-display/svg-badge.svg)](https://l10n.elementary.io/engage/switchboard/?utm_source=widget)
 
-Extension for [Switchboard](https://github.com/elementary/switchboard) to manage multiple monitor setups.
+Extension for [System Settings](https://github.com/elementary/switchboard) to manage multiple monitor setups.
 
 ![screenshot](data/screenshot.png?raw=true)
 
 ## Building and Installation
 
 You'll need the following dependencies:
 
-* libgranite-dev
-* libgtk-3-dev
-* libswitchboard-2.0-dev
+* libadwaita-1-dev
+* libgranite-7-dev
+* libgtk-4-dev
+* libswitchboard-3-dev
 * meson
 * valac
 
@@ -24,4 +25,4 @@ Run `meson` to configure the build environment and then `ninja` to build
 
 To install, use `ninja install`
 
-    sudo ninja install
+    ninja install
diff --git a/data/Display.css b/data/Display.css
@@ -1,5 +1,6 @@
 display-widget {
     border-radius: 3px;
+    padding: 6px;
     text-shadow: 0 1px 1px alpha(white, 0.1);
     -gtk-icon-shadow: 0 1px 1px alpha(white, 0.1);
 }
@@ -8,7 +9,7 @@ display-widget > grid > label {
     font-weight: 600;
 }
 
-display-widget button {
+display-widget button.flat.image-button {
     border-radius: 50%;
     color: inherit;
     padding: 6px;
@@ -19,17 +20,16 @@ display-widget image {
     -gtk-icon-palette: success @text_color;
 }
 
-display-widget.disabled {
-    background-color: @SLATE_100;
-    color: @SLATE_700;
+display-widget label.rotate-90 {
+    transform: rotate(90deg);
 }
 
-display-widget.disabled button:focus {
-    background: alpha(@SLATE_700, 0.25);
+display-widget label.rotate-180 {
+    transform: rotate(180deg);
 }
 
-display-widget.disabled button:checked {
-    background: alpha(@SLATE_700, 0.5);
+display-widget label.rotate-270 {
+    transform: rotate(270deg);
 }
 
 display-widget.color-0 {
@@ -38,11 +38,11 @@ display-widget.color-0 {
     color: @BLUEBERRY_900;
 }
 
-display-widget.color-0 button:focus {
+display-widget.color-0 button.flat.image-button:focus {
     background: @BLUEBERRY_300;
 }
 
-display-widget.color-0 button:checked {
+display-widget.color-0 button.flat.image-button:checked {
     background: alpha(@BLUEBERRY_500, 0.75);
 }
 
@@ -52,11 +52,11 @@ display-widget.color-1 {
     color: @STRAWBERRY_900;
 }
 
-display-widget.color-1 button:focus {
+display-widget.color-1 button.flat.image-button:focus {
     background: @STRAWBERRY_300;
 }
 
-display-widget.color-1 button:checked {
+display-widget.color-1 button.flat.image-button:checked {
     background: alpha(@STRAWBERRY_500, 0.75);
 }
 
@@ -66,11 +66,11 @@ display-widget.color-2 {
     color: @ORANGE_900;
 }
 
-display-widget.color-2 button:focus {
+display-widget.color-2 button.flat.image-button:focus {
     background: @ORANGE_300;
 }
 
-display-widget.color-2 button:checked {
+display-widget.color-2 button.flat.image-button:checked {
     background: alpha(@ORANGE_500, 0.75);
 }
 
@@ -80,11 +80,11 @@ display-widget.color-3 {
     color: @BANANA_900;
 }
 
-display-widget.color-3 button:focus {
+display-widget.color-3 button.flat.image-button:focus {
     background: @BANANA_300;
 }
 
-display-widget.color-3 button:checked {
+display-widget.color-3 button.flat.image-button:checked {
     background: alpha(@BANANA_500, 0.75);
 }
 
@@ -94,11 +94,11 @@ display-widget.color-4 {
     color: @LIME_900;
 }
 
-display-widget.color-4 button:focus {
+display-widget.color-4 button.flat.image-button:focus {
     background: @LIME_300;
 }
 
-display-widget.color-4 button:checked {
+display-widget.color-4 button.flat.image-button:checked {
     background: alpha(@LIME_500, 0.75);
 }
 
@@ -108,11 +108,11 @@ display-widget.color-5 {
     color: @GRAPE_900;
 }
 
-display-widget.color-5 button:focus {
+display-widget.color-5 button.flat.image-button:focus {
     background: @GRAPE_300;
 }
 
-display-widget.color-5 button:checked {
+display-widget.color-5 button.flat.image-button:checked {
     background: alpha(@GRAPE_500, 0.75);
 }
 
@@ -122,10 +122,24 @@ display-widget.color-6 {
     color: @COCOA_900;
 }
 
-display-widget.color-6 button:focus {
+display-widget.color-6 button.flat.image-button:focus {
     background: @COCOA_300;
 }
 
-display-widget.color-6 button:checked {
+display-widget.color-6 button.flat.image-button:checked {
     background: alpha(@COCOA_500, 0.75);
 }
+
+display-widget.disabled {
+    background-color: alpha(@SLATE_100, 0.75);
+    border: 1px solid alpha(@SLATE_500, 0.75);
+    color: @SLATE_700;
+}
+
+display-widget.disabled button.flat.image-button:focus {
+    background: alpha(@SLATE_700, 0.25);
+}
+
+display-widget.disabled button.flat.image-button:checked {
+    background: alpha(@SLATE_700, 0.5);
+}
diff --git a/...mentary.switchboard.display.gresource.xml → data/display.gresource.xml b/...mentary.switchboard.display.gresource.xml → data/display.gresource.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
-  <gresource prefix="/io/elementary/switchboard/display">
+  <gresource prefix="/io/elementary/settings/display">
     <file compressed="true">Display.css</file>
     <file compressed="true">Filters.css</file>
   </gresource>

diff --git a/data/display.metainfo.xml.in b/data/display.metainfo.xml.in
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <component type="addon">
-  <id>io.elementary.switchboard.display</id>
-  <extends>io.elementary.switchboard</extends>
-  <translation type="gettext">display-plug</translation>
+  <id>io.elementary.settings.display</id>
+  <extends>io.elementary.settings</extends>
+  <translation type="gettext">io.elementary.settings.display</translation>
   <metadata_license>CC0-1.0</metadata_license>
   <project_license>GPL-3.0+</project_license>
 

diff --git a/data/meson.build b/data/meson.build
@@ -1,8 +1,13 @@
 i18n.merge_file(
     input: 'display.metainfo.xml.in',
-    output: 'io.elementary.switchboard.display.metainfo.xml',
+    output: gettext_name + '.metainfo.xml',
     po_dir: meson.project_source_root() / 'po' / 'extra',
     type: 'xml',
     install: true,
     install_dir: get_option('datadir') / 'metainfo',
 )
+
+gresource = gnome.compile_resources(
+    'gresource',
+    'display.gresource.xml'
+)
diff --git a/meson.build b/meson.build
@@ -4,7 +4,7 @@ project(
     version: '7.0.0'
 )
 
-gettext_name = meson.project_name() + '-plug'
+gettext_name = 'io.elementary.settings.' + meson.project_name()
 gnome = import('gnome')
 i18n = import('i18n')
 
@@ -17,15 +17,9 @@ add_project_arguments(
     language:'c'
 )
 
-asresources = gnome.compile_resources(
-    'as-resources', 'data/' + 'io.elementary.switchboard.display.gresource.xml',
-    source_dir: 'data',
-    c_name: 'as'
-)
-
 config_data = configuration_data()
 config_data.set_quoted('LOCALEDIR', join_paths(get_option('prefix'), get_option('localedir')))
-config_data.set_quoted('GETTEXT_PACKAGE', meson.project_name() + '-plug')
+config_data.set_quoted('GETTEXT_PACKAGE', gettext_name)
 config_file = configure_file(
     input: 'src/Config.vala.in',
     output: '@BASENAME@',

diff --git a/po/display-plug.pot → po/io.elementary.settings.display.pot b/po/display-plug.pot → po/io.elementary.settings.display.pot
diff --git a/src/DisplayPlug.vala b/src/DisplayPlug.vala
@@ -35,7 +35,7 @@ public class Display.Plug : Switchboard.Plug {
         settings.set ("display/night-light", "night-light");
         settings.set ("display/filters", "filters");
         Object (category: Category.HARDWARE,
-                code_name: "io.elementary.switchboard.display",
+                code_name: "io.elementary.settings.display",
                 display_name: _("Displays"),
                 description: _("Configure resolution and position of monitors and projectors"),
                 icon: "preferences-desktop-display",
@@ -64,18 +64,23 @@ public class Display.Plug : Switchboard.Plug {
 
             var stack_switcher = new Gtk.StackSwitcher () {
                 halign = Gtk.Align.CENTER,
-                homogeneous = true,
                 margin_top = 12,
                 margin_end = 12,
                 margin_bottom = 12,
                 margin_start = 12,
                 stack = stack
             };
 
+            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 ();
+            }
+
             box = new Gtk.Box (VERTICAL, 0);
-            box.add (stack_switcher);
-            box.add (stack);
-            box.show_all ();
+            box.append (stack_switcher);
+            box.append (stack);
 
             stack.notify["visible-child"].connect (() => {
                 if (stack.visible_child == displays_view) {

diff --git a/src/Views/DisplaysView.vala b/src/Views/DisplaysView.vala
@@ -15,7 +15,9 @@ public class Display.DisplaysView : Gtk.Box {
     private const string TOUCHSCREEN_SETTINGS_PATH = "org.gnome.settings-daemon.peripherals.touchscreen";
 
     construct {
-            displays_overlay = new DisplaysOverlay ();
+            displays_overlay = new DisplaysOverlay () {
+                vexpand = true
+            };
 
             var mirror_label = new Gtk.Label (_("Mirror Display:"));
             var mirror_switch = new Gtk.Switch ();
@@ -27,8 +29,8 @@ public class Display.DisplaysView : Gtk.Box {
                 margin_start = 6,
                 valign = CENTER
             };
-           mirror_box.add (mirror_label);
-           mirror_box.add (mirror_switch);
+            mirror_box.append (mirror_label);
+            mirror_box.append (mirror_switch);
 
             var dpi_label = new Gtk.Label (_("Scaling factor:"));
 
@@ -43,13 +45,13 @@ public class Display.DisplaysView : Gtk.Box {
                 margin_bottom = 6,
                 margin_start = 6
             };
-            dpi_box.add (dpi_label);
-            dpi_box.add (dpi_combo);
+            dpi_box.append (dpi_label);
+            dpi_box.append (dpi_combo);
 
             var detect_button = new Gtk.Button.with_label (_("Detect Displays"));
 
             var apply_button = new Gtk.Button.with_label (_("Apply"));
-            apply_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+            apply_button.add_css_class (Granite.STYLE_CLASS_SUGGESTED_ACTION);
             apply_button.sensitive = false;
 
             var button_box = new Gtk.Box (HORIZONTAL, 6) {
@@ -60,11 +62,11 @@ public class Display.DisplaysView : Gtk.Box {
                 margin_start = 6,
                 valign = CENTER
             };
-            button_box.add (detect_button);
-            button_box.add (apply_button);
+            button_box.append (detect_button);
+            button_box.append (apply_button);
 
             var action_bar = new Gtk.ActionBar ();
-            action_bar.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
+            action_bar.add_css_class (Granite.STYLE_CLASS_FLAT);
             action_bar.pack_start (dpi_box);
             action_bar.pack_start (mirror_box);
 
@@ -89,9 +91,9 @@ public class Display.DisplaysView : Gtk.Box {
             action_bar.pack_end (button_box);
 
             orientation = VERTICAL;
-            add (new Gtk.Separator (HORIZONTAL));
-            add (displays_overlay);
-            add (action_bar);
+            append (new Gtk.Separator (HORIZONTAL));
+            append (displays_overlay);
+            append (action_bar);
 
             displays_overlay.configuration_changed.connect ((changed) => {
                 apply_button.sensitive = changed;
@@ -143,9 +145,8 @@ public class Display.DisplaysView : Gtk.Box {
             var rotation_lock_label = new Gtk.Label (_("Rotation Lock:"));
             var rotation_lock_switch = new Gtk.Switch ();
 
-            rotation_lock_box.add (rotation_lock_label);
-            rotation_lock_box.add (rotation_lock_switch);
-            rotation_lock_box.show_all ();
+            rotation_lock_box.append (rotation_lock_label);
+            rotation_lock_box.append (rotation_lock_switch);
 
             touchscreen_settings.bind ("orientation-lock", rotation_lock_switch, "state", DEFAULT);
         }