[gnome-sound-recorder] expand recording row
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-sound-recorder] expand recording row
- Date: Sat, 4 Jul 2020 13:29:17 +0000 (UTC)
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]
