[gnome-sound-recorder] window: use a separate view for the recording

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 6bf2741deb6469246924264d89fdf8d4c5b8e600
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Sun May 31 13:55:34 2020 +0530

    window: use a separate view for the recording

 data/application.css |  15 ++++-
 data/ui/window.ui    | 156 ++++++++++++++++++++++++---------------------------
 src/mainWindow.js    |   4 +-
 src/waveform.js      |  16 ++----
 4 files changed, 92 insertions(+), 99 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 7aeab22..25d70a1 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,6 +1,6 @@
 
 .emptyGrid {
-   background-color: @theme_bg_color;
+  background-color: @theme_bg_color;
 }
 
 .list-row { 
@@ -8,3 +8,16 @@
   box-shadow: inset 0 -1px alpha(black, 0.1); 
 }
 
+.recording-time-label {
+  font-size: 32pt;
+  font-weight: 300
+}
+
+.pill-button {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+}
+
+.large-button {
+  padding: 12px 12px;
+}
\ No newline at end of file
diff --git a/data/ui/window.ui b/data/ui/window.ui
index de31402..33a967d 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -99,130 +99,120 @@
           <object class="GtkStack" id="mainStack">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
             <child>
-              <object class="GtkBox">
+              <object class="GtkScrolledWindow" id="scrolledWindow">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="orientation">vertical</property>
+                <property name="can_focus">True</property>
+                <property name="hexpand">True</property>
+                <property name="vexpand">True</property>
                 <child>
-                  <object class="GtkBox" id="recordGrid">
-                    <property name="visible">False</property>
+                  <object class="GtkViewport">
+                    <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="margin_left">18</property>
-                    <property name="margin_right">18</property>
-                    <property name="margin_top">18</property>
-                    <property name="margin_bottom">18</property>
                     <child>
-                      <object class="GtkBox" id="box-record">
+                      <object class="HdyColumn">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="valign">center</property>
-                        <property name="margin_right">18</property>
-                        <property name="margin_end">18</property>
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="margin_bottom">8</property>
-                            <property name="label" translatable="yes">Recording</property>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
+                        <property name="maximum_width">650</property>
+                        <property name="linear_growth_width">400</property>
                         <child>
-                          <object class="GtkLabel" id="recordTimeLabel">
+                          <object class="GtkListBox" id="listBox">
                             <property name="visible">True</property>
                             <property name="can_focus">False</property>
+                            <property name="margin_left">8</property>
+                            <property name="margin_right">8</property>
+                            <property name="margin_top">18</property>
+                            <property name="margin_bottom">18</property>
+                            <property name="selection_mode">none</property>
                             <style>
-                              <class name="dim-label"/>
+                              <class name="preferences"/>
                             </style>
                           </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">0</property>
-                      </packing>
                     </child>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="name">mainView</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_left">8</property>
+                <property name="margin_right">8</property>
+                <property name="margin_top">24</property>
+                <property name="margin_bottom">24</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkButton" id="recordStopButton">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">end</property>
+                    <property name="margin_top">8</property>
                     <child>
-                      <object class="GtkButton" id="recordStopButton">
-                        <property name="label" translatable="yes">Done</property>
+                      <object class="GtkImage">
                         <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">True</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="margin_left">18</property>
-                        <property name="margin_start">18</property>
-                        <property name="margin_top">6</property>
-                        <property name="margin_bottom">4</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">media-playback-stop-symbolic</property>
+                        <property name="icon_size">3</property>
                       </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="pill-button"/>
+                      <class name="destructive-action"/>
+                      <class name="large-button"/>
+                    </style>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
+                    <property name="pack_type">end</property>
                     <property name="position">0</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkScrolledWindow" id="scrolledWindow">
+                  <object class="GtkBox" id="recordGrid">
+                    <property name="height_request">230</property>
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="valign">center</property>
+                    <property name="orientation">vertical</property>
                     <child>
-                      <object class="GtkViewport">
+                      <object class="GtkLabel" id="recordTimeLabel">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <child>
-                          <object class="HdyColumn">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="maximum_width">650</property>
-                            <property name="linear_growth_width">400</property>
-                            <child>
-                              <object class="GtkListBox" id="listBox">
-                                <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <property name="margin_top">18</property>
-                                <property name="margin_bottom">18</property>
-                                <property name="selection_mode">none</property>
-                                <style>
-                                  <class name="preferences"/>
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
+                        <property name="margin_top">18</property>
+                        <style>
+                          <class name="dim-label"/>
+                          <class name="recording-time-label"/>
+                        </style>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="pack_type">end</property>
+                        <property name="position">0</property>
+                      </packing>
                     </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
-                    <property name="position">1</property>
+                    <property name="position">2</property>
                   </packing>
                 </child>
               </object>
               <packing>
-                <property name="name">mainView</property>
+                <property name="name">recorderView</property>
+                <property name="position">1</property>
               </packing>
             </child>
             <child>
@@ -289,7 +279,7 @@
               </object>
               <packing>
                 <property name="name">emptyView</property>
-                <property name="position">1</property>
+                <property name="position">2</property>
               </packing>
             </child>
           </object>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index b6db8c5..92c1950 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -100,8 +100,7 @@ var MainWindow = GObject.registerClass({
 
     _onRecordStart() {
         this.player.stop();
-        this._mainStack.set_visible_child_name('mainView');
-        this._recordGrid.show();
+        this._mainStack.set_visible_child_name('recorderView');
         this._record.startRecording();
 
         this.wave = new Waveform.WaveForm(this._recordGrid, null);
@@ -110,7 +109,6 @@ var MainWindow = GObject.registerClass({
     _onRecordStop() {
         Record.pipeState = Record.PipelineStates.STOPPED;
         this._record.stopRecording();
-        this._recordGrid.hide();
 
         let fileUri = this._record.initialFileName;
         let recordedFile = Gio.file_new_for_path(fileUri);
diff --git a/src/waveform.js b/src/waveform.js
index 88ca63c..c927654 100644
--- a/src/waveform.js
+++ b/src/waveform.js
@@ -51,19 +51,11 @@ var WaveForm = class WaveForm {
         }
 
         this.drawing = Gtk.DrawingArea.new();
-        if (this.waveType === WaveType.RECORD) {
-            this.drawing.set_property('hexpand', true);
-            this._grid.add(this.drawing);
-        } else {
-            this.drawing.set_property('valign', Gtk.Align.FILL);
-            this.drawing.set_property('hexpand', true);
-            this.drawing.set_property('vexpand', true);
-            this._grid.add(this.drawing);
-        }
-
+        this.drawing.set_property('vexpand', true);
+        this.drawing.set_property('valign', Gtk.Align.FILL);
+        this._grid.add(this.drawing);
         this.drawing.connect('draw', (drawing, cr) => this.fillSurface(drawing, cr));
-        this.drawing.show_all();
-        this._grid.show_all();
+        this.drawing.show();
 
         if (this.waveType === WaveType.PLAY) {
             this._launchPipeline();