aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html16
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js49
-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.js157
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css685
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.pngbin0 -> 1083 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-gear.pngbin0 -> 1397 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss370
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/config.rb10
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js24
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js39
13 files changed, 1070 insertions, 382 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 3bcc1401..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 },
@@ -710,13 +750,14 @@ var Layer = exports.Layer = Montage.create(Component, {
710 handleSelectorEditableBlur : { 750 handleSelectorEditableBlur : {
711 value: function(event) { 751 value: function(event) {
712 this.titleSelector.scrollLeft = 0; 752 this.titleSelector.scrollLeft = 0;
753 this.handleSelectorEditableChange(event);
713 } 754 }
714 }, 755 },
715 handleSelectorEditableChange: { 756 handleSelectorEditableChange: {
716 value: function(event) { 757 value: function(event) {
717 var newVal = "ONTD"; 758 var newVal = this._layerEditable.enteredValue;
718 if (this._layerEditable.value !== "") { 759 if (this._layerEditable.enteredValue.length === 0) {
719 newVal = this._layerEditable.value; 760 newVal = this._layerEditable._preEditValue;
720 } 761 }
721 this.dynamicLayerName.value = newVal; 762 this.dynamicLayerName.value = newVal;
722 this.layerName = newVal; 763 this.layerName = newVal;
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;