[the-board/sound-thing] more sound thing
- From: Lucas Rocha <lucasr src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [the-board/sound-thing] more sound thing
- Date: Thu, 6 Jan 2011 09:58:40 +0000 (UTC)
commit c2296065f3bdc2d2cbe59f3a45f32cd7e7b5ed2b
Author: Lucas Rocha <lucasr gnome org>
Date: Thu Jan 6 00:24:06 2011 +0000
more sound thing
data/things/sound/caption-border.png | Bin 0 -> 272 bytes
data/things/sound/cassete-ring.png | Bin 0 -> 6139 bytes
data/things/sound/cassete.png | Bin 7908 -> 3015 bytes
data/things/sound/style.css | 28 +++++---
src/js/ui/things/sound.js | 116 +++++++++++++++++++++++-----------
5 files changed, 96 insertions(+), 48 deletions(-)
---
diff --git a/data/things/sound/caption-border.png b/data/things/sound/caption-border.png
new file mode 100644
index 0000000..b3a28f1
Binary files /dev/null and b/data/things/sound/caption-border.png differ
diff --git a/data/things/sound/cassete-ring.png b/data/things/sound/cassete-ring.png
new file mode 100644
index 0000000..dca0d06
Binary files /dev/null and b/data/things/sound/cassete-ring.png differ
diff --git a/data/things/sound/cassete.png b/data/things/sound/cassete.png
index 2eec99d..30ece41 100644
Binary files a/data/things/sound/cassete.png and b/data/things/sound/cassete.png differ
diff --git a/data/things/sound/style.css b/data/things/sound/style.css
index 3fe7121..2e18d1e 100644
--- a/data/things/sound/style.css
+++ b/data/things/sound/style.css
@@ -1,12 +1,10 @@
TbBox#sound-thing-sound-box {
- spacing: 1px;
- padding: 2px 2px 2px 2px;
background-color: black;
}
TbBox#sound-thing-content-box {
spacing: 5px;
- padding: 21px 2px 12px 2px;
+ padding: 17px 18px 27px 18px;
}
TbBox#sound-thing-button-box {
@@ -16,14 +14,9 @@ TbBox#sound-thing-button-box {
}
TbBox#sound-thing-controls-box {
- background-color: none;
- padding: 10px;
-}
-
-TbBox#sound-thing-sound-controls-box {
border-image: url('sound-controls-bg.png') 8;
- padding: 2px 12px 2px 12px;
- spacing: 10px;
+ padding: 2px 7px 1px 5px;
+ spacing: 5px;
}
MxButton#sound-thing-play-button {
@@ -43,6 +36,11 @@ TbBox#sound-thing-sound-border-box {
background-color: none;
}
+TbBox#sound-thing-caption-box {
+ border-image: url('caption-border.png') 4 4 4 4;
+ padding: 8px 5px 3px 5px;
+}
+
MxLabel#sound-thing-caption-label {
color: black;
font-size: 13;
@@ -67,3 +65,13 @@ MxLabel#sound-thing-time-label {
TbBox#sound-thing-time-label-box {
padding: 4px 0px 0px 0px;
}
+
+TbBox#sound-thing-rings-box {
+ spacing: 56px;
+}
+
+MxSpinner#sound-thing-spinner {
+ -mx-spinner-image: url('cassete-ring.png');
+ -mx-spinner-animation-duration: 72;
+ -mx-spinner-frames: 8;
+}
diff --git a/src/js/ui/things/sound.js b/src/js/ui/things/sound.js
index 7e161ba..0eaea02 100644
--- a/src/js/ui/things/sound.js
+++ b/src/js/ui/things/sound.js
@@ -24,7 +24,7 @@ const NAME = Gettext.gettext("Sound");
const STYLE = Path.THINGS_DATA_DIR + "sound/style.css";
const _INITIAL_WIDTH = 233;
-const _INITIAL_HEIGHT = 153;
+const _INITIAL_HEIGHT = 152;
const _CASSETE_IMAGE = Path.THINGS_DATA_DIR + "sound/cassete.png";
@@ -49,6 +49,7 @@ SoundThing.prototype = {
this._createSoundPlayer();
this._createSoundBox();
this._createCaptionText();
+ this._createRings();
Thing.Thing.prototype._init.apply(this, [args]);
},
@@ -99,44 +100,31 @@ SoundThing.prototype = {
this._contentBox.set_style(this._style);
- this._createSoundControlsBox();
+ this._createControlsBox();
+ this._createTimeLabel();
this._soundBox.append(this._contentBox,
Tb.BoxPackFlags.EXPAND);
},
- _createSoundControlsBox : function() {
- // This box is needed to add proper spacing between the
- // sound controls and the edge of sound playback frame
- let controlsBox =
- new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
- xAlign: Tb.BoxAlignment.FILL,
- yAlign: Tb.BoxAlignment.CENTER,
- name: "sound-thing-controls-box" });
-
- controlsBox.set_style(this._style);
-
- this._soundControlsBox =
+ _createControlsBox : function() {
+ this._controlsBox =
new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
xAlign: Tb.BoxAlignment.FILL,
yAlign: Tb.BoxAlignment.CENTER,
opacity: 0,
visible: false,
- name: "sound-thing-sound-controls-box" });
+ name: "sound-thing-controls-box" });
- this._soundControlsBox.set_style(this._style);
+ this._controlsBox.set_style(this._style);
this._createPlayButton();
this._createProgressBar();
- this._createTimeLabel();
-
- controlsBox.append(this._soundControlsBox,
- Tb.BoxPackFlags.EXPAND);
- this._contentBox.append(controlsBox,
+ this._contentBox.append(this._controlsBox,
Tb.BoxPackFlags.FIXED);
- this._contentBox.set_fixed_child_align(controlsBox,
+ this._contentBox.set_fixed_child_align(this._controlsBox,
Tb.BoxAlignment.FILL,
Tb.BoxAlignment.END);
},
@@ -152,7 +140,7 @@ SoundThing.prototype = {
Lang.bind(this,
this._onPlayButtonToggled));
- this._soundControlsBox.append(this._playButton,
+ this._controlsBox.append(this._playButton,
Tb.BoxPackFlags.NONE);
},
@@ -170,12 +158,12 @@ SoundThing.prototype = {
Lang.bind(this,
this._onProgressBarButtonPressEvent));
- this._soundControlsBox.append(this._progressBar,
- Tb.BoxPackFlags.EXPAND);
+ this._controlsBox.append(this._progressBar,
+ Tb.BoxPackFlags.EXPAND);
- this._soundControlsBox.set_child_align(this._progressBar,
- Tb.BoxAlignment.FILL,
- Tb.BoxAlignment.CENTER);
+ this._controlsBox.set_child_align(this._progressBar,
+ Tb.BoxAlignment.FILL,
+ Tb.BoxAlignment.CENTER);
},
_createTimeLabel : function() {
@@ -189,15 +177,23 @@ SoundThing.prototype = {
this._updateTimeLabel();
- this._soundControlsBox.append(this._timeLabel,
- Tb.BoxPackFlags.END);
+ //this._controlsBox.append(this._timeLabel,
+ // Tb.BoxPackFlags.END);
- this._soundControlsBox.set_child_align(this._timeLabel,
- Tb.BoxAlignment.START,
- Tb.BoxAlignment.CENTER);
+ //this._controlsBox.set_child_align(this._timeLabel,
+ // Tb.BoxAlignment.START,
+ // Tb.BoxAlignment.CENTER);
},
_createCaptionText : function() {
+ this._captionBox =
+ new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
+ xAlign: Tb.BoxAlignment.FILL,
+ yAlign: Tb.BoxAlignment.FILL,
+ name: "sound-thing-caption-box" });
+
+ this._captionBox.set_style(this._style);
+
this._captionLabel =
new Mx.Label({ xAlign: Mx.Align.MIDDLE,
name: "sound-thing-caption-label" });
@@ -214,10 +210,42 @@ SoundThing.prototype = {
Lang.bind(this,
this._onCaptionTextChanged));
- this._contentBox.append(this._captionLabel,
+ this._captionBox.append(this._captionLabel,
+ Tb.BoxPackFlags.EXPAND);
+
+ this._contentBox.append(this._captionBox,
Tb.BoxPackFlags.NONE);
},
+ _createRings : function() {
+ this._ringsBox =
+ new Tb.Box({ orientation: Tb.BoxOrientation.HORIZONTAL,
+ xAlign: Tb.BoxAlignment.FILL,
+ yAlign: Tb.BoxAlignment.FILL,
+ name: "sound-thing-rings-box" });
+
+ this._ringsBox.set_style(this._style);
+
+ for (let i = 0; i < 2; i++) {
+ let ring = new Mx.Spinner({ width: 27,
+ height: 27,
+ animating: false,
+ name: "sound-thing-spinner" });
+
+ ring.set_style(this._style);
+
+ this._ringsBox.append(ring,
+ Tb.BoxPackFlags.NONE);
+ }
+
+ this._contentBox.append(this._ringsBox,
+ Tb.BoxPackFlags.FIXED);
+
+ this._contentBox.set_fixed_child_align(this._ringsBox,
+ Tb.BoxAlignment.CENTER,
+ Tb.BoxAlignment.CENTER);
+ },
+
_updateSpinner : function() {
// FIXME: show/hide spinner depending on the
// loading state of the sound
@@ -239,6 +267,13 @@ SoundThing.prototype = {
if (!fromState) {
this._player.playing = true;
this._playButton.toggled = true;
+
+ let rings = this._ringsBox.get_children();
+
+ for (let i = 0; i < rings.length; i++) {
+ let ring = rings[i];
+ ring.animating = true;
+ }
}
}
@@ -248,7 +283,7 @@ SoundThing.prototype = {
},
_showSoundControlsBox : function() {
- Tweener.addTween(this._soundControlsBox,
+ Tweener.addTween(this._controlsBox,
{ opacity: 255,
time: _SHOW_BUTTON_BOX_TIME,
onStart: function() {
@@ -257,7 +292,7 @@ SoundThing.prototype = {
},
_hideSoundControlsBox : function() {
- Tweener.addTween(this._soundControlsBox,
+ Tweener.addTween(this._controlsBox,
{ opacity: 0,
time: _SHOW_BUTTON_BOX_TIME,
onComplete: function() {
@@ -355,6 +390,13 @@ SoundThing.prototype = {
_onPlayButtonToggled : function() {
this._player.playing = this._playButton.toggled;
+
+ let rings = this._ringsBox.get_children();
+
+ for (let i = 0; i < rings.length; i++) {
+ let ring = rings[i];
+ ring.animating = this._playButton.toggled;
+ }
},
_onProgressBarButtonPressEvent : function(progressBar, event) {
@@ -451,8 +493,6 @@ SoundThing.prototype = {
},
destroy : function() {
- this._player.destroy();
-
if (this._soundBox) {
this._soundBox.destroy();
delete this._soundBox;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
