diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 46 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 4 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 43 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 24 |
4 files changed, 83 insertions, 34 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 454c2742..eb9ff3a9 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -337,14 +337,14 @@ | |||
337 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> | 337 | <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span> |
338 | </div> | 338 | </div> |
339 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> | 339 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position"> |
340 | <div class="layout-table"> | 340 | <div class="layout-tablew"> |
341 | <div class="layout-row"> | 341 | <div class="container-row"> |
342 | <div class="layout-cell">X</div> | 342 | <div class="cell-property">X</div> |
343 | <div class="layout-cell"><div data-montage-id="position-x"></div></div> | 343 | <div class="cell-value"><div data-montage-id="position-x"></div></div> |
344 | </div> | 344 | </div> |
345 | <div class="layout-row"> | 345 | <div class="container-row"> |
346 | <div class="layout-cell">Y</div> | 346 | <div class="cell-property">Y</div> |
347 | <div class="layout-cell"><div data-montage-id="position-y"></div></div> | 347 | <div class="cell-value"><div data-montage-id="position-y"></div></div> |
348 | </div> | 348 | </div> |
349 | </div> | 349 | </div> |
350 | </div> | 350 | </div> |
@@ -353,26 +353,26 @@ | |||
353 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> | 353 | <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span> |
354 | </div> | 354 | </div> |
355 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> | 355 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform"> |
356 | <div class="layout-table"> | 356 | <div class="layout-tablew"> |
357 | <div class="layout-row"> | 357 | <div class="container-row"> |
358 | <div class="layout-cell">Scale X</div> | 358 | <div class="cell-property">Scale X</div> |
359 | <div class="layout-cell"><div data-montage-id="scale-x"></div></div> | 359 | <div class="cell-value"><div data-montage-id="scale-x"></div></div> |
360 | </div> | 360 | </div> |
361 | <div class="layout-row"> | 361 | <div class="container-row"> |
362 | <div class="layout-cell">Scale Y</div> | 362 | <div class="cell-property">Scale Y</div> |
363 | <div class="layout-cell"><div data-montage-id="scale-y"></div></div> | 363 | <div class="cell-value"><div data-montage-id="scale-y"></div></div> |
364 | </div> | 364 | </div> |
365 | <div class="layout-row"> | 365 | <div class="container-row"> |
366 | <div class="layout-cell">Skew X</div> | 366 | <div class="cell-property">Skew X</div> |
367 | <div class="layout-cell"><div data-montage-id="skew-x"></div></div> | 367 | <div class="cell-value"><div data-montage-id="skew-x"></div></div> |
368 | </div> | 368 | </div> |
369 | <div class="layout-row"> | 369 | <div class="container-row"> |
370 | <div class="layout-cell">Skew Y</div> | 370 | <div class="cell-property">Skew Y</div> |
371 | <div class="layout-cell"><div data-montage-id="skew-y"></div></div> | 371 | <div class="cell-value"><div data-montage-id="skew-y"></div></div> |
372 | </div> | 372 | </div> |
373 | <div class="layout-row"> | 373 | <div class="container-row"> |
374 | <div class="layout-cell">Rotation</div> | 374 | <div class="cell-property">Rotation</div> |
375 | <div class="layout-cell"><div data-montage-id="rotation"></div></div> | 375 | <div class="cell-value"><div data-montage-id="rotation"></div></div> |
376 | </div> | 376 | </div> |
377 | </div> | 377 | </div> |
378 | 378 | ||
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2f0310a9..b713a197 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -514,8 +514,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
514 | this.element.addEventListener("click", this, false); | 514 | this.element.addEventListener("click", this, false); |
515 | 515 | ||
516 | // Drag and drop event handlers | 516 | // Drag and drop event handlers |
517 | this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); | 517 | this.myLabel.addEventListener("mouseover", this.handleMouseover.bind(this), false); |
518 | this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); | 518 | this.myLabel.addEventListener("mouseout", this.handleMouseout.bind(this), false); |
519 | this.element.addEventListener("dragover", this.handleDragover.bind(this), false); | 519 | this.element.addEventListener("dragover", this.handleDragover.bind(this), false); |
520 | this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); | 520 | this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); |
521 | this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); | 521 | this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); |
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 2ea1e0f6..50e664c4 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css | |||
@@ -227,32 +227,57 @@ | |||
227 | } | 227 | } |
228 | 228 | ||
229 | /* line 197, ../scss/Layer.scss */ | 229 | /* line 197, ../scss/Layer.scss */ |
230 | .collapsible-content .collapsible-content .layout-table .layout-row { | ||
231 | height: 20px; | ||
232 | overflow: hidden; | ||
233 | } | ||
234 | |||
235 | /* line 201, ../scss/Layer.scss */ | ||
230 | .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { | 236 | .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { |
231 | width: 40%; | 237 | width: 40%; |
232 | height: 20px; | 238 | height: 20px; |
233 | border-bottom: 1px solid #505050; | 239 | border-bottom: 1px solid #505050; |
234 | line-height: 20px; | 240 | line-height: 20px; |
235 | text-align: left; | 241 | text-align: left; |
242 | overflow: hidden; | ||
243 | } | ||
244 | |||
245 | /* line 210, ../scss/Layer.scss */ | ||
246 | .collapsible-content .collapsible-content .container-row { | ||
247 | border-bottom: 1px solid #505050; | ||
248 | height: 20px; | ||
249 | } | ||
250 | |||
251 | /* line 216, ../scss/Layer.scss */ | ||
252 | .collapsible-content .collapsible-content .cell-property, | ||
253 | .collapsible-content .collapsible-content .cell-value { | ||
254 | width: 45%; | ||
255 | float: left; | ||
256 | height: 20px; | ||
257 | overflow: hidden; | ||
258 | text-overflow: ellipsis; | ||
259 | white-space: nowrap; | ||
260 | line-height: 18px; | ||
236 | } | 261 | } |
237 | 262 | ||
238 | /* line 204, ../scss/Layer.scss */ | 263 | /* line 228, ../scss/Layer.scss */ |
239 | .collapsible-content .layout-table:first-child { | 264 | .collapsible-content .layout-table:first-child { |
240 | border-top: 1px solid #505050; | 265 | border-top: 1px solid #505050; |
241 | } | 266 | } |
242 | 267 | ||
243 | /* line 208, ../scss/Layer.scss */ | 268 | /* line 232, ../scss/Layer.scss */ |
244 | .collapsible-content .hottextunit { | 269 | .collapsible-content .hottextunit { |
245 | width: auto; | 270 | width: auto; |
246 | } | 271 | } |
247 | 272 | ||
248 | /* line 211, ../scss/Layer.scss */ | 273 | /* line 235, ../scss/Layer.scss */ |
249 | .collapsible-transition { | 274 | .collapsible-transition { |
250 | -webkit-transition-property: height; | 275 | -webkit-transition-property: height; |
251 | -webkit-transition-duration: 200ms; | 276 | -webkit-transition-duration: 200ms; |
252 | -webkit-transition-timing-function: ease-in; | 277 | -webkit-transition-timing-function: ease-in; |
253 | } | 278 | } |
254 | 279 | ||
255 | /* line 219, ../scss/Layer.scss */ | 280 | /* line 243, ../scss/Layer.scss */ |
256 | .editable2 { | 281 | .editable2 { |
257 | height: 20px; | 282 | height: 20px; |
258 | background-color: #242424 !important; | 283 | background-color: #242424 !important; |
@@ -264,29 +289,29 @@ | |||
264 | text-overflow: clip; | 289 | text-overflow: clip; |
265 | } | 290 | } |
266 | 291 | ||
267 | /* line 229, ../scss/Layer.scss */ | 292 | /* line 253, ../scss/Layer.scss */ |
268 | .editable2 br { | 293 | .editable2 br { |
269 | display: inline; | 294 | display: inline; |
270 | } | 295 | } |
271 | 296 | ||
272 | /* line 233, ../scss/Layer.scss */ | 297 | /* line 257, ../scss/Layer.scss */ |
273 | .label-style .disabled { | 298 | .label-style .disabled { |
274 | cursor: default; | 299 | cursor: default; |
275 | } | 300 | } |
276 | 301 | ||
277 | /* styles elements */ | 302 | /* styles elements */ |
278 | /* line 238, ../scss/Layer.scss */ | 303 | /* line 262, ../scss/Layer.scss */ |
279 | .content-style .item-template { | 304 | .content-style .item-template { |
280 | display: none; | 305 | display: none; |
281 | } | 306 | } |
282 | 307 | ||
283 | /* line 241, ../scss/Layer.scss */ | 308 | /* line 265, ../scss/Layer.scss */ |
284 | .content-style .layout-row.selected .layout-cell { | 309 | .content-style .layout-row.selected .layout-cell { |
285 | background-color: #b2b2b2; | 310 | background-color: #b2b2b2; |
286 | color: #242424; | 311 | color: #242424; |
287 | } | 312 | } |
288 | 313 | ||
289 | /* line 245, ../scss/Layer.scss */ | 314 | /* line 269, ../scss/Layer.scss */ |
290 | .style-row { | 315 | .style-row { |
291 | height: 20px; |