aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html16
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js42
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css73
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss16
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html13
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js72
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css685
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js24
8 files changed, 625 insertions, 316 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index eb9ff3a9..9a9623b8 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
17 "element": {"#": "layer"}, 17 "element": {"#": "layer"},
18 "styleRepetition" : {"@":"repetition1"}, 18 "styleRepetition" : {"@":"repetition1"},
19 "dynamicLayerName" : {"@":"dtext1"}, 19 "dynamicLayerName" : {"@":"dtext1"},
20 "dynamicLayerTag" : {"@": "dtext2"},
20 "slotStyle" : {"@":"slot1"}, 21 "slotStyle" : {"@":"slot1"},
21 "mainCollapser" : {"@" : "mainCollapser"}, 22 "mainCollapser" : {"@" : "mainCollapser"},
22 "positionCollapser" : {"@" : "positionCollapser"}, 23 "positionCollapser" : {"@" : "positionCollapser"},
@@ -41,6 +42,20 @@
41 } 42 }
42 } 43 }
43 }, 44 },
45 "dtext2" : {
46 "module" : "montage/ui/dynamic-text.reel",
47 "name" : "DynamicText",
48 "properties" : {
49 "element" : {"#" : "layer-tag"}
50 },
51 "bindings" : {
52 "value" : {
53 "boundObject" : {"@": "owner"},
54 "boundObjectPropertyPath" : "layerTag",
55 "oneway" : false
56 }
57 }
58 },
44 "repetition1": { 59 "repetition1": {
45 "module": "montage/ui/repetition.reel", 60 "module": "montage/ui/repetition.reel",
46 "name": "Repetition", 61 "name": "Repetition",
@@ -326,6 +341,7 @@
326 341
327 <div data-montage-id="layer" class="container-layer"> 342 <div data-montage-id="layer" class="container-layer">
328 <div class="label-layer" data-montage-id="myLabel"> 343 <div class="label-layer" data-montage-id="myLabel">
344 <span data-montage-id="layer-tag" class="layer-tag"></span>
329 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> 345 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
330 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> 346 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
331 <div class="cssbutton button-lock"></div> 347 <div class="cssbutton button-lock"></div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f9edfca6..f62d43a4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -99,6 +99,20 @@ var Layer = exports.Layer = Montage.create(Component, {
99 this.layerData.layerID = value; 99 this.layerData.layerID = value;
100 } 100 }
101 }, 101 },
102 _layerTag:{
103 value: "tag"
104 },
105
106 layerTag:{
107 serializable: true,
108 get:function(){
109 return this._layerTag;
110 },
111 set:function(newVal){
112 this._layerTag = newVal;
113 this.layerData.layerTag = newVal;
114 }
115 },
102 116
103 /* Position and Transform hottext values */ 117 /* Position and Transform hottext values */
104 _dtextPositionX : { 118 _dtextPositionX : {
@@ -290,9 +304,30 @@ var Layer = exports.Layer = Montage.create(Component, {
290 }, 304 },
291 set:function(value){ 305 set:function(value){
292 this._isAnimated = value; 306 this._isAnimated = value;
293 this.layerData.isAnimated = newVal; 307 this.layerData.isAnimated = value;
308 }
309 },
310 _isVisible:{
311 value: true
312 },
313
314 isVisible:{
315 get:function(){
316 return this._isVisible;
317 },
318 set:function(value){
319 if (this._isVisible !== value) {
320 this._isVisible = value;
321 if (value === true) {
322 this.element.classList.remove("layer-hidden");
323 } else {
324 this.element.classList.add("layer-hidden");
325 }
326 }
327 this.layerData.isVisible = value;
294 } 328 }
295 }, 329 },
330
296 _justAdded: { 331 _justAdded: {
297 value: false 332 value: false
298 }, 333 },
@@ -433,6 +468,9 @@ var Layer = exports.Layer = Montage.create(Component, {
433 this.dtextScaleY = this.layerData.dtextScaleY; 468 this.dtextScaleY = this.layerData.dtextScaleY;
434 this.dtextRotate = this.layerData.dtextRotate; 469 this.dtextRotate = this.layerData.dtextRotate;
435 this._isFirstDraw = this.layerData._isFirstDraw; 470 this._isFirstDraw = this.layerData._isFirstDraw;
471 this.layerTag = this.layerData.layerTag;
472 this.isVisible = this.layerData.isVisible;
473 this.isAnimated = this.layerData.isAnimated;
436 this.needsDraw = boolNeedsDraw; 474 this.needsDraw = boolNeedsDraw;
437 } 475 }
438 }, 476 },
@@ -504,6 +542,8 @@ var Layer = exports.Layer = Montage.create(Component, {
504 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 542 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
505 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 543 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
506 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 544 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
545
546 // Bind this.layerTag to the tag
507 547
508 } 548 }
509 }, 549 },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 50e664c4..179571af 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -93,36 +93,42 @@
93/* line 91, ../scss/Layer.scss */ 93/* line 91, ../scss/Layer.scss */
94.userlayers .collapsible-label { 94.userlayers .collapsible-label {
95 display: block; 95 display: block;
96 width: 100px;
97 height: 21px; 96 height: 21px;
98 line-height: 20px; 97 line-height: 20px;
99 color: white; 98 color: white;
100 margin-left: 30px; 99 margin-left: 80px;
101 margin-right: 20px; 100 margin-right: 40px;
102 white-space: nowrap; 101 white-space: nowrap;
103 overflow: hidden; 102 overflow: hidden;
104 text-overflow: ellipsis; 103 text-overflow: ellipsis;
105} 104}
106 105
107/* line 103, ../scss/Layer.scss */ 106/* line 103, ../scss/Layer.scss */
107.userlayers .layer-tag {
108 position: absolute;
109 top: 3px;
110 left: 20px;
111}
112
113/* line 110, ../scss/Layer.scss */
108.layerSelected .label-layer { 114.layerSelected .label-layer {
109 background-color: #b2b2b2; 115 background-color: #b2b2b2;
110 color: #242424; 116 color: #242424;
111} 117}
112 118
113/* line 107, ../scss/Layer.scss */ 119/* line 114, ../scss/Layer.scss */
114.content-layer { 120.content-layer {
115 background-color: #474747; 121 background-color: #474747;
116 color: white; 122 color: white;
117} 123}
118 124
119/* line 111, ../scss/Layer.scss */ 125/* line 118, ../scss/Layer.scss */
120.content-layer .collapsible-label { 126.content-layer .collapsible-label {
121 background-position: 14px 5px; 127 background-position: 14px 5px;
122 border-width: 0px; 128 border-width: 0px;
123} 129}
124 130
125/* line 119, ../scss/Layer.scss */ 131/* line 126, ../scss/Layer.scss */
126.label-layer, 132.label-layer,
127.label-position, 133.label-position,
128.label-transform, 134.label-transform,
@@ -133,19 +139,20 @@
133 cursor: pointer; 139 cursor: pointer;
134} 140}
135 141
136/* line 126, ../scss/Layer.scss */ 142/* line 134, ../scss/Layer.scss */
137.content-layer .collapsible-label, 143.content-layer .collapsible-label,
138.content-layer .collapsible-content { 144.content-layer .collapsible-content,
145.content-layer .layer-tag {
139 font-size: 11px; 146 font-size: 11px;
140} 147}
141 148
142/* line 133, ../scss/Layer.scss */ 149/* line 141, ../scss/Layer.scss */
143.label-layer .collapsible-label br, 150.label-layer .collapsible-label br,