aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-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
4 files changed, 96 insertions, 64 deletions
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
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; }
105 114
106/* line 261, ../scss/TimelinePanel.scss */ 115/* line 271, ../scss/TimelinePanel.scss */
107.tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; }