aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Materials/materials-data.json18
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js31
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css81
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss26
5 files changed, 109 insertions, 69 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 @@
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/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index c287e68e..0d769c23 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -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,8 +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
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"}
67 } 81 }
68 }, 82 },
69 83
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
190 <div data-montage-id="leftpane_inside" class="leftinside"> 204 <div data-montage-id="leftpane_inside" class="leftinside">
191 <div data-montage-id="timeline_controller" class="timelinecontroller"> 205 <div data-montage-id="timeline_controller" class="timelinecontroller">
192 <div data-montage-id="timeline_controls" class="timelinecontrols"> 206 <div data-montage-id="timeline_controls" class="timelinecontrols">
193 <div data-montage-id="play_button" class="playbutton"></div> 207 <button data-montage-id="play_button" class="playbutton"></button>
194 <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>
195 </div> 209 </div>
196 </div> 210 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4e9771d4..521c315d 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
37var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 37var 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
@@ -1638,21 +1652,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1638 } 1652 }
1639 }, 1653 },
1640 1654
1641 handlePlayButtonClick:{
1642 value:function(ev){
1643 this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
1644
1645 if (this.application.ninja.appModel.livePreview) {
1646 this.play_button.classList.remove("playbutton");
1647 this.play_button.classList.add("pausebutton");
1648
1649 } else {
1650 this.play_button.classList.remove("pausebutton");
1651 this.play_button.classList.add("playbutton");
1652 }
1653 }
1654 },
1655
1656 handleKeyframeShortcut:{ 1655 handleKeyframeShortcut:{
1657 value:function(action){ 1656 value:function(action){
1658 var tempEv = {}; 1657 var tempEv = {};
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index f9f5e98c..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