From 7957edf3902112b7662f938e5368cd7c2dab485b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Tue, 9 Jan 2024 03:29:11 -0800
Subject: [PATCH] VPNPage: Gtk4 prep and code style (#367)

---
 src/Views/VPNPage.vala | 77 ++++++++++++++++++++++++------------------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/Views/VPNPage.vala b/src/Views/VPNPage.vala
index 100fb666..7cfdd4af 100644
--- a/src/Views/VPNPage.vala
+++ b/src/Views/VPNPage.vala
@@ -48,70 +48,81 @@ public class Network.VPNPage : Network.Widgets.Page {
 
         vpn_list = new Gtk.ListBox () {
             activate_on_single_click = false,
-            visible = true,
-            selection_mode = Gtk.SelectionMode.BROWSE
+            hexpand = true,
+            vexpand = true,
+            selection_mode = BROWSE
         };
         vpn_list.set_placeholder (placeholder);
         vpn_list.set_sort_func ((Gtk.ListBoxSortFunc) compare_rows);
 
         var actionbar = new Gtk.ActionBar ();
-        actionbar.get_style_context ().add_class (Gtk.STYLE_CLASS_INLINE_TOOLBAR);
+        actionbar.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
 
-        var add_button = new Gtk.Button.from_icon_name ("list-add-symbolic", Gtk.IconSize.BUTTON) {
-            tooltip_text = _("Add VPN Connection…")
+        var add_button_label = new Gtk.Label (_("Add Connection…"));
+
+        var add_button_box = new Gtk.Box (HORIZONTAL, 0);
+        add_button_box.add (new Gtk.Image.from_icon_name ("list-add-symbolic", BUTTON));
+        add_button_box.add (add_button_label);
+
+        var add_button = new Gtk.Button () {
+            child = add_button_box
         };
-        add_button.clicked.connect (() => {
-            try_connection_editor ("--create --type=vpn");
-        });
+        add_button.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
+        add_button_label.mnemonic_widget = add_button;
 
-        var remove_button = new Gtk.Button.from_icon_name ("list-remove-symbolic", Gtk.IconSize.BUTTON) {
+        var remove_button = new Gtk.Button.from_icon_name ("list-remove-symbolic") {
             tooltip_text = _("Forget selected VPN…"),
             sensitive = false
         };
-        remove_button.clicked.connect (remove_button_cb);
 
-        remove_vpn_toast.default_action.connect (() => {
-            GLib.Source.remove (timeout_id);
-            timeout_id = 0;
-            sel_row.show ();
-        });
-
-        var edit_connection_button = new Gtk.Button.from_icon_name ("preferences-system-symbolic", Gtk.IconSize.BUTTON) {
+        var edit_connection_button = new Gtk.Button.from_icon_name ("preferences-system-symbolic") {
             tooltip_text = _("Edit VPN connection…"),
             sensitive = false
         };
-        edit_connection_button.clicked.connect (() => {
-            var selected_row = (VPNMenuItem) vpn_list.get_selected_row ();
-            try_connection_editor ("--edit=" + selected_row.connection.get_uuid ());
-        });
 
-        actionbar.add (add_button);
-        actionbar.add (remove_button);
-        actionbar.add (edit_connection_button);
+        actionbar.pack_start (add_button);
+        actionbar.pack_start (remove_button);
+        actionbar.pack_start (edit_connection_button);
 
         var scrolled = new Gtk.ScrolledWindow (null, null) {
-            expand = true
+            child = vpn_list
         };
-        scrolled.add (vpn_list);
 
-        var list_root = new Gtk.Grid ();
-        list_root.attach (scrolled, 0, 0, 1, 1);
-        list_root.attach (actionbar, 0, 1, 1, 1);
+        var vpn_box = new Gtk.Box (VERTICAL, 0);
+        vpn_box.add (scrolled);
+        vpn_box.add (actionbar);
 
         var frame = new Gtk.Frame (null) {
+            child = vpn_box,
             vexpand = true
         };
-        frame.get_style_context ().add_class (Gtk.STYLE_CLASS_VIEW);
-        frame.add (list_root);
 
-        var main_overlay = new Gtk.Overlay ();
-        main_overlay.add (frame);
+        var main_overlay = new Gtk.Overlay () {
+            child = frame
+        };
         main_overlay.add_overlay (remove_vpn_toast);
 
         content_area.add (main_overlay);
 
         show_all ();
 
+        add_button.clicked.connect (() => {
+            try_connection_editor ("--create --type=vpn");
+        });
+
+        edit_connection_button.clicked.connect (() => {
+            var selected_row = (VPNMenuItem) vpn_list.get_selected_row ();
+            try_connection_editor ("--edit=" + selected_row.connection.get_uuid ());
+        });
+
+        remove_button.clicked.connect (remove_button_cb);
+
+        remove_vpn_toast.default_action.connect (() => {
+            GLib.Source.remove (timeout_id);
+            timeout_id = 0;
+            sel_row.show ();
+        });
+
         vpn_list.row_activated.connect (row => {
             if (((VPNMenuItem) row).state == NM.DeviceState.ACTIVATED) {
                 disconnect_vpn_cb ((VPNMenuItem) row);