[the-board/time-label-fix: 1/4] [things] Show time label while sound is playing in SoundThing

[Lucas Rocha <lucasr src gnome org>]

commit fc82325e9ff9b1f96ba75282cf1c294d70363dc3
Author: Lucas Rocha <lucasr gnome org>
Date:   Thu Jan 27 00:17:00 2011 +0000

    [things] Show time label while sound is playing in SoundThing

 data/things/sound/style.css |    6 ++++-
 src/js/ui/things/sound.js   |   54 ++++++++++++++++++++++++++++++------------
 2 files changed, 43 insertions(+), 17 deletions(-)
---
diff --git a/data/things/sound/style.css b/data/things/sound/style.css
index 081c416..1836b64 100644
--- a/data/things/sound/style.css
+++ b/data/things/sound/style.css
@@ -4,7 +4,7 @@ TbBox#sound-thing-sound-box {
 
 TbBox#sound-thing-content-box {
     spacing: 5px;
-    padding: 17px 18px 27px 18px;
+    padding: 17px 18px 2px 18px;
 }
 
 TbBox#sound-thing-button-box {
@@ -14,6 +14,10 @@ TbBox#sound-thing-button-box {
 }
 
 TbBox#sound-thing-controls-box {
+    spacing: 10px;
+}
+
+TbBox#sound-thing-playback-box {
     border-image: url('sound-controls-bg.png') 8;
     padding: 2px 7px 1px 5px;
     spacing: 5px; 
diff --git a/src/js/ui/things/sound.js b/src/js/ui/things/sound.js
index 0e3591d..94485a7 100644
--- a/src/js/ui/things/sound.js
+++ b/src/js/ui/things/sound.js
@@ -34,6 +34,11 @@ const _SHOW_BUTTON_BOX_TIME = 0.5;
 const _CAPTION_BOX_STYLE_NORMAL = "sound-thing-caption-box";
 const _CAPTION_BOX_STYLE_RECORDING = "sound-thing-caption-box-recording";
 
+// Magic numbers based on the graphics of the
+// compact cassete
+const _SPOOLS_Y = 49;
+const _STOP_BUTTON_Y = _SPOOLS_Y + 35;
+
 function SoundThing(args) {
     this._init(args);
 }
@@ -110,7 +115,6 @@ SoundThing.prototype = {
         this._contentBox.set_style(this._style);
 
         this._createControlsBox();
-        this._createTimeLabel();
 
         this._soundBox.append(this._contentBox,
                                 Tb.BoxPackFlags.EXPAND);
@@ -118,17 +122,17 @@ SoundThing.prototype = {
 
     _createControlsBox : function() {
         this._controlsBox =
-            new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
+            new Tb.Box({ orientation: Tb.BoxOrientation.VERTICAL,
                          xAlign: Tb.BoxAlignment.FILL,
-                         yAlign: Tb.BoxAlignment.CENTER,
+                         yAlign: Tb.BoxAlignment.START,
                          opacity: 0,
                          visible: false,
                          name: "sound-thing-controls-box" });
 
         this._controlsBox.set_style(this._style);
 
-        this._createPlayButton();
-        this._createProgressBar();
+        this._createPlaybackBox();
+        this._createTimeLabel();
 
         this._contentBox.append(this._controlsBox,
                                 Tb.BoxPackFlags.FIXED);
@@ -138,6 +142,22 @@ SoundThing.prototype = {
                                                Tb.BoxAlignment.END);
     },
 
+    _createPlaybackBox : function() {
+        this._playbackBox =
+            new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
+                         xAlign: Tb.BoxAlignment.FILL,
+                         yAlign: Tb.BoxAlignment.CENTER,
+                         name: "sound-thing-playback-box" });
+
+        this._playbackBox.set_style(this._style);
+
+        this._createPlayButton();
+        this._createProgressBar();
+
+        this._controlsBox.append(this._playbackBox,
+                                 Tb.BoxPackFlags.NONE);
+    },
+
     _createPlayButton : function() {
         this._playButton =
             new Mx.Button({ isToggle: true,
@@ -149,8 +169,8 @@ SoundThing.prototype = {
                                  Lang.bind(this,
                                            this._onPlayButtonToggled));
 
-        this._controlsBox.append(this._playButton,
-                                      Tb.BoxPackFlags.NONE);
+        this._playbackBox.append(this._playButton,
+                                 Tb.BoxPackFlags.NONE);
     },
 
     _createProgressBar : function() {
@@ -167,10 +187,10 @@ SoundThing.prototype = {
                                   Lang.bind(this,
                                             this._onProgressBarButtonPressEvent));
 
-        this._controlsBox.append(this._progressBar,
+        this._playbackBox.append(this._progressBar,
                                  Tb.BoxPackFlags.EXPAND);
 
-        this._controlsBox.set_child_align(this._progressBar,
+        this._playbackBox.set_child_align(this._progressBar,
                                           Tb.BoxAlignment.FILL,
                                           Tb.BoxAlignment.CENTER);
     },
@@ -186,12 +206,12 @@ SoundThing.prototype = {
 
         this._updateTimeLabel();
 
-        //this._controlsBox.append(this._timeLabel,
-        //                         Tb.BoxPackFlags.END);
+        this._controlsBox.append(this._timeLabel,
+                                 Tb.BoxPackFlags.NONE);
 
-        //this._controlsBox.set_child_align(this._timeLabel,
-        //                                  Tb.BoxAlignment.START,
-        //                                  Tb.BoxAlignment.CENTER);
+        this._controlsBox.set_child_align(this._timeLabel,
+                                          Tb.BoxAlignment.CENTER,
+                                          Tb.BoxAlignment.END);
     },
 
     _createCaptionText : function() {
@@ -229,6 +249,7 @@ SoundThing.prototype = {
     _createSpools : function() {
         this._spoolsBox =
             new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
+                         y: _SPOOLS_Y,
                          xAlign: Tb.BoxAlignment.FILL,
                          yAlign: Tb.BoxAlignment.FILL,
                          name: "sound-thing-spools-box" });
@@ -252,7 +273,7 @@ SoundThing.prototype = {
 
         this._contentBox.set_fixed_child_align(this._spoolsBox,
                                                Tb.BoxAlignment.CENTER,
-                                               Tb.BoxAlignment.CENTER);
+                                               Tb.BoxAlignment.FIXED);
     },
 
     _updateSpinner : function() {
@@ -388,6 +409,7 @@ SoundThing.prototype = {
 
         this._stopButton =
             new Mx.Button({ label: Gettext.gettext("Stop"),
+                            y: _STOP_BUTTON_Y,
                             name: "sound-thing-stop-button" });
 
         this._stopButton.connect("clicked",
@@ -401,7 +423,7 @@ SoundThing.prototype = {
 
         this._contentBox.set_fixed_child_align(this._stopButton,
                                                Tb.BoxAlignment.CENTER,
-                                               Tb.BoxAlignment.END);
+                                               Tb.BoxAlignment.FIXED);
 
         this._recorder.start();