[seahorse/gkr/listify-properties: 3/3] gkr: Use GtkListBox for Item Properties dialog

[Niels De Graef <nielsdg src gnome org>]

commit f2936947542920ad1076308bbf7f8b366c70fc4f
Author: Niels De Graef <nielsdegraef gmail com>
Date:   Sat Jul 31 09:32:51 2021 +0200

    gkr: Use GtkListBox for Item Properties dialog

 gkr/gkr-item-properties.vala        |  41 ++--
 gkr/seahorse-gkr-item-properties.ui | 370 ++++++++++++++----------------------
 2 files changed, 168 insertions(+), 243 deletions(-)
---
diff --git a/gkr/gkr-item-properties.vala b/gkr/gkr-item-properties.vala
index 6d6e43f3..e7edb713 100644
--- a/gkr/gkr-item-properties.vala
+++ b/gkr/gkr-item-properties.vala
@@ -30,15 +30,15 @@ public class Seahorse.Gkr.ItemProperties : Gtk.Dialog {
     [GtkChild]
     private unowned Gtk.Label type_field;
     [GtkChild]
-    private unowned Gtk.Label details_label;
+    private unowned Hdy.PreferencesGroup details_group;
     [GtkChild]
-    private unowned Gtk.Label details_box;
+    private unowned Gtk.ListBox details_box;
     [GtkChild]
-    private unowned Gtk.Label server_label;
+    private unowned Hdy.ActionRow server_row;
     [GtkChild]
     private unowned Gtk.Label server_field;
     [GtkChild]
-    private unowned Gtk.Label login_label;
+    private unowned Hdy.ActionRow login_row;
     [GtkChild]
     private unowned Gtk.Label login_field;
     [GtkChild]
@@ -159,11 +159,8 @@ public class Seahorse.Gkr.ItemProperties : Gtk.Dialog {
 
     private void update_visibility() {
         var use = this.item.use;
-        bool visible = use == Use.NETWORK || use == Use.WEB;
-        this.server_label.visible = visible;
-        this.server_field.visible = visible;
-        this.login_label.visible = visible;
-        this.login_field.visible = visible;
+        this.server_row.visible =
+            this.login_row.visible = (use == Use.NETWORK || use == Use.WEB);
     }
 
     private void update_server() {
@@ -181,23 +178,31 @@ public class Seahorse.Gkr.ItemProperties : Gtk.Dialog {
     }
 
     private void update_details() {
-        var contents = new GLib.StringBuilder();
         var attrs = this.item.attributes;
         var iter = GLib.HashTableIter<string, string>(attrs);
+
+        this.details_group.visible = (attrs.size() > 0);
         string key, value;
         while (iter.next(out key, out value)) {
             if (key.has_prefix("gkr:") || key.has_prefix("xdg:"))
                 continue;
-            contents.append_printf("<b>%s</b>: %s\n",
-                                   GLib.Markup.escape_text(key),
-                                   GLib.Markup.escape_text(value));
-        }
 
-        if (contents.len > 0) {
-            this.details_label.visible = true;
-            this.details_box.visible = true;
-            this.details_box.label = contents.str;
+            var row = new Hdy.ActionRow();
+            row.title = key;
+            row.can_focus = false;
+
+            var label = new Gtk.Label (value);
+            label.xalign = 1;
+            label.selectable = true;
+            label.wrap = true;
+            label.wrap_mode = Pango.WrapMode.WORD_CHAR;
+            label.max_width_chars = 32;
+            row.add(label);
+
+            row.show_all();
+            this.details_box.insert(row, -1);
         }
+
     }
 
     private async void save_password() {
diff --git a/gkr/seahorse-gkr-item-properties.ui b/gkr/seahorse-gkr-item-properties.ui
index 9c04431d..32e46c9d 100644
--- a/gkr/seahorse-gkr-item-properties.ui
+++ b/gkr/seahorse-gkr-item-properties.ui
@@ -6,7 +6,6 @@
     <property name="height_request">400</property>
     <property name="can_focus">False</property>
     <property name="title" translatable="yes">Item Properties</property>
-    <property name="resizable">False</property>
     <property name="window_position">center-on-parent</property>
     <property name="type_hint">dialog</property>
     <child>
@@ -14,14 +13,11 @@
     </child>
     <child internal-child="vbox">
       <object class="GtkBox">
-        <property name="can_focus">False</property>
-        <property name="halign">center</property>
-        <property name="margin">12</property>
+        <property name="halign">fill</property>
         <property name="orientation">vertical</property>
-        <property name="spacing">2</property>
+        <property name="border_width">0</property>
         <child internal-child="action_area">
           <object class="GtkButtonBox">
-            <property name="can_focus">False</property>
           </object>
           <packing>
             <property name="expand">False</property>
@@ -30,64 +26,157 @@
           </packing>
         </child>
         <child>
-          <object class="GtkGrid">
+          <object class="GtkScrolledWindow">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="row_spacing">12</property>
-            <property name="column_spacing">12</property>
+            <property name="hscrollbar_policy">never</property>
+            <property name="vscrollbar_policy">automatic</property>
+            <property name="propagate_natural_height">True</property>
+            <property name="propagate_natural_width">True</property>
             <child>
-              <object class="GtkLabel">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes">Description</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkEntry" id="description_field">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="width_chars">0</property>
-                <property name="max_width_chars">40</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes">Password</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkBox" id="password_box_area">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
+                <property name="orientation">vertical</property>
+                <property name="margin">18</property>
+                <property name="spacing">12</property>
+                <child>
+                  <object class="GtkListBox">
+                    <property name="visible">True</property>
+                    <property name="selection_mode">none</property>
+                    <style>
+                      <class name="content"/>
+                    </style>
+                    <child>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes">Description</property>
+                        <property name="activatable_widget">description_field</property>
+                        <child>
+                          <object class="GtkEntry" id="description_field">
+                            <property name="visible">True</property>
+                            <property name="valign">center</property>
+                            <property name="can_focus">True</property>
+                            <property name="max_width_chars">32</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes">Password</property>
+                        <child>
+                          <object class="GtkBox" id="password_box_area">
+                            <property name="visible">True</property>
+                            <property name="valign">center</property>
+                            <child>
+                              <object class="GtkButton">
+                                <property name="label" translatable="yes">Copy</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">True</property>
+                                <property name="receives_default">True</property>
+                                <signal name="clicked" handler="on_copy_button_clicked" swapped="no"/>
+                              </object>
+                              <packing>
+                                <property name="expand">False</property>
+                                <property name="fill">True</property>
+                                <property name="pack_type">end</property>
+                                <property name="position">1</property>
+                              </packing>
+                            </child>
+                            <style>
+                              <class name="linked"/>
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes" comments="To translators: This is the noun 
not the verb.">Use</property>
+                        <child>
+                          <object class="GtkLabel" id="use_field">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes">Type</property>
+                        <child>
+                          <object class="GtkLabel" id="type_field">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="HdyActionRow" id="server_row">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes">Server</property>
+                        <child>
+                          <object class="GtkLabel" id="server_field">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="HdyActionRow" id="login_row">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="title" translatable="yes">Login</property>
+                        <child>
+                          <object class="GtkLabel" id="login_field">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="HdyPreferencesGroup" id="details_group">
+                    <property name="title" translatable="yes">Details</property>
+                    <child>
+                      <object class="GtkListBox" id="details_box">
+                        <property name="visible">True</property>
+                        <property name="selection_mode">none</property>
+                        <property name="can_focus">False</property>
+                        <style>
+                          <class name="content"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
                 <child>
                   <object class="GtkButton">
-                    <property name="label" translatable="yes">Copy</property>
+                    <property name="label" translatable="yes">Delete Password</property>
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <signal name="clicked" handler="on_copy_button_clicked" swapped="no"/>
+                    <property name="halign">end</property>
+                    <signal name="clicked" handler="on_delete_button_clicked" swapped="no"/>
+                    <style>
+                      <class name="destructive-action"/>
+                    </style>
                   </object>
                   <packing>
                     <property name="expand">False</property>
@@ -96,178 +185,9 @@
                     <property name="position">1</property>
                   </packing>
                 </child>
-                <style>
-                  <class name="linked"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes" comments="To translators: This is the noun not the 
verb.">Use</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
               </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="use_field">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes">Type</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">3</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="type_field">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">3</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="server_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes">Server</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">4</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="server_field">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">4</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="login_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="label" translatable="yes">Login</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">5</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="login_field">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">5</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="details_label">
-                <property name="can_focus">False</property>
-                <property name="no_show_all">True</property>
-                <property name="halign">end</property>
-                <property name="valign">start</property>
-                <property name="label" translatable="yes">Details</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">6</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="details_box">
-                <property name="can_focus">False</property>
-                <property name="no_show_all">True</property>
-                <property name="halign">start</property>
-                <property name="use_markup">True</property>
-                <property name="wrap">True</property>
-                <property name="wrap_mode">word-char</property>
-                <property name="selectable">True</property>
-                <property name="width_chars">40</property>
-                <property name="max_width_chars">50</property>
-                <property name="xalign">0</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">6</property>
-              </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton">
-            <property name="label" translatable="yes">Delete Password</property>
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="halign">end</property>
-            <signal name="clicked" handler="on_delete_button_clicked" swapped="no"/>
-            <style>
-              <class name="destructive-action"/>
-            </style>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="pack_type">end</property>
-            <property name="position">1</property>
-          </packing>
         </child>
       </object>
     </child>