[polari] connectionDetails: Use dedicated preference widgets

[Marge Bot <marge-bot src gnome org>]

commit 0ca05d3dcacad7a94bd05aa833f7d64c380cb936
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Mar 19 15:35:12 2022 +0100

    connectionDetails: Use dedicated preference widgets
    
    The current design trend is to use row-based preferences, and libadwaita
    provides dedicated widgets to implement those in a standard manner.
    
    Part-of: <https://gitlab.gnome.org/GNOME/polari/-/merge_requests/250>

 data/resources/connection-details.ui | 196 ++++++++++++++++-------------------
 src/connections.js                   |  14 +--
 2 files changed, 94 insertions(+), 116 deletions(-)
---
diff --git a/data/resources/connection-details.ui b/data/resources/connection-details.ui
index c30d7768..39e84ae0 100644
--- a/data/resources/connection-details.ui
+++ b/data/resources/connection-details.ui
@@ -1,115 +1,93 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="Gjs_ConnectionDetails" parent="GtkGrid">
-    <property name="row-spacing">6</property>
-    <property name="column-spacing">12</property>
+  <template class="Gjs_ConnectionDetails" parent="GtkBox">
     <child>
-      <object class="GtkLabel" id="server_label">
-        <property name="visible" bind-source="Gjs_ConnectionDetails"
-                  bind-property="has-service"
-                  bind-flags="invert-boolean|sync-create"/>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Server Address</property>
-        <property name="use-underline">True</property>
-        <property name="mnemonic-widget">serverEntry</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkEntry" id="serverEntry">
-        <property name="visible" bind-source="Gjs_ConnectionDetails"
-                  bind-property="has-service"
-                  bind-flags="invert-boolean|sync-create"/>
-        <property name="hexpand">True</property>
-        <property name="activates-default">True</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel" id="name_label">
-        <property name="visible" bind-source="Gjs_ConnectionDetails"
-                  bind-property="has-service"
-                  bind-flags="invert-boolean|sync-create"/>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">Net_work Name</property>
-        <property name="use-underline">True</property>
-        <property name="mnemonic-widget">nameEntry</property>
-        <layout>
-          <property name="column">0</property>
-          <property name="row">1</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkEntry" id="nameEntry">
-        <property name="visible" bind-source="Gjs_ConnectionDetails"
-                  bind-property="has-service"
-                  bind-flags="invert-boolean|sync-create"/>
-        <property name="hexpand">True</property>
-        <property name="activates-default">True</property>
-        <property name="placeholder-text" translatable="yes">optional</property>
-        <layout>
-          <property name="column">1</property>
-          <property name="row">1</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkCheckButton" id="sslCheckbox">
-        <property name="visible" bind-source="Gjs_ConnectionDetails"
-                  bind-property="has-service"
-                  bind-flags="invert-boolean|sync-create"/>
-        <property name="label" translatable="yes">Use secure c_onnection</property>
-        <property name="margin-bottom">24</property>
-        <property name="use-underline">True</property>
-        <layout>
-          <property name="column">1</property>
-          <property name="row">2</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel" id="nickname_label">
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Nickname</property>
-        <property name="use-underline">True</property>
-        <property name="mnemonic-widget">nickEntry</property>
-        <layout>
-          <property name="column">0</property>
-          <property name="row">3</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkEntry" id="nickEntry">
-        <property name="hexpand">True</property>
-        <property name="activates-default">True</property>
-        <layout>
-          <property name="column">1</property>
-          <property name="row">3</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel" id="realname_label">
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Real Name</property>
-        <property name="use-underline">True</property>
-        <property name="mnemonic-widget">realnameEntry</property>
-        <layout>
-          <property name="column">0</property>
-          <property name="row">4</property>
-        </layout>
-      </object>
-    </child>
-    <child>
-      <object class="GtkEntry" id="realnameEntry">
-        <property name="hexpand">True</property>
-        <property name="activates-default">True</property>
-        <property name="width-chars">30</property>
-        <property name="placeholder-text" translatable="yes">optional</property>
-        <layout>
-          <property name="column">1</property>
-          <property name="row">4</property>
-        </layout>
+      <object class="AdwClamp">
+        <property name="child">
+          <object class="GtkBox">
+           <property name="orientation">vertical</property>
+           <property name="spacing">24</property>
+           <child>
+             <object class="AdwPreferencesGroup">
+               <property name="hexpand">True</property>
+               <property name="visible" bind-source="Gjs_ConnectionDetails"
+                         bind-property="has-service"
+                         bind-flags="invert-boolean|sync-create"/>
+               <child>
+                 <object class="AdwActionRow">
+                   <property name="title" translatable="yes">_Server Address</property>
+                   <property name="use-underline">True</property>
+                   <property name="activatable-widget">serverEntry</property>
+                   <child type="suffix">
+                     <object class="GtkEntry" id="serverEntry">
+                       <property name="valign">center</property>
+                       <property name="activates-default">True</property>
+                     </object>
+                   </child>
+                 </object>
+               </child>
+               <child>
+                 <object class="AdwActionRow">
+                   <property name="title" translatable="yes">Net_work Name</property>
+                   <property name="use-underline">True</property>
+                   <property name="activatable-widget">nameEntry</property>
+                   <child type="suffix">
+                     <object class="GtkEntry" id="nameEntry">
+                       <property name="valign">center</property>
+                       <property name="activates-default">True</property>
+                       <property name="placeholder-text" translatable="yes">optional</property>
+                     </object>
+                   </child>
+                 </object>
+               </child>
+               <child>
+                 <object class="AdwActionRow">
+                   <property name="title" translatable="yes">Use secure c_onnection</property>
+                   <property name="use-underline">True</property>
+                   <property name="activatable-widget">sslSwitch</property>
+                   <child type="suffix">
+                     <object class="GtkSwitch" id="sslSwitch">
+                       <property name="valign">center</property>
+                     </object>
+                   </child>
+                 </object>
+               </child>
+             </object>
+           </child>
+           <child>
+             <object class="AdwPreferencesGroup">
+               <property name="hexpand">True</property>
+               <child>
+                 <object class="AdwActionRow">
+                   <property name="title" translatable="yes">_Nickname</property>
+                   <property name="use-underline">True</property>
+                   <property name="activatable-widget">nickEntry</property>
+                   <child type="suffix">
+                     <object class="GtkEntry" id="nickEntry">
+                       <property name="valign">center</property>
+                       <property name="activates-default">True</property>
+                     </object>
+                   </child>
+                 </object>
+               </child>
+               <child>
+                 <object class="AdwActionRow">
+                   <property name="title" translatable="yes">_Real Name</property>
+                   <property name="use-underline">True</property>
+                   <property name="activatable-widget">realnameEntry</property>
+                   <child type="suffix">
+                     <object class="GtkEntry" id="realnameEntry">
+                       <property name="valign">center</property>
+                       <property name="activates-default">True</property>
+                       <property name="placeholder-text" translatable="yes">optional</property>
+                     </object>
+                   </child>
+                 </object>
+               </child>
+             </object>
+           </child>
+          </object>
+        </property>
       </object>
     </child>
   </template>
diff --git a/src/connections.js b/src/connections.js
index 3f8cf6a7..1835a317 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -247,14 +247,14 @@ class ConnectionsList extends Gtk.ScrolledWindow {
 });
 
 export const ConnectionDetails = GObject.registerClass(
-class ConnectionDetails extends Gtk.Grid {
+class ConnectionDetails extends Gtk.Box {
     static [Gtk.template] = 'resource:///org/gnome/Polari/ui/connection-details.ui';
     static [Gtk.internalChildren] = [
         'nameEntry',
         'serverEntry',
         'nickEntry',
         'realnameEntry',
-        'sslCheckbox',
+        'sslSwitch',
     ];
 
     static [GObject.properties] = {
@@ -294,7 +294,7 @@ class ConnectionDetails extends Gtk.Grid {
             this._onCanConfirmChanged.bind(this));
         this._realnameEntry.connect('changed',
             this._onCanConfirmChanged.bind(this));
-        this._sslCheckbox.connect('toggled',
+        this._sslSwitch.connect('notify::active',
             this._onCanConfirmChanged.bind(this));
 
         let realnameStore = new Gtk.ListStore();
@@ -339,7 +339,7 @@ class ConnectionDetails extends Gtk.Grid {
 
         if (this._realnameEntry.text)
             params.fullname = this._realnameEntry.text.trim();
-        if (this._sslCheckbox.active)
+        if (this._sslSwitch.active)
             params.use_ssl = true;
         if (port)
             params.port = port;
@@ -360,7 +360,7 @@ class ConnectionDetails extends Gtk.Grid {
         this._serverEntry.text = this._savedServer;
         this._nickEntry.text = this._savedNick;
         this._realnameEntry.text = this._savedRealname;
-        this._sslCheckbox.active = this._savedSSL;
+        this._sslSwitch.active = this._savedSSL;
 
         if (this._serverEntry.visible)
             this._serverEntry.grab_focus();
@@ -392,7 +392,7 @@ class ConnectionDetails extends Gtk.Grid {
         this._nickEntry.text = this._savedNick;
         this._realnameEntry.text = this._savedRealname;
         this._nameEntry.text = this._savedName;
-        this._sslCheckbox.active = this._savedSSL;
+        this._sslSwitch.active = this._savedSSL;
     }
 
     // eslint-disable-next-line camelcase
@@ -401,7 +401,7 @@ class ConnectionDetails extends Gtk.Grid {
                             this._serverEntry.text !== this._savedServer ||
                             this._nickEntry.text !== this._savedNick ||
                             this._realnameEntry.text !== this._savedRealname ||
-                            this._sslCheckbox.active !== this._savedSSL;
+                            this._sslSwitch.active !== this._savedSSL;
 
         return this._serverEntry.get_text_length() > 0 &&
                this._nickEntry.get_text_length() > 0 &&