[gnome-sound-recorder] expand recording row



commit ff2971498eeb9f88a0c7e937581d45e799386e4e
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Fri Jul 3 01:11:24 2020 +0530

    expand recording row

 data/ui/row.ui                                   | 290 +++++++++++++++--------
 data/ui/window.ui                                |  16 +-
 src/org.gnome.SoundRecorder.src.gresource.xml.in |   1 +
 src/recordingsListBox.js                         |  59 +++++
 src/row.js                                       |  22 +-
 src/window.js                                    |  20 +-
 6 files changed, 271 insertions(+), 137 deletions(-)
---
diff --git a/data/ui/row.ui b/data/ui/row.ui
index fa04ea5..bb905fb 100644
--- a/data/ui/row.ui
+++ b/data/ui/row.ui
@@ -5,93 +5,223 @@
   <template class="Gjs_Row" parent="GtkListBoxRow">
     <property name="visible">True</property>
     <property name="can_focus">True</property>
+    <property name="selectable">False</property>
     <child>
-      <object class="GtkStack" id="mainStack">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin_top">12</property>
-        <property name="margin_bottom">12</property>
+        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkBox">
+          <object class="GtkStack" id="mainStack">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="no_show_all">True</property>
+            <property name="margin_top">12</property>
+            <property name="margin_bottom">12</property>
             <child>
-              <object class="GtkStack" id="playbackStack">
+              <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="margin_left">12</property>
-                <property name="margin_start">12</property>
+                <property name="no_show_all">True</property>
                 <child>
-                  <object class="GtkButton" id="playButton">
-                    <property name="name">playButton</property>
+                  <object class="GtkStack" id="playbackStack">
                     <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="always_show_image">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_left">12</property>
+                    <property name="margin_start">12</property>
                     <child>
-                      <object class="GtkImage" id="playIcon">
+                      <object class="GtkButton" id="playButton">
+                        <property name="name">playButton</property>
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">media-playback-start-symbolic</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="always_show_image">True</property>
+                        <child>
+                          <object class="GtkImage" id="playIcon">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">media-playback-start-symbolic</property>
+                          </object>
+                        </child>
                       </object>
+                      <packing>
+                        <property name="name">play</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="pauseButton">
+                        <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="always_show_image">True</property>
+                        <child>
+                          <object class="GtkImage" id="pauseIcon">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">media-playback-pause-symbolic</property>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="name">pause</property>
+                        <property name="position">1</property>
+                      </packing>
                     </child>
                   </object>
                   <packing>
-                    <property name="name">play</property>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="pauseButton">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="halign">center</property>
+                    <property name="can_focus">False</property>
                     <property name="valign">center</property>
-                    <property name="always_show_image">True</property>
+                    <property name="margin_left">12</property>
+                    <property name="margin_right">12</property>
+                    <property name="hexpand">True</property>
                     <child>
-                      <object class="GtkImage" id="pauseIcon">
+                      <object class="GtkLabel" id="duration">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">media-playback-pause-symbolic</property>
+                        <property name="halign">end</property>
+                        <style>
+                          <class name="dim-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>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                          <object class="GtkLabel" id="name">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="ellipsize">end</property>
+                            <property name="single_line_mode">True</property>
+                            <property name="xalign">0</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="date">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="xalign">0</property>
+                            <style>
+                              <class name="subtitle"/>
+                            </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">2</property>
+                      </packing>
                     </child>
                   </object>
                   <packing>
-                    <property name="name">pause</property>
+                    <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>
+                <property name="name">display</property>
               </packing>
             </child>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="valign">center</property>
                 <property name="margin_left">12</property>
-                <property name="hexpand">True</property>
+                <property name="margin_right">12</property>
                 <child>
-                  <object class="GtkLabel" id="duration">
+                  <object class="GtkEntry" id="entry">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">end</property>
-                    <property name="margin_right">12</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
+                    <property name="can_focus">True</property>
+                    <property name="valign">center</property>
+                    <property name="activates_default">True</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton" id="saveBtn">
+                    <property name="label" translatable="yes">Save</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="can_default">True</property>
+                    <property name="receives_default">False</property>
+                    <property name="valign">center</property>
+                    <property name="margin_left">12</property>
+                    <signal name="clicked" handler="onSaveRecording" 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>
+              </object>
+              <packing>
+                <property name="name">edit</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>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_bottom">12</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
                     <property name="position">0</property>
                   </packing>
                 </child>
@@ -99,94 +229,54 @@
                   <object class="GtkBox">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
+                    <property name="margin_left">12</property>
                     <property name="margin_right">12</property>
-                    <property name="orientation">vertical</property>
+                    <property name="margin_bottom">12</property>
                     <child>
-                      <object class="GtkLabel" id="name">
+                      <object class="GtkButton" id="deleteBtn">
+                        <property name="label" translatable="yes">Delete</property>
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">0</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <style>
+                          <class name="destructive-action"/>
+                        </style>
                       </object>
                       <packing>
                         <property name="expand">False</property>
                         <property name="fill">True</property>
-                        <property name="position">0</property>
+                        <property name="pack_type">end</property>
+                        <property name="position">1</property>
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkLabel" id="date">
+                      <object class="GtkButton" id="renameBtn">
+                        <property name="label" translatable="yes">Rename</property>
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">0</property>
-                        <style>
-                          <class name="subtitle"/>
-                        </style>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <property name="margin_right">12</property>
                       </object>
                       <packing>
                         <property name="expand">False</property>
                         <property name="fill">True</property>
-                        <property name="position">1</property>
+                        <property name="pack_type">end</property>
+                        <property name="position">2</property>
                       </packing>
                     </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
-                    <property name="position">2</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>
-          </object>
-          <packing>
-            <property name="name">display</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkBox">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <child>
-              <object class="GtkEntry" id="entry">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="valign">center</property>
-                <property name="margin_left">12</property>
-                <property name="activates_default">True</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="saveBtn">
-                <property name="label" translatable="yes">Save</property>
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="can_default">True</property>
-                <property name="receives_default">False</property>
-                <property name="valign">center</property>
-                <property name="margin_left">12</property>
-                <property name="margin_right">12</property>
-                <signal name="clicked" handler="onSaveRecording" 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>
           </object>
           <packing>
-            <property name="name">edit</property>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
             <property name="position">1</property>
           </packing>
         </child>
diff --git a/data/ui/window.ui b/data/ui/window.ui
index 6b8ec76..5155149 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -120,24 +120,10 @@
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
                 <child>
-                  <object class="HdyClamp">
+                  <object class="HdyClamp" id="column">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="maximum_size">650</property>
-                    <child>
-                      <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="preferences"/>
-                        </style>
-                      </object>
-                    </child>
                   </object>
                 </child>
               </object>
diff --git a/src/org.gnome.SoundRecorder.src.gresource.xml.in 
b/src/org.gnome.SoundRecorder.src.gresource.xml.in
index d7a54cb..eb48cd7 100644
--- a/src/org.gnome.SoundRecorder.src.gresource.xml.in
+++ b/src/org.gnome.SoundRecorder.src.gresource.xml.in
@@ -4,6 +4,7 @@
     <file>application.js</file>
     <file>utils.js</file>
     <file>recordingList.js</file>
+    <file>recordingsListBox.js</file>
     <file>recording.js</file>
     <file>row.js</file>
     <file>main.js</file>
diff --git a/src/recordingsListBox.js b/src/recordingsListBox.js
new file mode 100644
index 0000000..765d697
--- /dev/null
+++ b/src/recordingsListBox.js
@@ -0,0 +1,59 @@
+/* exported RecordingsListBox */
+const { GObject, Gtk } = imports.gi;
+const { Row, RowState } = imports.row;
+
+var RecordingsListBox = new GObject.registerClass(class RecordingsListBox extends Gtk.ListBox {
+    _init(model, player) {
+        super._init({
+            valign: Gtk.Align.FILL,
+            margin_left: 8,
+            margin_right: 8,
+            margin_top: 12,
+            margin_bottom: 12,
+            activate_on_single_click: true,
+        });
+
+        this.get_style_context().add_class('preferences');
+
+        this.bind_model(model, recording => {
+            let row = new Row(recording);
+
+            row.connect('play', _row => {
+                if (this.activePlayingRow && this.activePlayingRow !== _row)
+                    this.activePlayingRow.setState(RowState.PAUSED);
+
+                player.play(recording.uri);
+
+                if (!this.activePlayingRow || this.activePlayingRow !== _row)
+                    this.activePlayingRow = _row;
+            });
+
+            row.connect('pause', () => player.pause());
+
+            row.connect('deleted', () => {
+                if (row === this.activeRow)
+                    this.activeRow = null;
+
+                if (row === this.activePlayingRow)
+                    this.activePlayingRow = null;
+
+                model.remove(row.get_index());
+            });
+
+            return row;
+        });
+
+        this.show();
+    }
+
+    vfunc_row_activated(row) {
+        if (this.activeRow)
+            this.activeRow._revealer.reveal_child = false;
+
+        row._revealer.reveal_child = !row._revealer.reveal_child;
+
+        if (!this.activeRow || this.activeRow !== row)
+            this.activeRow = row;
+    }
+
+});
diff --git a/src/row.js b/src/row.js
index 46ab4d1..9af2a54 100644
--- a/src/row.js
+++ b/src/row.js
@@ -9,7 +9,7 @@ var RowState = {
 
 var Row = GObject.registerClass({
     Template: 'resource:///org/gnome/SoundRecorder/ui/row.ui',
-    InternalChildren: ['playbackStack', 'mainStack', 'playButton', 'pauseButton', 'name', 'entry', 'date', 
'duration', 'saveBtn'],
+    InternalChildren: ['playbackStack', 'mainStack', 'playButton', 'pauseButton', 'name', 'entry', 'date', 
'duration', 'saveBtn', 'revealer', 'renameBtn', 'deleteBtn'],
     Signals: {
         'play': { param_types: [GObject.TYPE_STRING] },
         'pause': {},
@@ -52,10 +52,14 @@ var Row = GObject.registerClass({
             this.emit('pause');
         });
 
-        // this._deleteButton.connect('clicked', () => {
-        //     recording.delete();
-        //     this.emit('deleted');
-        // });
+        this._renameBtn.connect('clicked', () => {
+            this.editMode = true;
+        });
+
+        this._deleteBtn.connect('clicked', () => {
+            recording.delete();
+            this.emit('deleted');
+        });
     }
 
     onSaveRecording() {
@@ -79,10 +83,18 @@ var Row = GObject.registerClass({
 
     set editMode(state) {
         this._mainStack.visible_child_name = state ? 'edit' : 'display';
+        this._editMode = state;
 
         if (state) {
             this._entry.grab_focus();
             this._saveBtn.grab_default();
+            this._renameBtn.hide();
+        } else {
+            this._renameBtn.show();
         }
     }
+
+    get editMode() {
+        return this._editMode;
+    }
 });
diff --git a/src/window.js b/src/window.js
index 6d3f72d..5cd85bd 100644
--- a/src/window.js
+++ b/src/window.js
@@ -23,14 +23,14 @@ const { GObject, Handy } = imports.gi;
 const { Player } = imports.player;
 const { Recorder } = imports.recorder;
 const { RecordingList } = imports.recordingList;
-const { Row, RowState } = imports.row;
+const { RecordingsListBox } = imports.recordingsListBox;
 const { formatTime } = imports.utils;
 const { WaveForm } = imports.waveform;
 
 
 var Window = GObject.registerClass({
     Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
-    InternalChildren: ['recorderTime', 'mainStack', 'recorderBox', 'listBox', 'emptyIcon', 'playbackStack', 
'headerRevealer'],
+    InternalChildren: ['recorderTime', 'mainStack', 'recorderBox', 'emptyIcon', 'playbackStack', 
'headerRevealer', 'column'],
 }, class Window extends Handy.ApplicationWindow {
 
     _init(params) {
@@ -58,21 +58,7 @@ var Window = GObject.registerClass({
         this._refreshView();
         this._recordingList.connect('items-changed', this._refreshView.bind(this));
 
-        this._listBox.bind_model(this._recordingList, recording => {
-            let row = new Row(recording);
-            row.connect('play', currentRow => {
-                this._listBox.get_children().forEach(_row => {
-                    if (_row !== currentRow)
-                        _row.setState(RowState.PAUSED);
-                });
-                this.player.play(recording.uri);
-            });
-
-            row.connect('pause', () => this.player.pause());
-            row.connect('deleted', () => this._recordingList.remove(row.get_index()));
-
-            return row;
-        });
+        this._column.add(new RecordingsListBox(this._recordingList, this.player));
 
         this._emptyIcon.icon_name = `${pkg.name}-symbolic`;
         this.show();


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]