Port to GTK 4

.github/workflows/ci.yml

@@ -23,11 +23,13 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y desktop-file-utils gettext libdistinst-dev libgtk-3-dev libgee-0.8-dev libgranite-dev libhandy-1-dev libxml2-dev libjson-glib-dev libpwquality-dev libxml2-utils meson valac
-    - name: Build
+        apt install -y desktop-file-utils gettext libadwaita-1-dev libdistinst-dev libgee-0.8-dev libgranite-7-dev libgtk-4-dev libxml2-dev libjson-glib-dev libpwquality-dev libxml2-utils meson valac
+    - name: Build and Test
+      env:
+        DESTDIR: out
       run: |
-        meson build
-        ninja -C build
+        meson setup build
+        ninja -C build install
 
   lint:
     runs-on: ubuntu-latest

README.md

@@ -16,10 +16,10 @@ You'll need the following dependencies:
  - gettext
  - gparted
  - libgnomekbd-dev
- - libgranite-dev >= 0.5
- - libgtk-3-dev
+ - libgranite-7-dev >=7.4.0
+ - libgtk-4-dev
  - libgee-0.8-dev
- - libhandy-1-dev
+ - libadwaita-1-dev >=1.0.0
  - libjson-glib-dev
  - libpwquality-dev
  - libxml2-dev

data/Application.css

@@ -1,3 +1,125 @@
 .button-box button {
     min-width: 86px; /* https://github.com/elementary/granite/issues/577#issuecomment-1318979272 */
 }
+
+.logo {
+    animation: rainbow-bg 30s linear infinite;
+    background-image: linear-gradient(
+        to bottom,
+        alpha(@BLUEBERRY_500, 0.25),
+        alpha(@BLUEBERRY_700, 0.75)
+    );
+    border-radius: 50%;
+    box-shadow:
+        inset 0 -2px 0 0 alpha(@highlight_color, 0.2),
+        inset 0 2px 0 0 alpha(@highlight_color, 0.3),
+        inset 2px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -2px 0 0 0 alpha(@highlight_color, 0.07),
+        inset 0 0 0 1px alpha(black, 0.7);
+    color: white;
+    -gtk-icon-shadow:
+        0 1px 1px alpha(black, 0.3),
+        0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    -gtk-icon-style: symbolic;
+}
+
+@keyframes rainbow-bg {
+    from {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BLUEBERRY_500, 0.25),
+            alpha(@BLUEBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    }
+
+    12.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@MINT_500, 0.25),
+            alpha(@MINT_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@MINT_900, 0.2);
+    }
+
+    25% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@LIME_500, 0.25),
+            alpha(@LIME_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@LIME_900, 0.2);
+    }
+
+    37.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BANANA_500, 0.25),
+            alpha(@BANANA_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BANANA_900, 0.2);
+    }
+
+    50% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@ORANGE_500, 0.25),
+            alpha(@ORANGE_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@ORANGE_900, 0.2);
+    }
+
+    62.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@STRAWBERRY_500, 0.25),
+            alpha(@STRAWBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@STRAWBERRY_900, 0.2);
+    }
+
+    75% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BUBBLEGUM_500, 0.25),
+            alpha(@BUBBLEGUM_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BUBBLEGUM_900, 0.2);
+    }
+
+    87.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@GRAPE_500, 0.25),
+            alpha(@GRAPE_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@GRAPE_900, 0.2);
+    }
+
+    to {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BLUEBERRY_500, 0.25),
+            alpha(@BLUEBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    }
+}

data/disk-bar-fallback.css

@@ -93,8 +93,3 @@ levelbar block image {
         0 1px 1px alpha(#000, 0.2),
         0 1px 3px alpha(#000, 0.1);
 }
-
-levelbar .h4 {
-    opacity: 1;
-    padding: 0;
-}

data/io.elementary.installer.gresource.xml

@@ -3,7 +3,6 @@
   <gresource prefix="/io/elementary/installer">
     <file compressed="true">Application.css</file>
     <file alias="disk-bar-fallback.css" compressed="true">disk-bar-fallback.css</file>
-    <file alias="ProgressView.css" compressed="true">ProgressView.css</file>
     <file compressed="true">wallpaper.jpg</file>
   </gresource>
   <gresource prefix="/io/elementary/installer/icons">

meson.build

@@ -15,11 +15,11 @@ i18n = import('i18n')
 distinst_dep = dependency('distinst')
 glib_dep = dependency('glib-2.0', version: '>=2.74')
 gobject_dep = dependency('gobject-2.0')
-gtk_dep = dependency('gtk+-3.0')
+gtk_dep = dependency('gtk4')
 gee_dep = dependency('gee-0.8')
 gio_dep = dependency('gio-2.0')
-granite_dep = dependency('granite', version: '>=0.5')
-handy_dep = dependency('libhandy-1', version: '>=0.90.0')
+granite_dep = dependency('granite-7', version: '>=7.4.0')
+adw_dep = dependency('libadwaita-1', version: '>=1.0.0')
 json_glib_dep = dependency('json-glib-1.0')
 xml2_dep = dependency('libxml-2.0')
 pwquality_dep = dependency('pwquality')

src/Application.vala

@@ -32,19 +32,12 @@ public class Installer.App : Gtk.Application {
     public override void startup () {
         base.startup ();
 
-        var css_provider = new Gtk.CssProvider ();
-        css_provider.load_from_resource ("io/elementary/installer/Application.css");
-
-        Gtk.StyleContext.add_provider_for_screen (
-            Gdk.Screen.get_default (),
-            css_provider,
-            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
-        );
+        Granite.init ();
 
         var css_fallback = new Gtk.CssProvider ();
         css_fallback.load_from_resource ("io/elementary/installer/disk-bar-fallback.css");
-        Gtk.StyleContext.add_provider_for_screen (
-            Gdk.Screen.get_default (),
+        Gtk.StyleContext.add_provider_for_display (
+            Gdk.Display.get_default (),
             css_fallback,
             Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
         );
@@ -58,7 +51,7 @@ public class Installer.App : Gtk.Application {
             icon_name = application_id,
             title = _("Install %s").printf (Utils.get_pretty_name ())
         };
-        window.show_all ();
+        window.present ();
         add_window (window);
 
         inhibit (