Port to GTK4

data/granite.appdata.xml.in

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Copyright 2019–2021 elementary, Inc. <contact@elementary.io> -->
 <component>
-  <id>io.elementary.granite</id>
+  <id>io.elementary.granite-7</id>
   <metadata_license>CC0-1.0</metadata_license>
   <project_license>LGPL-3.0</project_license>
-  <name>Granite</name>
+  <name>Granite 7</name>
   <summary>Build consistent and usable apps more quickly and easily</summary>
   <description>
     <p>A companion library for GTK and GLib that provides complex widgets and convenience methods designed for use in apps built for elementary OS.</p>

demo/GraniteDemo.vala

@@ -1,5 +1,5 @@
 /*
- * Copyright 2011-2018 elementary, Inc. (https://elementary.io)
+ * Copyright 2011-2021 elementary, Inc. (https://elementary.io)
  * SPDX-License-Identifier: LGPL-3.0-or-later
  */
 
@@ -21,15 +21,15 @@ public class Granite.Demo : Gtk.Application {
         var hypertext_view = new HyperTextViewGrid ();
         var mode_button_view = new ModeButtonView ();
         var overlaybar_view = new OverlayBarView ();
-        var seekbar_view = new SeekBarView ();
+        // var seekbar_view = new SeekBarView ();
         var settings_view = new SettingsView ();
-        var source_list_view = new SourceListView ();
-        var storage_view = new StorageView ();
+        // var source_list_view = new SourceListView ();
+        // var storage_view = new StorageView ();
         var toast_view = new ToastView ();
         var utils_view = new UtilsView ();
         var welcome = new WelcomeView ();
         var dialogs_view = new DialogsView (window);
-        var async_image_view = new AsyncImageView ();
+        // var async_image_view = new AsyncImageView ();
         var application_view = new ApplicationView ();
 
         var main_stack = new Gtk.Stack ();
@@ -43,22 +43,23 @@ public class Granite.Demo : Gtk.Application {
         main_stack.add_titled (hypertext_view, "hypertextview", "HyperTextView");
         main_stack.add_titled (mode_button_view, "selection_controls", "Selection Controls");
         main_stack.add_titled (overlaybar_view, "overlaybar", "OverlayBar");
-        main_stack.add_titled (seekbar_view, "seekbar", "SeekBar");
+        // main_stack.add_titled (seekbar_view, "seekbar", "SeekBar");
         main_stack.add_titled (settings_view, "settings", "SettingsSidebar");
-        main_stack.add_titled (source_list_view, "sourcelist", "SourceList");
-        main_stack.add_titled (storage_view, "storage", "StorageBar");
+        // main_stack.add_titled (source_list_view, "sourcelist", "SourceList");
+        // main_stack.add_titled (storage_view, "storage", "StorageBar");
         main_stack.add_titled (toast_view, "toasts", "Toast");
         main_stack.add_titled (utils_view, "utils", "Utils");
         main_stack.add_titled (dialogs_view, "dialogs", "Dialogs");
-        main_stack.add_titled (async_image_view, "asyncimage", "AsyncImage");
+        // main_stack.add_titled (async_image_view, "asyncimage", "AsyncImage");
         main_stack.add_titled (application_view, "application", "Application");
 
         var stack_sidebar = new Gtk.StackSidebar ();
         stack_sidebar.stack = main_stack;
 
-        var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
-        paned.add1 (stack_sidebar);
-        paned.add2 (main_stack);
+        var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL) {
+            start_child = stack_sidebar,
+            end_child = main_stack
+        };
 
         var gtk_settings = Gtk.Settings.get_default ();
 
@@ -76,17 +77,17 @@ public class Granite.Demo : Gtk.Application {
 
         var headerbar = new Gtk.HeaderBar ();
         headerbar.get_style_context ().add_class ("default-decoration");
-        headerbar.show_close_button = true;
+        headerbar.show_title_buttons = true;
         headerbar.pack_end (mode_switch);
 
-        window.add (paned);
+        window.child = paned;
         window.set_default_size (900, 600);
         window.set_size_request (750, 500);
         window.set_titlebar (headerbar);
         window.title = "Granite Demo";
-        window.show_all ();
 
         add_window (window);
+        window.show ();
 
         granite_settings.notify["prefers-color-scheme"].connect (() => {
             gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK;

demo/Views/AccelLabelView.vala

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 elementary, Inc. (https://elementary.io)
+ * Copyright 2019-2021 elementary, Inc. (https://elementary.io)
  * SPDX-License-Identifier: LGPL-3.0-or-later
  */
 
@@ -13,44 +13,24 @@ public class AccelLabelView : Gtk.Grid {
         var popover_label = new Gtk.Label ("In a Popover:");
         popover_label.halign = Gtk.Align.END;
 
-        var lock_button = new Gtk.ModelButton ();
-        lock_button.get_child ().destroy ();
-        lock_button.add (new Granite.AccelLabel ("Lock", "<Super>L"));
+        var lock_button = new Gtk.Button ();
+        lock_button.child = new Granite.AccelLabel ("Lock", "<Super>L");
 
-        var logout_button = new Gtk.ModelButton ();
-        logout_button.get_child ().destroy ();
-        logout_button.add (new Granite.AccelLabel ("Log Out…", "<Ctrl><Alt>Delete"));
+        var logout_button = new Gtk.Button ();
+        logout_button.child = new Granite.AccelLabel ("Log Out…", "<Ctrl><Alt>Delete");
 
-        var popover_grid = new Gtk.Grid ();
-        popover_grid.margin_top = popover_grid.margin_bottom = 3;
-        popover_grid.orientation = Gtk.Orientation.VERTICAL;
-        popover_grid.add (lock_button);
-        popover_grid.add (logout_button);
-        popover_grid.show_all ();
+        var popover_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
+        popover_box.margin_top = popover_box.margin_bottom = 3;
+        popover_box.append (lock_button);
+        popover_box.append (logout_button);
 
-        var popover = new Gtk.Popover (null);
-        popover.add (popover_grid);
+        var popover = new Gtk.Popover () {
+            child = popover_box
+        };
 
         var popover_button = new Gtk.MenuButton ();
         popover_button.popover = popover;
 
-        var undo_menuitem = new Gtk.MenuItem ();
-        undo_menuitem.add (new Granite.AccelLabel ("Undo", "<Ctrl>Z"));
-
-        var redo_menuitem = new Gtk.MenuItem ();
-        redo_menuitem.add (new Granite.AccelLabel ("Redo", "<Ctrl><Shift>Z"));
-
-        var menu_label = new Gtk.Label ("In a Menu:");
-        menu_label.halign = Gtk.Align.END;
-
-        var menu = new Gtk.Menu ();
-        menu.add (undo_menuitem);
-        menu.add (redo_menuitem);
-        menu.show_all ();
-
-        var menu_button = new Gtk.MenuButton ();
-        menu_button.popup = menu;
-
         column_spacing = 12;
         row_spacing = 12;
         halign = Gtk.Align.CENTER;
@@ -59,7 +39,5 @@ public class AccelLabelView : Gtk.Grid {
         attach (copy_label, 1, 0);
         attach (popover_label, 0, 1);
         attach (popover_button, 1, 1);
-        attach (menu_label, 0, 2);
-        attach (menu_button, 1, 2);
     }
 }

demo/Views/AlertViewView.vala

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: LGPL-3.0-or-later
  */
 
-public class AlertViewView : Gtk.Grid {
+public class AlertViewView : Gtk.Box {
     construct {
         var alert = new Granite.Widgets.AlertView (
             "Nothing here",
@@ -16,6 +16,6 @@ public class AlertViewView : Gtk.Grid {
             alert.hide_action ();
         });
 
-        add (alert);
+        append (alert);
     }
 }

demo/Views/CSSView.vala

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017–2020 elementary, Inc. (https://elementary.io)
+ * Copyright 2017–2021 elementary, Inc. (https://elementary.io)
  * SPDX-License-Identifier: LGPL-3.0-or-later
  */
 
@@ -9,7 +9,10 @@ public class CSSView : Gtk.Grid {
     public CSSView (Gtk.Window window) {
         Object (
             halign: Gtk.Align.CENTER,
-            margin: 24,
+            margin_top: 24,
+            margin_bottom: 24,
+            margin_start: 24,
+            margin_end: 24,
             valign: Gtk.Align.CENTER,
             window: window
         );
@@ -38,38 +41,38 @@ public class CSSView : Gtk.Grid {
             halign = Gtk.Align.END
         };
 
-        var card = new Gtk.Grid () {
-            orientation = Gtk.Orientation.VERTICAL
-        };
+        var card = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
 
         unowned Gtk.StyleContext card_context = card.get_style_context ();
         card_context.add_class (Granite.STYLE_CLASS_CARD);
         card_context.add_class (Granite.STYLE_CLASS_ROUNDED);
 
-        card.add (header1);
-        card.add (header2);
-        card.add (header3);
-        card.add (header4);
+        card.append (header1);
+        card.append (header2);
+        card.append (header3);
+        card.append (header4);
 
         var checker_label = new Gtk.Label ("\"checkerboard\" style class:") {
             halign = Gtk.Align.END
         };
 
-        var checker_image = new Gtk.Image.from_icon_name ("dialog-information", Gtk.IconSize.DND) {
+        var checker_image = new Gtk.Image.from_icon_name ("dialog-information") {
             hexpand = true,
-            margin = 6
+            margin_start = 6,
+            margin_end = 6,
+            margin_top = 6,
+            margin_bottom = 6
         };
 
-        var checker_grid = new Gtk.Grid ();
-        checker_grid.get_style_context ().add_class (Granite.STYLE_CLASS_CHECKERBOARD);
-        checker_grid.add (checker_image);
+        var checker_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
+        checker_box.get_style_context ().add_class (Granite.STYLE_CLASS_CHECKERBOARD);
+        checker_box.append (checker_image);
 
         var terminal_label = new Gtk.Label ("\"terminal\" style class:") {
             halign = Gtk.Align.END
         };
 
         var terminal = new Gtk.TextView () {
-            border_width = 12,
             pixels_below_lines = 3
         };
         terminal.buffer.text = "[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo";
@@ -119,25 +122,23 @@ public class CSSView : Gtk.Grid {
             halign = Gtk.Align.END
         };
 
-        var accent_color_icon = new Gtk.Image.from_icon_name ("emoji-body-symbolic", Gtk.IconSize.MENU);
+        var accent_color_icon = new Gtk.Image.from_icon_name ("emoji-body-symbolic");
         accent_color_icon.get_style_context ().add_class (Granite.STYLE_CLASS_ACCENT);
 
         var accent_color_string = new Gtk.Label ("Lorem ipsum dolor sit amet");
         accent_color_string.get_style_context ().add_class (Granite.STYLE_CLASS_ACCENT);
 
-        var accent_color_grid = new Gtk.Grid () {
-            column_spacing = 6
-        };
-        accent_color_grid.add (accent_color_icon);
-        accent_color_grid.add (accent_color_string);
+        var accent_color_grid = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
+        accent_color_grid.append (accent_color_icon);
+        accent_color_grid.append (accent_color_string);
 
         column_spacing = 12;
         row_spacing = 24;
 
         attach (card_label, 0, 0);
         attach (card, 1, 0, 2);
         attach (checker_label, 0, 1);
-        attach (checker_grid, 1, 1, 2);
+        attach (checker_box, 1, 1, 2);
         attach (terminal_label, 0, 2);
         attach (terminal, 1, 2, 2);
         attach (back_button_label, 0, 3);

demo/Views/DialogsView.vala

@@ -1,9 +1,9 @@
 /*
- * Copyright 2017 elementary, Inc. (https://elementary.io)
+ * Copyright 2017-2021 elementary, Inc. (https://elementary.io)
  * SPDX-License-Identifier: LGPL-3.0-or-later
  */
 
-public class DialogsView : Gtk.Overlay {
+public class DialogsView : Gtk.Box {
     public Gtk.Window window { get; construct; }
 
     private Granite.Widgets.Toast toast;
@@ -13,36 +13,48 @@ public class DialogsView : Gtk.Overlay {
     }
 
     construct {
+        var overlay = new Gtk.Overlay ();
+        append (overlay);
+
         var dialog_button = new Gtk.Button.with_label ("Show Dialog");
 
         var message_button = new Gtk.Button.with_label ("Show MessageDialog");
 
         toast = new Granite.Widgets.Toast ("Did something");
 
         var grid = new Gtk.Grid () {
+            hexpand = true,
             halign = Gtk.Align.CENTER,
             valign = Gtk.Align.CENTER,
             row_spacing = 12
         };
         grid.attach (dialog_button, 0, 1);
         grid.attach (message_button, 0, 2);
 
-        add (grid);
-        add_overlay (toast);
+        overlay.set_child (grid);
+        overlay.add_overlay (toast);
 
         dialog_button.clicked.connect (show_dialog);
         message_button.clicked.connect (show_message_dialog);
     }
 
     private void show_dialog () {
-        var header = new Granite.HeaderLabel ("Header");
+        var header = new Gtk.Label ("Header") {
+            xalign = 0,
+            halign = Gtk.Align.START
+        };
+        header.get_style_context ().add_class (Granite.STYLE_CLASS_H4_LABEL);
+
         var entry = new Gtk.Entry ();
         var gtk_switch = new Gtk.Switch () {
             halign = Gtk.Align.START
         };
 
         var layout = new Gtk.Grid () {
-            margin = 12,
+            margin_start = 12,
+            margin_end = 12,
+            margin_top = 12,
+            margin_bottom = 12,
             margin_top = 0,
             row_spacing = 12
         };
@@ -53,20 +65,21 @@ public class DialogsView : Gtk.Overlay {
         var dialog = new Granite.Dialog () {
             transient_for = window
         };
-        dialog.get_content_area ().add (layout);
+        dialog.get_content_area ().append (layout);
         dialog.add_button ("Cancel", Gtk.ResponseType.CANCEL);
 
         var suggested_button = dialog.add_button ("Suggested Action", Gtk.ResponseType.ACCEPT);
-        suggested_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+        suggested_button.get_style_context ().add_class (Granite.STYLE_CLASS_SUGGESTED_ACTION);
 
-        dialog.show_all ();
         dialog.response.connect ((response_id) => {
            if (response_id == Gtk.ResponseType.ACCEPT) {
                toast.send_notification ();
            }
 
            dialog.destroy ();
         });
+
+        dialog.show ();
     }
 
     private void show_message_dialog () {
@@ -80,21 +93,22 @@ public class DialogsView : Gtk.Overlay {
         message_dialog.transient_for = window;
 
         var suggested_button = new Gtk.Button.with_label ("Suggested Action");
-        suggested_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+        suggested_button.get_style_context ().add_class (Granite.STYLE_CLASS_SUGGESTED_ACTION);
         message_dialog.add_action_widget (suggested_button, Gtk.ResponseType.ACCEPT);
 
         var custom_widget = new Gtk.CheckButton.with_label ("Custom widget");
 
         message_dialog.show_error_details ("The details of a possible error.");
-        message_dialog.custom_bin.add (custom_widget);
+        message_dialog.custom_bin.append (custom_widget);
 
-        message_dialog.show_all ();
         message_dialog.response.connect ((response_id) => {
            if (response_id == Gtk.ResponseType.ACCEPT) {
                toast.send_notification ();
            }
 
            message_dialog.destroy ();
         });
+
+        message_dialog.show ();
     }
 }