diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 114 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 206 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 78 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 8 |
4 files changed, 138 insertions, 268 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 9288d718..c7e7b575 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -19,7 +19,6 @@ | |||
19 | "dynamicLayerTag" : {"@": "dtext2"}, | 19 | "dynamicLayerTag" : {"@": "dtext2"}, |
20 | "mainCollapser" : {"@" : "mainCollapser"}, | 20 | "mainCollapser" : {"@" : "mainCollapser"}, |
21 | "positionCollapser" : {"@" : "positionCollapser"}, | 21 | "positionCollapser" : {"@" : "positionCollapser"}, |
22 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
23 | "styleCollapser" : {"@" : "styleCollapser"}, | 22 | "styleCollapser" : {"@" : "styleCollapser"}, |
24 | "clickerMain" : {"#" : "clicker-main"}, | 23 | "clickerMain" : {"#" : "clicker-main"}, |
25 | "myLabel" : {"#" : "myLabel"} | 24 | "myLabel" : {"#" : "myLabel"} |
@@ -180,60 +179,6 @@ | |||
180 | } | 179 | } |
181 | } | 180 | } |
182 | }, | 181 | }, |
183 | "dtext_skew_x" : { | ||
184 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
185 | "properties": { | ||
186 | "element": {"#": "skew-x"}, | ||
187 | "maxValue" : 100, | ||
188 | "minValue" : 0, | ||
189 | "acceptableUnits" : "%", | ||
190 | "units" : "%", | ||
191 | "value" : 0 | ||
192 | }, | ||
193 | "bindings": { | ||
194 | "value": { | ||
195 | "boundObject": {"@": "owner"}, | ||
196 | "boundObjectPropertyPath": "dtextSkewX", | ||
197 | "oneway": false | ||
198 | } | ||
199 | } | ||
200 | }, | ||
201 | "dtext_skew_y" : { | ||
202 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
203 | "properties": { | ||
204 | "element": {"#": "skew-y"}, | ||
205 | "maxValue" : 100, | ||
206 | "minValue" : 0, | ||
207 | "acceptableUnits" : "%", | ||
208 | "units" : "%", | ||
209 | "value" : 0 | ||
210 | }, | ||
211 | "bindings": { | ||
212 | "value": { | ||
213 | "boundObject": {"@": "owner"}, | ||
214 | "boundObjectPropertyPath": "dtextSkewY", | ||
215 | "oneway": false | ||
216 | } | ||
217 | } | ||
218 | }, | ||
219 | "dtext_rotate" : { | ||
220 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | ||
221 | "properties": { | ||
222 | "element": {"#": "rotation"}, | ||
223 | "maxValue" : 360, | ||
224 | "minValue" : -360, | ||
225 | "acceptableUnits" : "degrees", | ||
226 | "units" : "degrees", | ||
227 | "value" : 0 | ||
228 | }, | ||
229 | "bindings": { | ||
230 | "value": { | ||
231 | "boundObject": {"@": "owner"}, | ||
232 | "boundObjectPropertyPath": "dtextRotate", | ||
233 | "oneway": false | ||
234 | } | ||
235 | } | ||
236 | }, | ||
237 | 182 | ||
238 | "mainCollapser" : { | 183 | "mainCollapser" : { |
239 | "prototype" : "js/panels/timeline/Collapser", | 184 | "prototype" : "js/panels/timeline/Collapser", |
@@ -275,26 +220,6 @@ | |||
275 | } | 220 | } |
276 | }, | 221 | }, |
277 | 222 | ||
278 | "transformCollapser" : { | ||
279 | "prototype" : "js/panels/timeline/Collapser", | ||
280 | "properties" : { | ||
281 | "element" : {"#" : "content-transform"}, | ||
282 | "myContent" : {"#":"content-transform"}, | ||
283 | "contentHeight" : 60, | ||
284 | "isLabelClickable" : true, | ||
285 | "clicker" : {"#" : "clicker-transform"}, | ||
286 | "isCollapsed" : true, | ||
287 | "isAnimated" : true | ||
288 | }, | ||
289 | "bindings" : { | ||
290 | "isToggling" : { | ||
291 | "boundObject" : {"@" : "owner" }, | ||
292 | "boundObjectPropertyPath" : "isTransformCollapsed", | ||
293 | "oneway" : false | ||
294 | } | ||
295 | } | ||
296 | }, | ||
297 | |||
298 | "styleCollapser" : { | 223 | "styleCollapser" : { |
299 | "prototype" : "js/panels/timeline/Collapser", | 224 | "prototype" : "js/panels/timeline/Collapser", |
300 | "properties" : { | 225 | "properties" : { |
@@ -331,7 +256,7 @@ | |||
331 | </div> | 256 | </div> |
332 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> | 257 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> |
333 | <div class="label-position"> | 258 | <div class="label-position"> |
334 | <span class="collapsible-label">Position</span> | 259 | <span class="collapsible-label">Position and Size</span> |
335 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> | 260 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
336 | </div> | 261 | </div> |
337 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> | 262 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
@@ -344,37 +269,16 @@ | |||
344 | <div class="cell-property">Top</div> | 269 | <div class="cell-property">Top</div> |
345 | <div class="cell-value"><div data-montage-id="position-y"></div></div> | 270 | <div class="cell-value"><div data-montage-id="position-y"></div></div> |
346 | </div> | 271 | </div> |
272 | <div class="container-row"> | ||
273 | <div class="cell-property">Width</div> | ||
274 | <div class="cell-value"><div data-montage-id="scale-x"></div></div> | ||
275 | </div> | ||
276 | <div class="container-row"> | ||
277 | <div class="cell-property">Height</div> | ||
278 | <div class="cell-value"><div data-montage-id="scale-y"></div></div> | ||
279 | </div> | ||
347 | </div> | 280 | </div> |
348 | </div> | 281 | </div> |
349 | <div class="label-transform"> | ||
350 | <span class="collapsible-label">Transform</span> | ||
351 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> | ||
352 | </div> | ||
353 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> | ||
354 | <div class="layout-tablew"> | ||
355 | <div class="container-row"> | ||
356 | <div class="cell-property">Width</div> | ||
357 | <div class="cell-value"><div data-montage-id="scale-x"></div></div> | ||
358 | </div> | ||
359 | <div class="container-row"> | ||
360 | <div class="cell-property">Height</div> | ||
361 | <div class="cell-value"><div data-montage-id="scale-y"></div></div> | ||
362 | </div> | ||
363 | <div class="container-row"> | ||
364 | <div class="cell-property">Skew X</div> | ||
365 | <div class="cell-value"><div data-montage-id="skew-x"></div></div> | ||
366 | </div> | ||
367 | <div class="container-row"> | ||
368 | <div class="cell-property">Skew Y</div> | ||
369 | <div class="cell-value"><div data-montage-id="skew-y"></div></div> | ||
370 | </div> | ||
371 | <div class="container-row"> | ||
372 | <div class="cell-property">Rotation</div> | ||
373 | <div class="cell-value"><div data-montage-id="rotation"></div></div> | ||
374 | </div> | ||
375 | </div> | ||
376 | |||
377 | </div> | ||
378 | <div class="label-style"> | 282 | <div class="label-style"> |
379 | <span class="collapsible-label">Style</span> | 283 | <span class="collapsible-label">Style</span> |
380 | <span class="clicker-style collapsible-clicker collapsible-collapsed" data-montage-id="clicker-style"></span> | 284 | <span class="clicker-style collapsible-clicker collapsible-collapsed" data-montage-id="clicker-style"></span> |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..8df0e9ae 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -51,6 +51,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
51 | value: false | 51 | value: false |
52 | }, | 52 | }, |
53 | styleRepetition : { | 53 | styleRepetition : { |
54 | serializable: true, | ||
54 | get: function() { | 55 | get: function() { |
55 | return this._styleRepetition; | 56 | return this._styleRepetition; |
56 | }, | 57 | }, |
@@ -61,8 +62,17 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
61 | _styleCounter : { | 62 | _styleCounter : { |
62 | value: 0 | 63 | value: 0 |
63 | }, | 64 | }, |
65 | styleCounter:{ | ||
66 | serializable:true, | ||
67 | get:function () { | ||
68 | return this._styleCounter; | ||
69 | }, | ||
70 | set:function (newVal) { | ||
71 | this._styleCounter = newVal; | ||
72 | } | ||
73 | }, | ||
64 | 74 | ||
65 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ | 75 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ |
66 | _layerName:{ | 76 | _layerName:{ |
67 | value: "Default Layer Name" | 77 | value: "Default Layer Name" |
68 | }, |