8 files changed, 127 insertions, 73 deletions
diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
index abdacbe1..6fe5da69 100644
--- a/js/panels/Materials/materials-data.json
+++ b/js/panels/Materials/materials-data.json
@@ -5,10 +5,18 @@
            "label": "Ninja Materials",
            "children": [
                {
+                    "label": "Blue Sky",
+                    "id" : "Blue Sky"
+               },
+               {
                    "label": "Bump Metal",
                    "id" : "Bump Metal"
                },
-                {
+                 {
+                    "label": "Dark Blur",
+                    "id" : "Dark Blur"
+                },
+               {
                    "label": "Flag",
                    "id" : "Flag"
                },
@@ -17,10 +25,6 @@
                    "id" : "Linear Gradient"
                },
                {
-                    "label": "Paris",
-                    "id" : "Paris"
-                },
-                {
                    "label": "Plasma",
                    "id" : "Plasma"
                },
@@ -29,6 +33,10 @@
                    "id" : "Pulse"
                },
                {
+                    "label": "Radial Blur",
+                    "id" : "Radial Blur"
+                },
+                {
                    "label": "Radial Gradient",
                    "id" : "Radial Gradient"
                },
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index aef48230..4b9044ae 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -116,6 +116,14 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
    handleShowMaterialPopup: {
        enumerable: false,
        value: function (event) {
+            var piButton = this.application.eventManager.componentClaimingPointer("mouse");
+            if(piButton) {
+                this.selectedMaterialNode = piButton.element;
+            } else {
+                this.selectedMaterialNode = null;
+            }
+            this.materialId = event.detail.materialId;
            this._showMaterialPopup(event.detail);
        }
    },
@@ -213,7 +221,11 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
                contentHt = parseFloat(content.style.height) || content.offsetHeight || 0,
                contentWd = parseFloat(content.style.width) || content.offsetWidth || 0,
                pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0));
-            return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};
+            if(!pt) {
+                return defaultPosition;
+            } else {
+                return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};
+            }
        }
    }
 });
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 39e51901..0e7a4e68 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -111,6 +111,8 @@ exports.Splitter = Montage.create(Component, {
                else this.panel.classList.remove("collapsed");
                this.element.classList.remove("collapsed");
                if(this._resizeBar != null) this.resizeBar.classList.remove("collapsed");
+                // webkitTransitionEnd is not fired when expanded, so force draw here.
+                this.application.ninja.stage.resizeCanvases = true;
            }
        }
    },
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, {
        }

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json index abdacbe1..6fe5da69 100644 --- a/js/panels/Materials/materials-data.json +++ b/js/panels/Materials/materials-data.json
@@ -5,10 +5,18 @@
5	"label": "Ninja Materials",	5	"label": "Ninja Materials",
6	"children": [	6	"children": [
7	{	7	{
		8	"label": "Blue Sky",
		9	"id" : "Blue Sky"
		10	},
		11	{
8	"label": "Bump Metal",	12	"label": "Bump Metal",
9	"id" : "Bump Metal"	13	"id" : "Bump Metal"
10	},	14	},
11	{	15	{
		16	"label": "Dark Blur",
		17	"id" : "Dark Blur"
		18	},
		19	{
12	"label": "Flag",	20	"label": "Flag",
13	"id" : "Flag"	21	"id" : "Flag"
14	},	22	},
@@ -17,10 +25,6 @@
17	"id" : "Linear Gradient"	25	"id" : "Linear Gradient"
18	},	26	},
19	{	27	{
20	"label": "Paris",
21	"id" : "Paris"
22	},
23	{
24	"label": "Plasma",	28	"label": "Plasma",
25	"id" : "Plasma"	29	"id" : "Plasma"
26	},	30	},
@@ -29,6 +33,10 @@
29	"id" : "Pulse"	33	"id" : "Pulse"
30	},	34	},
31	{	35	{
		36	"label": "Radial Blur",
		37	"id" : "Radial Blur"
		38	},
		39	{
32	"label": "Radial Gradient",	40	"label": "Radial Gradient",
33	"id" : "Radial Gradient"	41	"id" : "Radial Gradient"
34	},	42	},


diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index aef48230..4b9044ae 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -116,6 +116,14 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
116	handleShowMaterialPopup: {	116	handleShowMaterialPopup: {
117	enumerable: false,	117	enumerable: false,
118	value: function (event) {	118	value: function (event) {
		119	var piButton = this.application.eventManager.componentClaimingPointer("mouse");
		120	if(piButton) {
		121	this.selectedMaterialNode = piButton.element;
		122	} else {
		123	this.selectedMaterialNode = null;
		124	}
		125
		126	this.materialId = event.detail.materialId;
119	this._showMaterialPopup(event.detail);	127	this._showMaterialPopup(event.detail);
120	}	128	}
121	},	129	},
@@ -213,7 +221,11 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
213	contentHt = parseFloat(content.style.height) \|\| content.offsetHeight \|\| 0,	221	contentHt = parseFloat(content.style.height) \|\| content.offsetHeight \|\| 0,
214	contentWd = parseFloat(content.style.width) \|\| content.offsetWidth \|\| 0,	222	contentWd = parseFloat(content.style.width) \|\| content.offsetWidth \|\| 0,
215	pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0));	223	pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0));
216	return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};	224	if(!pt) {
		225	return defaultPosition;
		226	} else {
		227	return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};
		228	}
217	}	229	}
218	}	230	}
219	});	231	});


diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 39e51901..0e7a4e68 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js
@@ -111,6 +111,8 @@ exports.Splitter = Montage.create(Component, {
111	else this.panel.classList.remove("collapsed");	111	else this.panel.classList.remove("collapsed");
112	this.element.classList.remove("collapsed");	112	this.element.classList.remove("collapsed");
113	if(this._resizeBar != null) this.resizeBar.classList.remove("collapsed");	113	if(this._resizeBar != null) this.resizeBar.classList.remove("collapsed");
		114	// webkitTransitionEnd is not fired when expanded, so force draw here.
		115	this.application.ninja.stage.resizeCanvases = true;
114	}	116	}
115	}	117	}
116	},	118	},


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	},