4 files changed, 97 insertions, 66 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 593b4ea1..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility LLC.
 All Rights Reserved.
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
                        "playheadmarker": {"#": "playhead_marker"},
                        "timetext" : {"#": "time_text"},
                        "timebar" : {"#": "time_bar"},
-                        "container_tracks" : {"#" : "container-tracks"},
                        "end_hottext" : {"@" : "endHottext"},
                        "container_layers" : {"#" : "container-layers"},
                        "container_tracks" : {"#" : "container-tracks"},
@@ -62,9 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
                        "checkable_animated" : {"#" : "checkable_animated"},
                        "tl_configbutton" : {"#" : "tl-configbutton"},
                        "checkable_lock" : {"#" : "checkable_lock"},
-                        "checkable_visible":{"#" : "checkable_visible"},
+                        "checkable_visible":{"#" : "checkable_visible"}
-                        "play_button" : {"#" : "play_button"},
-                        "zoom_slider" : {"@" : "timelineZoomSlider"}
+                    }
+                },
+                "playButton": {
+                    "prototype": "montage/ui/toggle-button.reel",
+                    "properties": {
+                        "element": {"#": "play_button"},
+                        "identifier": "playButton",
+                        "pressedClass": "pausebutton",
+                        "pressedLabel": "",
+                        "unpressedLabel": "",
+                        "pressed": false
+                    },
+                    "bindings": {
+                        "pressed": {"<->": "@owner.stage.timelinePlay"}
                    }
                },
@@ -191,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
                    <div data-montage-id="leftpane_inside" class="leftinside">
                        <div data-montage-id="timeline_controller" class="timelinecontroller">
                            <div data-montage-id="timeline_controls" class="timelinecontrols">
-                                <div data-montage-id="play_button" class="playbutton"></div>
+                                <button data-montage-id="play_button" class="playbutton"></button>
                                <div data-montage-id="time_text" class="timetext">00:00:00</div>
                            </div>
                        </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 69fe254b..e037cccb 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+    _stage: {
+        value: null
+    },
+    stage: {
+        get: function() {
+            return this._stage;
+        },
+        set: function(value) {
+            if(value) {
+                this._stage = value;
+            }
+        }
+    },
    /* === BEGIN: Models === */
        _user_layers: {
                value: null
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
            this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
                        this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
            this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
-            this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
            this.addPropertyChangeListener("currentDocument.model.domContainer", this);
            
                        // Start the panel out in disabled mode by default
@@ -1639,21 +1653,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
        }
    },
-    handlePlayButtonClick:{
-        value:function(ev){
-            this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
-            if (this.application.ninja.appModel.livePreview) {
-                this.play_button.classList.remove("playbutton");
-                this.play_button.classList.add("pausebutton");
-            } else {
-                this.play_button.classList.remove("pausebutton");
-                this.play_button.classList.add("playbutton");
-            }
-        }
-    },
    handleKeyframeShortcut:{
        value:function(action){
            var tempEv = {};
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 201b530e..f82feb71 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE.
 .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
 /* line 150, ../scss/TimelinePanel.scss */
-.playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+.playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; }
-/* line 158, ../scss/TimelinePanel.scss */
+/* line 162, ../scss/TimelinePanel.scss */
-.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+.playbutton:hover { background-color: #474747; opacity: 1; }
 /* line 166, ../scss/TimelinePanel.scss */
+.playbutton.active:hover { background-color: #474747; opacity: 1; }
+/* line 170, ../scss/TimelinePanel.scss */
+.playbutton:focus { -webkit-box-shadow: none; }
+/* line 173, ../scss/TimelinePanel.scss */
+.pausebutton { background-image: url("../images/pause.png"); }
+/* line 176, ../scss/TimelinePanel.scss */
 .forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
-/* line 174, ../scss/TimelinePanel.scss */
+/* line 184, ../scss/TimelinePanel.scss */
 .timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; }
-/* line 186, ../scss/TimelinePanel.scss */
+/* line 196, ../scss/TimelinePanel.scss */
 .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }
-/* line 196, ../scss/TimelinePanel.scss */
+/* line 206, ../scss/TimelinePanel.scss */
 .masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; }
-/* line 209, ../scss/TimelinePanel.scss */
+/* line 219, ../scss/TimelinePanel.scss */
 .mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); }
-/* line 223, ../scss/TimelinePanel.scss */
+/* line 233, ../scss/TimelinePanel.scss */
 .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }
-/* line 226, ../scss/TimelinePanel.scss */
+/* line 236, ../scss/TimelinePanel.scss */
 .userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }
-/* line 235, ../scss/TimelinePanel.scss */
+/* line 245, ../scss/TimelinePanel.scss */
 .timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; }
-/* line 245, ../scss/TimelinePanel.scss */
+/* line 255, ../scss/TimelinePanel.scss */
 .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
-/* line 253, ../scss/TimelinePanel.scss */
+/* line 263, ../scss/TimelinePanel.scss */
 .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 593b4ea1..8a4073c9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	Copyright (c) 2012, Motorola Mobility LLC.	3	Copyright (c) 2012, Motorola Mobility LLC.
4	All Rights Reserved.	4	All Rights Reserved.
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
54	"playheadmarker": {"#": "playhead_marker"},	54	"playheadmarker": {"#": "playhead_marker"},
55	"timetext" : {"#": "time_text"},	55	"timetext" : {"#": "time_text"},
56	"timebar" : {"#": "time_bar"},	56	"timebar" : {"#": "time_bar"},
57	"container_tracks" : {"#" : "container-tracks"},
58	"end_hottext" : {"@" : "endHottext"},	57	"end_hottext" : {"@" : "endHottext"},
59	"container_layers" : {"#" : "container-layers"},	58	"container_layers" : {"#" : "container-layers"},
60	"container_tracks" : {"#" : "container-tracks"},	59	"container_tracks" : {"#" : "container-tracks"},
@@ -62,9 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
62	"checkable_animated" : {"#" : "checkable_animated"},	61	"checkable_animated" : {"#" : "checkable_animated"},
63	"tl_configbutton" : {"#" : "tl-configbutton"},	62	"tl_configbutton" : {"#" : "tl-configbutton"},
64	"checkable_lock" : {"#" : "checkable_lock"},	63	"checkable_lock" : {"#" : "checkable_lock"},
65	"checkable_visible":{"#" : "checkable_visible"},	64	"checkable_visible":{"#" : "checkable_visible"}
66	"play_button" : {"#" : "play_button"},	65
67	"zoom_slider" : {"@" : "timelineZoomSlider"}	66	}
		67	},
		68
		69	"playButton": {
		70	"prototype": "montage/ui/toggle-button.reel",
		71	"properties": {
		72	"element": {"#": "play_button"},
		73	"identifier": "playButton",
		74	"pressedClass": "pausebutton",
		75	"pressedLabel": "",
		76	"unpressedLabel": "",
		77	"pressed": false
		78	},
		79	"bindings": {
		80	"pressed": {"<->": "@owner.stage.timelinePlay"}
68	}	81	}
69	},	82	},
70		83
@@ -191,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
191	<div data-montage-id="leftpane_inside" class="leftinside">	204	<div data-montage-id="leftpane_inside" class="leftinside">
192	<div data-montage-id="timeline_controller" class="timelinecontroller">	205	<div data-montage-id="timeline_controller" class="timelinecontroller">
193	<div data-montage-id="timeline_controls" class="timelinecontrols">	206	<div data-montage-id="timeline_controls" class="timelinecontrols">
194	<div data-montage-id="play_button" class="playbutton"></div>	207	<button data-montage-id="play_button" class="playbutton"></button>
195	<div data-montage-id="time_text" class="timetext">00:00:00</div>	208	<div data-montage-id="time_text" class="timetext">00:00:00</div>
196	</div>	209	</div>
197	</div>	210	</div>


diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 69fe254b..e037cccb 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
36		36
37	var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {	37	var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
38		38
		39	_stage: {
		40	value: null
		41	},
		42
		43	stage: {
		44	get: function() {
		45	return this._stage;
		46	},
		47	set: function(value) {
		48	if(value) {
		49	this._stage = value;
		50	}
		51	}
		52	},
		53
39	/* === BEGIN: Models === */	54	/* === BEGIN: Models === */
40	_user_layers: {	55	_user_layers: {
41	value: null	56	value: null
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1015	this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);	1030	this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
1016	this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);	1031	this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
1017	this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);	1032	this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
1018	this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
1019	this.addPropertyChangeListener("currentDocument.model.domContainer", this);	1033	this.addPropertyChangeListener("currentDocument.model.domContainer", this);
1020		1034
1021	// Start the panel out in disabled mode by default	1035	// Start the panel out in disabled mode by default
@@ -1639,21 +1653,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1639	}	1653	}
1640	},	1654	},
1641		1655
1642	handlePlayButtonClick:{
1643	value:function(ev){
1644	this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
1645
1646	if (this.application.ninja.appModel.livePreview) {
1647	this.play_button.classList.remove("playbutton");
1648	this.play_button.classList.add("pausebutton");
1649
1650	} else {
1651	this.play_button.classList.remove("pausebutton");
1652	this.play_button.classList.add("playbutton");
1653	}
1654	}
1655	},
1656
1657	handleKeyframeShortcut:{	1656	handleKeyframeShortcut:{
1658	value:function(action){	1657	value:function(action){
1659	var tempEv = {};	1658	var tempEv = {};


diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 201b530e..f82feb71 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE.
68	.rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }	68	.rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
69		69
70	/* line 150, ../scss/TimelinePanel.scss */	70	/* line 150, ../scss/TimelinePanel.scss */
71	.playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }	71	.playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; }
72		72
73	/* line 158, ../scss/TimelinePanel.scss */	73	/* line 162, ../scss/TimelinePanel.scss */
74	.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }	74	.playbutton:hover { background-color: #474747; opacity: 1; }
75		75
76	/* line 166, ../scss/TimelinePanel.scss */	76	/* line 166, ../scss/TimelinePanel.scss */
		77	.playbutton.active:hover { background-color: #474747; opacity: 1; }
		78
		79	/* line 170, ../scss/TimelinePanel.scss */
		80	.playbutton:focus { -webkit-box-shadow: none; }
		81
		82	/* line 173, ../scss/TimelinePanel.scss */
		83	.pausebutton { background-image: url("../images/pause.png"); }
		84
		85	/* line 176, ../scss/TimelinePanel.scss */
77	.forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }	86	.forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
78		87
79	/* line 174, ../scss/TimelinePanel.scss */	88	/* line 184, ../scss/TimelinePanel.scss */
80	.timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; }	89	.timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; }
81		90
82	/* line 186, ../scss/TimelinePanel.scss */	91	/* line 196, ../scss/TimelinePanel.scss */
83	.layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }	92	.layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }
84		93
85	/* line 196, ../scss/TimelinePanel.scss */	94	/* line 206, ../scss/TimelinePanel.scss */
86	.masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; }	95	.masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; }
87		96
88	/* line 209, ../scss/TimelinePanel.scss */	97	/* line 219, ../scss/TimelinePanel.scss */
89	.mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); }	98	.mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); }
90		99
91	/* line 223, ../scss/TimelinePanel.scss */	100	/* line 233, ../scss/TimelinePanel.scss */
92	.container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }	101	.container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }
93		102
94	/* line 226, ../scss/TimelinePanel.scss */	103	/* line 236, ../scss/TimelinePanel.scss */
95	.userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }	104	.userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }
96		105
97	/* line 235, ../scss/TimelinePanel.scss */	106	/* line 245, ../scss/TimelinePanel.scss */
98	.timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; }	107	.timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; }
99		108
100	/* line 245, ../scss/TimelinePanel.scss */	109	/* line 255, ../scss/TimelinePanel.scss */
101	.newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }	110	.newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
102		111
103	/* line 253, ../scss/TimelinePanel.scss */	112	/* line 263, ../scss/TimelinePanel.scss */
104	.deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }	113	.deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }