diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 16 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 42 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 73 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 16 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 13 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 72 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 685 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 24 |
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 | .labe |