thunderbolt: Modernize Device Dialog UIthunderbolt-devices-modernization

The device name is now shown on the dialog's titlebar and not in
a row.

3 files changed, 97 insertions, 326 deletions

diff --git a/panels/thunderbolt/cc-bolt-device-dialog.c b/panels/thunderbolt/cc-bolt-device-dialog.c
index 20075bea9..f44b83f6d 100644
--- a/panels/thunderbolt/cc-bolt-device-dialog.c
+++ b/panels/thunderbolt/cc-bolt-device-dialog.c
@@ -20,6 +20,7 @@
 #include <config.h>
 
 #include <glib/gi18n.h>
+#include "cc-list-row.h"
 
 #include "bolt-device.h"
 #include "bolt-error.h"
@@ -32,31 +33,22 @@
 
 struct _CcBoltDeviceDialog
 {
-  GtkDialog     parent;
+  AdwWindow     parent;
 
   BoltClient   *client;
   BoltDevice   *device;
   GCancellable *cancel;
 
-  /* main ui */
-  GtkHeaderBar *header_bar;
-
-  /* notifications */
-  GtkLabel    *notify_label;
-  GtkRevealer *notify_revealer;
+  AdwToastOverlay *toast_overlay;
 
   /* device details */
-  GtkLabel *name_label;
-  GtkLabel *status_label;
-  GtkLabel *uuid_label;
-
-  GtkLabel *time_title;
-  GtkLabel *time_label;
+  CcListRow *status_row;
+  CcListRow *uuid_row;
+  CcListRow *time_row;
 
   /* parents */
-  GtkExpander *parents_expander;
-  GtkLabel    *parents_label;
-  GtkListBox  *parents_devices;
+  AdwPreferencesGroup *parents_group;
+  GtkListBox *parents_devices;
 
   /* actions */
   GtkWidget  *button_box;
@@ -65,13 +57,10 @@ struct _CcBoltDeviceDialog
   GtkButton  *forget_button;
 };
 
-static void     on_notify_button_clicked_cb (GtkButton          *button,
-                                             CcBoltDeviceDialog *panel);
-
 static void     on_forget_button_clicked_cb (CcBoltDeviceDialog *dialog);
 static void     on_connect_button_clicked_cb (CcBoltDeviceDialog *dialog);
 
-G_DEFINE_TYPE (CcBoltDeviceDialog, cc_bolt_device_dialog, GTK_TYPE_DIALOG);
+G_DEFINE_TYPE (CcBoltDeviceDialog, cc_bolt_device_dialog, ADW_TYPE_WINDOW);
 
 #define RESOURCE_UI "/org/gnome/control-center/thunderbolt/cc-bolt-device-dialog.ui"
 
@@ -152,11 +141,10 @@ dialog_update_from_device (CcBoltDeviceDialog *dialog)
       label = generated;
     }
 
-  gtk_label_set_label (dialog->name_label, label);
   gtk_window_set_title (GTK_WINDOW (dialog), label);
 
   status_brief = status_to_string_for_ui (dev);
-  gtk_label_set_label (dialog->status_label, status_brief);
+  cc_list_row_set_secondary_label (dialog->status_row, status_brief);
   gtk_widget_set_visible (GTK_WIDGET (dialog->forget_button), stored);
 
   /* while we are having an ongoing operation we are setting the buttons
@@ -167,30 +155,30 @@ dialog_update_from_device (CcBoltDeviceDialog *dialog)
     gtk_widget_set_visible (GTK_WIDGET (dialog->connect_button),
                             status == BOLT_STATUS_CONNECTED);
 
-  gtk_label_set_label (dialog->uuid_label, uuid);
+  cc_list_row_set_secondary_label (dialog->uuid_row, uuid);
 
   if (bolt_status_is_authorized (status))
     {
       /* Translators: The time point the device was authorized. */
-      gtk_label_set_label (dialog->time_title, _("Authorized at:"));
+      adw_preferences_row_set_title (ADW_PREFERENCES_ROW (dialog->time_row), _("Authorized at"));
       timestamp = bolt_device_get_authtime (dev);
     }
   else if (bolt_status_is_connected (status))
     {
       /* Translators: The time point the device was connected. */
-      gtk_label_set_label (dialog->time_title, _("Connected at:"));
+      adw_preferences_row_set_title (ADW_PREFERENCES_ROW (dialog->time_row), _("Connected at"));
       timestamp = bolt_device_get_conntime (dev);
     }
   else
     {
       /* Translators: The time point the device was enrolled,
        * i.e. authorized and stored in the device database. */
-      gtk_label_set_label (dialog->time_title, _("Enrolled at:"));
+      adw_preferences_row_set_title (ADW_PREFERENCES_ROW (dialog->time_row), _("Enrolled at"));
       timestamp = bolt_device_get_storetime (dev);
     }
 
   timestr = bolt_epoch_format (timestamp, "%c");
-  gtk_label_set_label (dialog->time_label, timestr);
+  cc_list_row_set_secondary_label (dialog->time_row, timestr);
 
 }
 
@@ -232,8 +220,8 @@ dialog_operation_done (CcBoltDeviceDialog *dialog,
 
   if (error != NULL)
     {
-      gtk_label_set_label (dialog->notify_label, error->message);
-      gtk_revealer_set_reveal_child (dialog->notify_revealer, TRUE);
+      AdwToast *toast = adw_toast_new (error->message);
+      adw_toast_overlay_add_toast (dialog->toast_overlay, toast);
 
       /* set the *other* button to sensitive */
       gtk_widget_set_sensitive (cb, cb != sender);
@@ -349,14 +337,6 @@ on_forget_button_clicked_cb (CcBoltDeviceDialog *dialog)
 }
 
 static void
-on_notify_button_clicked_cb (GtkButton          *button,
-                             CcBoltDeviceDialog *dialog)
-{
-  gtk_revealer_set_reveal_child (dialog->notify_revealer, FALSE);
-}
-
-
-static void
 cc_bolt_device_dialog_finalize (GObject *object)
 {
   CcBoltDeviceDialog *dialog = CC_BOLT_DEVICE_DIALOG (object);
@@ -378,28 +358,22 @@ cc_bolt_device_dialog_class_init (CcBoltDeviceDialogClass *klass)
   object_class->finalize = cc_bolt_device_dialog_finalize;
 
   gtk_widget_class_set_template_from_resource (widget_class, RESOURCE_UI);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, header_bar);
 
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, notify_label);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, notify_revealer);
+  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, toast_overlay);
 
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, name_label);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, status_label);
+  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, status_row);
 
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, uuid_label);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, time_title);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, time_label);
+  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, uuid_row);
+  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, time_row);
 
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, parents_expander);
-  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, parents_label);
   gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, parents_devices);
+  gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, parents_group);
 
   gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, button_box);
   gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, spinner);
   gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, connect_button);
   gtk_widget_class_bind_template_child (widget_class, CcBoltDeviceDialog, forget_button);
 
-  gtk_widget_class_bind_template_callback (widget_class, on_notify_button_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_connect_button_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_forget_button_clicked_cb);
 }
@@ -418,7 +392,6 @@ cc_bolt_device_dialog_new (void)
   CcBoltDeviceDialog *dialog;
 
   dialog = g_object_new (CC_TYPE_BOLT_DEVICE_DIALOG,
-                         "use-header-bar", TRUE,
                          NULL);
   return dialog;
 }
@@ -458,7 +431,7 @@ cc_bolt_device_dialog_set_device (CcBoltDeviceDialog *dialog,
       while ((child = gtk_widget_get_first_child (GTK_WIDGET (dialog->parents_devices))) != NULL)
         gtk_list_box_remove (dialog->parents_devices, child);
 
-      gtk_widget_set_visible (GTK_WIDGET (dialog->parents_expander), FALSE);
+      gtk_widget_set_visible (GTK_WIDGET (dialog->parents_group), FALSE);
     }
 
   if (device == NULL)
@@ -486,8 +459,8 @@ cc_bolt_device_dialog_set_device (CcBoltDeviceDialog *dialog,
 				   "Depends on %u other devices",
 				   parents->len), parents->len);
 
-  gtk_label_set_label (dialog->parents_label, msg);
-  gtk_widget_set_visible (GTK_WIDGET (dialog->parents_expander), TRUE);
+  adw_preferences_group_set_title (dialog->parents_group, msg);
+  gtk_widget_set_visible (GTK_WIDGET (dialog->parents_group), TRUE);
 
   for (i = 0; i < parents->len; i++)
     {
diff --git a/panels/thunderbolt/cc-bolt-device-dialog.h b/panels/thunderbolt/cc-bolt-device-dialog.h
index abdb46f87..a18112470 100644
--- a/panels/thunderbolt/cc-bolt-device-dialog.h
+++ b/panels/thunderbolt/cc-bolt-device-dialog.h
@@ -19,7 +19,7 @@
 
 #pragma once
 
-#include <gtk/gtk.h>
+#include <adwaita.h>
 
 #include "bolt-client.h"
 #include "bolt-device.h"
@@ -28,7 +28,7 @@ G_BEGIN_DECLS
 
 #define CC_TYPE_BOLT_DEVICE_DIALOG cc_bolt_device_dialog_get_type ()
 
-G_DECLARE_FINAL_TYPE (CcBoltDeviceDialog, cc_bolt_device_dialog, CC, BOLT_DEVICE_DIALOG, GtkDialog);
+G_DECLARE_FINAL_TYPE (CcBoltDeviceDialog, cc_bolt_device_dialog, CC, BOLT_DEVICE_DIALOG, AdwWindow);
 
 CcBoltDeviceDialog * cc_bolt_device_dialog_new (void);
 
diff --git a/panels/thunderbolt/cc-bolt-device-dialog.ui b/panels/thunderbolt/cc-bolt-device-dialog.ui
index 55dff880e..fa5fed6ad 100644
--- a/panels/thunderbolt/cc-bolt-device-dialog.ui
+++ b/panels/thunderbolt/cc-bolt-device-dialog.ui
@@ -1,313 +1,111 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.20.0 -->
 <interface>
-  <requires lib="gtk+" version="3.20"/>
-  <template class="CcBoltDeviceDialog" parent="GtkDialog">
+  <template class="CcBoltDeviceDialog" parent="AdwWindow">
     <property name="title">Device Identifier</property>
-    <property name="use_header_bar">1</property>
-    <property name="resizable">False</property>
     <property name="modal">True</property>
     <property name="hide-on-close">True</property>
-
-    <child internal-child="headerbar">
-      <object class="GtkHeaderBar" id="header_bar">
-        <property name="show_title_buttons">True</property>
-      </object>
-    </child>
-
+    <property name="width-request">480</property>
+    <property name="height-request">360</property>
     <child>
       <object class="GtkBox">
         <property name="orientation">vertical</property>
-        <property name="margin-bottom">24</property>
         <child>
-          <object class="GtkOverlay">
-            <child type="overlay">
-              <object class="GtkRevealer" id="notify_revealer">
-                <property name="halign">center</property>
-                <property name="valign">start</property>
-                <property name="transition_type">slide-down</property>
-                <child>
-                  <object class="GtkFrame">
-                    <child>
-                      <object class="GtkBox">
-                        <property name="spacing">12</property>
-                        <child>
-                          <object class="GtkLabel" id="notify_label">
-                            <property name="use_markup">True</property>
-                            <property name="wrap">True</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkButton">
-                          <accessibility>
-                            <property name="label" translatable="yes">Close notification</property>
-                          </accessibility>
-                          <style>
-                            <class name="flat" />
-                          </style>
-                            <signal name="clicked"
-                                    handler="on_notify_button_clicked_cb"
-                                    object="CcBoltDeviceDialog"
-                                    swapped="no" />
-                            <child>
-                              <object class="GtkImage">
-                                <property name="icon-name">window-close-symbolic</property>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="app-notification" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
+          <object class="AdwHeaderBar">
+            <property name="show-end-title-buttons">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="AdwToastOverlay" id="toast_overlay">
             <child>
-              <object class="GtkBox">
-                <property name="hexpand">True</property>
-                <property name="vexpand">True</property>
-                <property name="orientation">vertical</property>
-
+              <object class="AdwPreferencesPage">
                 <child>
-                  <object class="GtkGrid">
-                    <property name="margin-start">72</property>
-                    <property name="margin-end">72</property>
-                    <property name="margin-top">24</property>
-                    <property name="margin-bottom">0</property>
-                    <property name="row_spacing">12</property>
-                    <property name="column_spacing">24</property>
-                    <child>
-                      <object class="GtkLabel" id="name_title_label">
-                        <property name="halign">end</property>
-                        <property name="hexpand">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="label" translatable="yes">Name:</property>
-                        <property name="justify">right</property>
-                        <property name="xalign">1</property>
-                        <property name="mnemonic_widget">name_label</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
+                  <object class="AdwPreferencesGroup">
                     <child>
-                      <object class="GtkLabel" id="name_label">
-                        <property name="hexpand">True</property>
-                        <property name="label">Device identifier</property>
-                        <property name="use_markup">True</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">0</property>
-                        </layout>
+                      <object class="CcListRow" id="status_row">
+                        <property name="title" translatable="yes">Status</property>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkLabel" id="status_title_label">
-                        <property name="halign">end</property>
-                        <property name="hexpand">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="label" translatable="yes">Status:</property>
-                        <property name="justify">right</property>
-                        <property name="xalign">1</property>
-                        <property name="mnemonic_widget">status_label</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">1</property>
-                        </layout>
+                      <object class="CcListRow" id="uuid_row">
+                        <property name="title" translatable="yes">UUID</property>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkLabel" id="status_label">
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <property name="label">Status</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">1</property>
-                        </layout>
+                      <object class="CcListRow" id="time_row">
+                        <property name="title" translatable="yes">Timestamp</property>
                       </object>
                     </child>
-
-                    <child>
-                      <object class="GtkLabel" id="uuid_title_label">
-                        <property name="halign">end</property>
-                        <property name="hexpand">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="label" translatable="yes">UUID:</property>
-                        <property name="justify">right</property>
-                        <property name="xalign">1</property>
-                        <property name="mnemonic_widget">uuid_label</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">2</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="uuid_label">
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <property name="label">Status</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">2</property>
-                        </layout>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkLabel" id="time_title">
-                        <property name="halign">end</property>
-                        <property name="hexpand">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="label">Timestamp:</property>
-                        <property name="justify">right</property>
-                        <property name="xalign">1</property>
-                        <property name="mnemonic_widget">time_label</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">3</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="time_label">
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <property name="label">Status</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">3</property>
-                        </layout>
-                      </object>
-                    </child>
-
                   </object>
                 </child>
-                <!-- end of grid -->
                 <child>
-                  <object class="GtkExpander" id="parents_expander">
+                  <object class="AdwPreferencesGroup" id="parents_group">
                     <property name="visible">False</property>
-                    <property name="halign">fill</property>
-                    <property name="margin-start">72</property>
-                    <property name="margin-end">72</property>
-                    <property name="margin-top">12</property>
-                    <property name="margin-bottom">0</property>
-                    <child type="label">
-                      <object class="GtkLabel" id="parents_label">
-                                                <property name="halign">end</property>
-                        <property name="hexpand">False</property>
-                        <property name="vexpand">False</property>
-                        <property name="label">Depends on other devices:</property>
-                        <property name="justify">center</property>
-                        <property name="xalign">1</property>
-                      </object>
-                    </child>
+                    <property name="title" translatable="yes">Depends on other devices</property>
                     <child>
-                      <object class="GtkListBox" id="parents_devices">
-                        <property name="valign">start</property>
-                        <property name="vexpand">False</property>
-                                                <property name="selection-mode">none</property>
-                        <style>
-                          <class name="boxed-list" />
-                        </style>
-                      </object>
+                      <object class="GtkListBox" id="parents_devices"/>
                     </child>
                   </object>
                 </child>
-                <!-- end of -->
-                <child>
-                  <object class="GtkBox" id="button_box">
-                    <property name="orientation">horizontal</property>
-                    <property name="spacing">12</property>
-                    <property name="margin-start">72</property>
-                    <property name="margin-end">72</property>
-                    <property name="margin-top">36</property>
-                    <property name="margin-bottom">0</property>
-                    <property name="halign">fill</property>
-                    <child>
-                      <object class="GtkSpinner" id="spinner">
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="spinning">False</property>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkButton" id="connect_button">
-                        <property name="label" translatable="yes">Authorize and Connect</property>
-                        <property name="receives_default">True</property>
-                        <property name="halign">fill</property>
-
-                        <signal name="clicked"
-                                handler="on_connect_button_clicked_cb"
-                                object="CcBoltDeviceDialog"
-                                swapped="yes" />
-                        <style>
-                          <class name="suggested-action"/>
-                        </style>
-                      </object>
-                    </child>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="button_box">
+            <property name="orientation">horizontal</property>
+            <property name="spacing">12</property>
+            <property name="margin-start">72</property>
+            <property name="margin-end">72</property>
+            <property name="margin-top">36</property>
+            <property name="margin-bottom">0</property>
+            <property name="hexpand">True</property>
+            <child>
+              <object class="GtkSpinner" id="spinner">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="spinning">False</property>
+              </object>
+            </child>
 
-                    <child>
-                      <object class="GtkButton" id="forget_button">
-                        <property name="label" translatable="yes">Forget Device</property>
-                        <property name="receives_default">False</property>
-                        <property name="halign">fill</property>
-                        <signal name="clicked"
-                                handler="on_forget_button_clicked_cb"
-                                object="CcBoltDeviceDialog"
-                                swapped="yes" />
-                        <style>
-                          <class name="destructive-action"/>
-                        </style>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkBox" id="spinner_box">
-                      </object>
-                    </child>
-                  </object>
+            <child>
+              <object class="GtkButton" id="connect_button">
+                <property name="hexpand">True</property>
+                <property name="label" translatable="yes">Authorize and Connect</property>
+                <property name="receives_default">True</property>
 
-                </child>
+                <signal name="clicked"
+                        handler="on_connect_button_clicked_cb"
+                        object="CcBoltDeviceDialog"
+                        swapped="yes" />
+                <style>
+                  <class name="suggested-action"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="forget_button">
+                <property name="hexpand">True</property>
+                <property name="label" translatable="yes">Forget Device</property>
+                <property name="receives_default">False</property>
+                <signal name="clicked"
+                        handler="on_forget_button_clicked_cb"
+                        object="CcBoltDeviceDialog"
+                        swapped="yes" />
+                <style>
+                  <class name="destructive-action"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox" id="spinner_box">
               </object>
             </child>
-
           </object>
         </child>
       </object>
     </child>
   </template>
 
-  <object class="GtkSizeGroup" id="device_titles_sizegroup">
-    <widgets>
-      <widget name="name_title_label"/>
-      <widget name="status_title_label"/>
-      <widget name="uuid_title_label"/>
-      <widget name="time_title"/>
-    </widgets>
-  </object>
-  <object class="GtkSizeGroup" id="device_labels_sizegroup">
-    <widgets>
-      <widget name="name_label"/>
-      <widget name="status_label"/>
-      <widget name="uuid_label"/>
-      <widget name="time_label"/>
-    </widgets>
-  </object>
-
   <object class="GtkSizeGroup" id="actions_sizegroup">
     <widgets>
       <widget name="forget_button"/>