[gnome-sound-recorder] recording-row: GtkListBoxRow -> HdyPreferencesRow

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit b4d3986cc40db7dccc499c2ea7a1a9bc81b7ab20
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Mon May 25 05:21:41 2020 -0700

    recording-row: GtkListBoxRow ->  HdyPreferencesRow

 data/ui/row.ui | 127 ++++++++++++++++++---------------------------------------
 src/row.js     |   9 ++--
 2 files changed, 44 insertions(+), 92 deletions(-)
---
diff --git a/data/ui/row.ui b/data/ui/row.ui
index b7a356c..999005a 100644
--- a/data/ui/row.ui
+++ b/data/ui/row.ui
@@ -1,25 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.0 -->
+<!-- Generated with glade 3.22.2 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <template class="Gjs_Row" parent="GtkListBoxRow">
+  <requires lib="libhandy" version="0.0"/>
+  <template class="Gjs_Row" parent="HdyPreferencesRow">
     <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="hexpand">True</property>
-    <property name="activatable">False</property>
-    <property name="selectable">False</property>
+    <property name="can_focus">True</property>
     <child>
       <object class="GtkBox">
-        <property name="height_request">45</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin">8</property>
-        <property name="hexpand">True</property>
-        <property name="vexpand">True</property>
+        <property name="no_show_all">True</property>
         <child>
           <object class="GtkStack" id="playbackStack">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="margin_start">12</property>
             <child>
               <object class="GtkButton" id="playButton">
                 <property name="name">playButton</property>
@@ -72,103 +68,58 @@
           </packing>
         </child>
         <child>
-          <object class="GtkBox">
+          <object class="HdyActionRow" id="action_row">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="valign">center</property>
-            <property name="margin_start">8</property>
-            <property name="margin_end">8</property>
+            <property name="can_focus">True</property>
             <property name="hexpand">True</property>
-            <property name="orientation">vertical</property>
             <child>
-              <object class="GtkLabel" id="fileNameLabel">
-                <property name="name">FileNameLabel</property>
-                <property name="visible">True</property>
+              <object class="GtkSeparator" id="separator">
                 <property name="can_focus">False</property>
-                <property name="halign">start</property>
-                <property name="valign">center</property>
-                <property name="hexpand">True</property>
-                <property name="ellipsize">end</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                </attributes>
+                <property name="margin_top">8</property>
+                <property name="margin_bottom">8</property>
+                <property name="orientation">vertical</property>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkLabel" id="fileDurationLabel">
+              <object class="GtkButton" id="deleteButton">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="halign">center</property>
                 <property name="valign">center</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">1</property>
-              </packing>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="deleteButton">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="tooltip_text" translatable="yes">Delete</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="margin_start">4</property>
-            <property name="margin_end">4</property>
-            <property name="vexpand">True</property>
-            <property name="always_show_image">True</property>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">user-trash-symbolic</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">user-trash-symbolic</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="infoButton">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="tooltip_text" translatable="yes">Details</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="margin_start">4</property>
-            <property name="margin_end">4</property>
-            <property name="vexpand">True</property>
-            <property name="always_show_image">True</property>
             <child>
-              <object class="GtkImage">
+              <object class="GtkButton" id="infoButton">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">dialog-information-symbolic</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">dialog-information-symbolic</property>
+                  </object>
+                </child>
               </object>
             </child>
+            <style>
+              <class name="header"/>
+            </style>
           </object>
           <packing>
             <property name="expand">False</property>
             <property name="fill">True</property>
-            <property name="position">3</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>
diff --git a/src/row.js b/src/row.js
index eabb151..9cdc154 100644
--- a/src/row.js
+++ b/src/row.js
@@ -1,5 +1,6 @@
 const Gtk = imports.gi.Gtk;
 const GObject = imports.gi.GObject;
+const Handy = imports.gi.Handy;
 
 var Info = imports.info;
 var Utils = imports.utils;
@@ -11,20 +12,20 @@ var RowState = {
 
 var Row = GObject.registerClass({ // eslint-disable-line no-unused-vars
     Template: 'resource:///org/gnome/SoundRecorder/ui/row.ui',
-    InternalChildren: ['playbackStack', 'fileNameLabel', 'fileDurationLabel', 'playButton', 'pauseButton', 
'infoButton', 'deleteButton'],
+    InternalChildren: ['playbackStack', 'action_row', 'playButton', 'pauseButton', 'infoButton', 
'deleteButton'],
     Signals: {
         'play': { param_types: [GObject.TYPE_STRING] },
         'pause': {},
         'deleted': {},
     },
-}, class Row extends Gtk.ListBoxRow {
+}, class Row extends Handy.PreferencesRow {
     _init(recording) {
         super._init({});
 
-        this._fileNameLabel.label = recording.name;
+        this._action_row.title = recording.name;
 
         recording.connect('notify::duration', () => {
-            this._fileDurationLabel.label = Utils.Time.formatTime(recording.duration);
+            this._action_row.subtitle = Utils.Time.formatTime(recording.duration);
         });
 
         this._playButton.connect('clicked', () => {