[gnome-sound-recorder] window: Use HdyStatusPage for the empty state

[Christopher Davis <christopherdavis src gnome org>]

commit 8a1e97038c2a3a15f2c2b632dfeb88b5bc09d35f
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Fri Feb 26 15:20:10 2021 +0100

    window: Use HdyStatusPage for the empty state
    
    This makes the style consistent across GNOME, simplifies the code, and
    ensures translations won't make that page too large to fit phones.

 data/ui/window.ui | 62 +++----------------------------------------------------
 src/window.js     |  4 ++--
 2 files changed, 5 insertions(+), 61 deletions(-)
---
diff --git a/data/ui/window.ui b/data/ui/window.ui
index 53bcdef..58e8608 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -118,66 +118,10 @@
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
                 <child>
-                  <object class="GtkBox">
+                  <object class="HdyStatusPage" id="emptyPage">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkImage" id="emptyIcon">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="pixel_size">96</property>
-                        <style>
-                          <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="margin_top">8</property>
-                        <property name="label" translatable="yes">Add Recordings</property>
-                        <style>
-                          <class name="dim-label"/>
-                          <class name="title-1"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="margin_top">4</property>
-                        <property name="label" translatable="yes">Use the &lt;b&gt;Record&lt;/b&gt; button 
to make sound recordings</property>
-                        <property name="use_markup">True</property>
-                        <property name="justify">center</property>
-                        <property name="wrap">True</property>
-                        <property name="max_width_chars">50</property>
-                        <style>
-                          <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">2</property>
-                      </packing>
-                    </child>
+                    <property name="title" translatable="yes">Add Recordings</property>
+                    <property name="description" translatable="yes">Use the &lt;b&gt;Record&lt;/b&gt; button 
to make sound recordings</property>
                   </object>
                   <packing>
                     <property name="name">empty</property>
diff --git a/src/window.js b/src/window.js
index ff92f2e..79531f6 100644
--- a/src/window.js
+++ b/src/window.js
@@ -34,7 +34,7 @@ var WindowState = {
 var Window = GObject.registerClass({
     Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
     InternalChildren: [
-        'mainStack', 'emptyIcon', 'column', 'headerRevealer',
+        'mainStack', 'emptyPage', 'column', 'headerRevealer',
         'notificationRevealer', 'notificationMessage',
         'notificationUndoBtn', 'notificationCloseBtn',
     ],
@@ -99,7 +99,7 @@ var Window = GObject.registerClass({
         this.recorderWidget.connect('canceled', this.onRecorderCanceled.bind(this));
         this.recorderWidget.connect('stopped', this.onRecorderStopped.bind(this));
         this.insert_action_group('recorder', this.recorderWidget.actionsGroup);
-        this._emptyIcon.icon_name = `${pkg.name}-symbolic`;
+        this._emptyPage.icon_name = `${pkg.name}-symbolic`;
         this.show();
     }