aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html131
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js192
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css73
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss2
4 files changed, 226 insertions, 172 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 0bd448f7..79b522ee 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,7 +17,12 @@
17 "element": {"#": "layer"}, 17 "element": {"#": "layer"},
18 "styleRepetition" : {"@":"repetition1"}, 18 "styleRepetition" : {"@":"repetition1"},
19 "dynamicLayerName" : {"@":"dtext1"}, 19 "dynamicLayerName" : {"@":"dtext1"},
20 "slotStyle" : {"@":"slot1"} 20 "slotStyle" : {"@":"slot1"},
21 "mainCollapser" : {"@" : "mainCollapser"},
22 "positionCollapser" : {"@" : "positionCollapser"},
23 "transformCollapser" : {"@" : "transformCollapser"},
24 "styleCollapser" : {"@" : "styleCollapser"},
25 "clickerMain" : {"#" : "clicker-main"}
21 } 26 }
22 }, 27 },
23 "dtext1" : { 28 "dtext1" : {
@@ -225,74 +230,160 @@
225 "oneway": false 230 "oneway": false
226 } 231 }
227 } 232 }
233 },
234
235 "mainCollapser" : {
236 "module" : "js/panels/timeline/Collapser.js",
237 "name" : "Collapser",
238 "properties" : {
239 "element" : {"#" : "content-main"},
240 "myContent" : {"#" : "content-main"},
241 "contentHeight" : 60,
242 "isLabelClickable" : true,
243 "clicker" : {"#" : "clicker-main"},
244 "isCollapsed" : true,
245 "isAnimated" : true
246 },
247 "bindings" : {
248 "isToggling" : {
249 "boundObject" : {"@" : "owner" },
250 "boundObjectPropertyPath" : "isMainCollapsed",
251 "oneway" : false
252 }
253 }
254 },
255
256 "positionCollapser" : {
257 "module" : "js/panels/timeline/Collapser.js",
258 "name" : "Collapser",
259 "properties" : {
260 "element" : {"#" : "content-position"},
261 "myContent" : {"#":"content-position"},
262 "contentHeight" : 60,
263 "isLabelClickable" : true,
264 "clicker" : {"#" : "clicker-position"},
265 "isCollapsed" : true,
266 "isAnimated" : true
267 },
268 "bindings" : {
269 "isToggling" : {
270 "boundObject" : {"@" : "owner" },
271 "boundObjectPropertyPath" : "isPositionCollapsed",
272 "oneway" : false
273 }
274 }
275 },
276
277 "transformCollapser" : {
278 "module" : "js/panels/timeline/Collapser.js",
279 "name" : "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" : {
299 "module" : "js/panels/timeline/Collapser.js",
300 "name" : "Collapser",
301 "properties" : {
302 "element" : {"#" : "content-style"},
303 "myContent" : {"#":"content-style"},
304 "contentHeight" : 60,
305 "isLabelClickable" : true,
306 "clicker" : {"#" : "clicker-style"},
307 "isCollapsed" : true,
308 "isAnimated" : true
309 },
310 "bindings" : {
311 "isToggling" : {
312 "boundObject" : {"@" : "owner" },
313 "boundObjectPropertyPath" : "isStyleCollapsed",
314 "oneway" : false
315 }
316 }
228 } 317 }
318
319
229 } 320 }
230 </script> 321 </script>
231 </head> 322 </head>
232 <body> 323 <body>
233 324
234 <div id="layer" class="container-layer"> 325 <div data-montage-id="layer" class="container-layer">
235 <div class="label-layer"> 326 <div class="label-layer">
236 <span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span> 327 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
237 <span class="collapsible-clicker collapsible-collapsed"></span> 328 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
238 <div class="cssbutton button-lock"></div> 329 <div class="cssbutton button-lock"></div>
239 <div class="cssbutton button-visible"></div> 330 <div class="cssbutton button-visible"></div>
240 </div> 331 </div>
241 <div class="collapsible-content content-layer collapsible-collapsed"> 332 <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main">
242 <div class="label-position"> 333 <div class="label-position">
243 <span class="collapsible-label">Position</span> 334 <span class="collapsible-label">Position</span>
244 <span class="collapsible-clicker clicker-position"></span> 335 <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
245 </div> 336 </div>
246 <div class="content-position collapsible-content"> 337 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
247 <div class="layout-table"> 338 <div class="layout-table">
248 <div class="layout-row"> 339 <div class="layout-row">
249 <div class="layout-cell">X</div> 340 <div class="layout-cell">X</div>
250 <div class="layout-cell"><div id="position-x"></div></div> 341 <div class="layout-cell"><div data-montage-id="position-x"></div></div>
251 </div> 342 </div>
252 <div class="layout-row"> 343 <div class="layout-row">
253 <div class="layout-cell">Y</div> 344 <div class="layout-cell">Y</div>
254 <div class="layout-cell"><div id="position-y"></div></div> 345 <div class="layout-cell"><div data-montage-id="position-y"></div></div>
255 </div> 346 </div>
256 </div> 347 </div>
257 </div> 348 </div>
258 <div class="label-transform"> 349 <div class="label-transform">
259 <span class="collapsible-label">Transform</span> 350 <span class="collapsible-label">Transform</span>
260 <span class="clicker-transform collapsible-clicker"></span> 351 <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
261 </div> 352 </div>
262 <div class="content-transform collapsible-content"> 353 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
263 <div class="layout-table"> 354 <div class="layout-table">
264 <div class="layout-row"> 355 <div class="layout-row">
265 <div class="layout-cell">Scale X</div> 356 <div class="layout-cell">Scale X</div>
266 <div class="layout-cell"><div id="scale-x"></div></div> 357 <div class="layout-cell"><div data-montage-id="scale-x"></div></div>
267 </div> 358 </div>
268 <div class="layout-row"> 359 <div class="layout-row">
269 <div class="layout-cell">Scale Y</div> 360 <div class="layout-cell">Scale Y</div>
270 <div class="layout-cell"><div id="scale-y"></div></div> 361 <div class="layout-cell"><div data-montage-id="scale-y"></div></div>
271 </div> 362 </div>
272 <div class="layout-row"> 363 <div class="layout-row">
273 <div class="layout-cell">Skew X</div> 364 <div class="layout-cell">Skew X</div>
274 <div class="layout-cell"><div id="skew-x"></div></div> 365 <div class="layout-cell"><div data-montage-id="skew-x"></div></div>
275 </div> 366 </div>
276 <div class="layout-row"> 367 <div class="layout-row">
277 <div class="layout-cell">Skew Y</div> 368 <div class="layout-cell">Skew Y</div>
278 <div class="layout-cell"><div id="skew-y"></div></div> 369 <div class="layout-cell"><div data-montage-id="skew-y"></div></div>
279 </div> 370 </div>
280 <div class="layout-row"> 371 <div class="layout-row">
281 <div class="layout-cell">Rotation</div> 372