[gnome-sound-recorder] layout and style fix
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-sound-recorder] layout and style fix
- Date: Mon, 10 Aug 2020 20:10:40 +0000 (UTC)
commit 3c6652e01680525198a32cb0534c1a93ebe63f63
Author: Kavan Mevada <kavanmevada gmail com>
Date: Mon Aug 10 14:35:29 2020 +0530
layout and style fix
fixes #85
data/application.css | 14 ++----
data/ui/row.ui | 133 ++++++++++++++++-----------------------------------
data/ui/window.ui | 73 +++++++++-------------------
src/row.js | 2 +-
4 files changed, 68 insertions(+), 154 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 226ab198..92614754 100644
--- a/data/application.css
+++ b/data/application.css
@@ -3,18 +3,10 @@
font-weight: 300
}
-.pill-button {
- border-radius: 9999px;
- -gtk-outline-radius: 9999px;
- padding-left: 9px;
- padding-right: 9px;
+button.large {
+ padding: 12px;
}
-.large-button {
- padding: 12px 12px;
-}
-
-
list row label.title {
font-weight: bold;
}
@@ -47,4 +39,4 @@ list row:first-child.expanded {
list row:last-child.expanded {
margin-bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/data/ui/row.ui b/data/ui/row.ui
index ba0919e9..0232737f 100644
--- a/data/ui/row.ui
+++ b/data/ui/row.ui
@@ -11,18 +11,17 @@
<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="GtkStack" id="mainStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="margin_top">12</property>
- <property name="margin_bottom">12</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="no_show_all">True</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
@@ -35,12 +34,9 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">end</property>
- <property name="margin_left">12</property>
<property name="margin_right">12</property>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">0</property>
</packing>
@@ -62,8 +58,6 @@
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -78,22 +72,16 @@
</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="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -106,7 +94,6 @@
<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="margin_right">12</property>
<property name="activates_default">True</property>
@@ -118,8 +105,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -149,8 +134,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -160,34 +143,28 @@
<property name="can_focus">False</property>
<property name="margin_left">12</property>
<property name="margin_right">12</property>
- <property name="margin_bottom">12</property>
+ <property name="margin_top">18</property>
<child>
<object class="GtkStack" id="rightStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
<child>
<object class="HdySqueezer" id="squeezer">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
<property name="homogeneous">True</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
<child>
<object class="GtkButton" id="exportBtn">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Export</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
<property name="action_name">recording.export</property>
<child>
<object class="GtkImage">
@@ -197,12 +174,11 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -210,11 +186,11 @@
<object class="GtkButton" id="renameBtn">
<property name="visible">True</property>
<property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="tooltip_text" translatable="yes">Rename</property>
- <property name="halign">center</property>
<property name="valign">center</property>
+ <property name="halign">center</property>
<property name="margin_left">8</property>
+ <property name="receives_default">True</property>
+ <property name="tooltip_text" translatable="yes">Rename</property>
<property name="action_name">recording.rename</property>
<child>
<object class="GtkImage">
@@ -224,12 +200,11 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -251,7 +226,8 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
</child>
@@ -265,10 +241,10 @@
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="can_default">True</property>
+ <property name="valign">center</property>
+ <property name="halign">end</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Save</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
<signal name="clicked" handler="onSaveRecording" swapped="no"/>
<child>
<object class="GtkImage">
@@ -279,7 +255,8 @@
</child>
<style>
<class name="suggested-action"/>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
@@ -289,8 +266,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">0</property>
</packing>
@@ -303,10 +278,10 @@
<object class="GtkButton" id="deleteBtn">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</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>
<child>
<object class="GtkImage">
<property name="visible">True</property>
@@ -315,19 +290,16 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</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>
</packing>
</child>
@@ -336,17 +308,15 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
- <property name="valign">center</property>
- <property name="hexpand">True</property>
<property name="spacing">18</property>
<child>
<object class="GtkButton" id="seekBackward">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Seek 10s Backward</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
@@ -355,12 +325,11 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -368,32 +337,26 @@
<object class="GtkStack" id="playbackStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
<child>
<object class="GtkButton" id="playButton">
- <property name="name">playButton</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Play</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="always_show_image">True</property>
<child>
- <object class="GtkImage" id="playIcon">
+ <object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="margin_left">4</property>
- <property name="margin_right">4</property>
- <property name="margin_top">7</property>
- <property name="margin_bottom">7</property>
<property name="icon_name">media-playback-start-symbolic</property>
<property name="icon_size">3</property>
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
+ <class name="large"/>
</style>
</object>
<packing>
@@ -404,25 +367,22 @@
<object class="GtkButton" id="pauseButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Pause</property>
- <property name="halign">center</property>
- <property name="valign">center</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="margin_left">4</property>
- <property name="margin_right">4</property>
- <property name="margin_top">7</property>
- <property name="margin_bottom">7</property>
<property name="icon_name">media-playback-pause-symbolic</property>
<property name="icon_size">3</property>
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
+ <class name="large"/>
</style>
</object>
<packing>
@@ -432,8 +392,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -441,11 +399,10 @@
<object class="GtkButton" id="seekForward">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Seek 10s Forward</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="always_show_image">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
@@ -454,26 +411,22 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
+ <property name="expand">True</property>
<property name="position">3</property>
</packing>
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -481,8 +434,6 @@
</child>
</object>
<packing>
- <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 7dcd6750..b856aa25 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -34,9 +34,9 @@
<object class="GtkButton" id="recordStartButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
- <property name="receives_default">False</property>
<property name="valign">center</property>
- <property name="always_show_image">True</property>
+ <property name="halign">center</property>
+ <property name="receives_default">False</property>
<signal name="clicked" handler="onRecorderStart" swapped="no"/>
<child>
<object class="GtkBox">
@@ -63,8 +63,6 @@
<property name="label" translatable="yes">Record</property>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -80,14 +78,12 @@
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">False</property>
- <property name="valign">center</property>
<property name="menu_model">primaryMenu</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">open-menu-symbolic</property>
- <property name="icon_size">1</property>
</object>
</child>
<style>
@@ -103,8 +99,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -168,16 +162,12 @@
</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">0</property>
</packing>
</child>
@@ -193,17 +183,14 @@
<object class="GtkStack" id="playbackStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="valign">center</property>
<child>
<object class="GtkButton" id="playButton">
- <property name="name">playButton</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Resume
Recording</property>
- <property name="halign">center</property>
- <property name="always_show_image">True</property>
<signal name="clicked" handler="onRecorderResume" swapped="no"/>
<child>
<object class="GtkImage" id="playIcon">
@@ -213,7 +200,8 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
@@ -224,10 +212,10 @@
<object class="GtkButton" id="pauseButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Pause
Recording</property>
- <property name="halign">center</property>
- <property name="always_show_image">True</property>
<signal name="clicked" handler="onRecorderPause" swapped="no"/>
<child>
<object class="GtkImage" id="pauseIcon">
@@ -237,7 +225,8 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
@@ -247,8 +236,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
@@ -256,10 +243,10 @@
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Stop Recording</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
<signal name="clicked" handler="onRecorderStop" swapped="no"/>
<child>
<object class="GtkImage">
@@ -270,14 +257,13 @@
</object>
</child>
<style>
- <class name="pill-button"/>
<class name="destructive-action"/>
- <class name="large-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
+ <class name="large"/>
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -285,11 +271,10 @@
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="valign">center</property>
+ <property name="halign">center</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Cancel Recording</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="always_show_image">True</property>
<signal name="clicked" handler="onRecorderCancel" swapped="no"/>
<child>
<object class="GtkImage">
@@ -299,7 +284,8 @@
</object>
</child>
<style>
- <class name="pill-button"/>
+ <class name="image-button"/>
+ <class name="circular"/>
</style>
</object>
<packing>
@@ -308,8 +294,6 @@
</child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">1</property>
</packing>
@@ -358,8 +342,6 @@
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
@@ -378,8 +360,6 @@
</style>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
@@ -395,8 +375,8 @@
<object class="GtkRevealer" id="notificationRevealer">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
<property name="valign">start</property>
+ <property name="halign">center</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
@@ -407,21 +387,14 @@
<property name="visible">True</property>
<property name="can_focus">False</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="notificationUndoBtn">
- <property name="label" translatable="yes">Undo</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
- <property name="halign">end</property>
- <property name="valign">end</property>
- <property name="margin_start">18</property>
+ <property name="label" translatable="yes">Undo</property>
+ <property name="margin_start">12</property>
</object>
</child>
<child>
@@ -429,8 +402,6 @@
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
- <property name="halign">end</property>
- <property name="valign">end</property>
<property name="margin_start">8</property>
<property name="relief">none</property>
<child>
diff --git a/src/row.js b/src/row.js
index 5bc9c8b9..9a8b2fb6 100644
--- a/src/row.js
+++ b/src/row.js
@@ -34,7 +34,7 @@ var Row = GObject.registerClass({
this.waveform = new WaveForm({
hexpand: true,
halign: Gtk.Align.FILL,
- margin_bottom: 24,
+ margin_top: 18,
height_request: 60,
margin_left: 12,
margin_right: 12,
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
