aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
authorAnanya Sen2012-02-23 17:57:06 -0800
committerAnanya Sen2012-02-23 17:57:06 -0800
commita23455a887982d306d794b6afca497259cfa7f4a (patch)
tree7396eb7b5e0759035f666a7eee9d325979887d4a /js/panels/Timeline/Layer.reel
parent6e66f411ba02eaaeb33471115345ecf3c7ce4ce9 (diff)
parent97d6314f96f309332a655d49b95ec651c378bcf2 (diff)
downloadninja-a23455a887982d306d794b6afca497259cfa7f4a.tar.gz
Merge branch 'refs/heads/FileIO-jose' into FileIO
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html2
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js27
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css117
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss17
4 files changed, 60 insertions, 103 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index dd819b2b..e262afe2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -153,7 +153,7 @@
153 <div class="label-style"> 153 <div class="label-style">
154 <span class="collapsible-label">Style</span> 154 <span class="collapsible-label">Style</span>
155 <span class="clicker-style collapsible-clicker"></span> 155 <span class="clicker-style collapsible-clicker"></span>
156 <div class="cssbutton button-delete"></div> 156 <div class="cssbutton button-delete disabled"></div>
157 <div class="cssbutton button-add"></div> 157 <div class="cssbutton button-add"></div>
158 </div> 158 </div>
159 <div class="content-style collapsible-content"> 159 <div class="content-style collapsible-content">
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 71a1f01f..2e9a8f1a 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -80,7 +80,6 @@ var Layer = exports.Layer = Montage.create(Component, {
80 this._layerName = newVal; 80 this._layerName = newVal;
81 this._layerEditable.needsDraw = true; 81 this._layerEditable.needsDraw = true;
82 this.needsDraw = true; 82 this.needsDraw = true;
83
84 } 83 }
85 84
86 } 85 }
@@ -323,6 +322,7 @@ var Layer = exports.Layer = Montage.create(Component, {
323 this.styleCollapser.myContent = this.contentStyle; 322 this.styleCollapser.myContent = this.contentStyle;
324 this.styleCollapser.element = this.element; 323 this.styleCollapser.element = this.element;
325 this.styleCollapser.isCollapsed = this.isStyleCollapsed; 324 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
325 this.styleCollapser.contentHeight = 20;
326 this.styleCollapser.isAnimated = true; 326 this.styleCollapser.isAnimated = true;
327 this.styleCollapser.labelClickEvent = function(boolBypass) { 327 this.styleCollapser.labelClickEvent = function(boolBypass) {
328 var newEvent = document.createEvent("CustomEvent"); 328 var newEvent = document.createEvent("CustomEvent");
@@ -483,8 +483,11 @@ var Layer = exports.Layer = Montage.create(Component, {
483 // Delete the style from the view 483 // Delete the style from the view
484 this.arrLayerStyles.splice(selectedIndex, 1); 484 this.arrLayerStyles.splice(selectedIndex, 1);
485 485
486 } else { 486 // Was that the last style?
487 alert('TODO: what should happen when no rule is selected and the user clicks the delete button?') 487 if (this.arrLayerStyles.length === 0) {
488 this.buttonDeleteStyle.classList.add("disabled");
489 }
490
488 } 491 }
489 } 492 }
490 } 493 }
@@ -509,8 +512,12 @@ var Layer = exports.Layer = Montage.create(Component, {
509 // Next, update this.styleRepetition.selectedIndexes. 512 // Next, update this.styleRepetition.selectedIndexes.
510 if (styleIndex !== false) { 513 if (styleIndex !== false) {
511 this.styleRepetition.selectedIndexes = [styleIndex]; 514 this.styleRepetition.selectedIndexes = [styleIndex];
515 this.buttonDeleteStyle.classList.remove("disabled");
512 } else { 516 } else {
513 this.styleRepetition.selectedIndexes = null; 517 this.styleRepetition.selectedIndexes = null;
518 if (typeof(this.buttonDeleteStyle) !== "undefined") {
519 this.buttonDeleteStyle.classList.add("disabled");
520 }
514 } 521 }
515 522
516 } 523 }
@@ -537,14 +544,11 @@ var Layer = exports.Layer = Montage.create(Component, {
537 /* Begin: Event handlers */ 544 /* Begin: Event handlers */
538 handleAddStyleClick: { 545 handleAddStyleClick: {
539 value: function(event) { 546 value: function(event) {
540 // Stop the event propagation
541 //event.stopPropagation();
542 this.addStyle(); 547 this.addStyle();
543 } 548 }
544 }, 549 },
545 handleDeleteStyleClick: { 550 handleDeleteStyleClick: {
546 value: function(event) { 551 value: function(event) {
547 //event.stopPropagation();
548 this.deleteStyle(); 552 this.deleteStyle();
549 } 553 }
550 }, 554 },
@@ -566,25 +570,16 @@ var Layer = exports.Layer = Montage.create(Component, {
566 handleMousedown: { 570 handleMousedown: {
567 value: function(event) { 571 value: function(event) {
568 this.isActive = true; 572 this.isActive = true;
569 // Check ALL THE CLICKS
570 // Are they in a particular style? If so, we need to select that style and
571 // deselect the others.
572 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 573 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
573 if (ptrParent !== false) { 574 if (ptrParent !== false) {
574 // Why yes, the click was within a layer. But which one? 575 this.selectStyle(this.getActiveStyleIndex());
575 var myIndex = this.getActiveStyleIndex();
576 this.selectStyle(myIndex);
577 } 576 }
578 } 577 }
579 }, 578 },
580 handleLayerClick : { 579 handleLayerClick : {
581 value: function(event) { 580 value: function(event) {
582 // Check ALL THE CLICKS
583 // Are they in a particular style? If so, we need to select that style and
584 // deselect the others.
585 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 581 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
586 if (ptrParent !== false) { 582 if (ptrParent !== false) {
587 // Why yes, the click was within a layer. But which one?
588 var myIndex = this.getActiveStyleIndex(); 583 var myIndex = this.getActiveStyleIndex();
589 this.selectStyle(myIndex); 584 this.selectStyle(myIndex);
590 } 585 }
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 39869c92..3547a15e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -2,63 +2,6 @@
2/* Layer.scss 2/* Layer.scss
3 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. 3 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
4 */ 4 */
5/* <copyright>
6 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
7 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
8 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
9 </copyright> */
10/*
11 * _colors.scss
12 * Defines the colors for the UI of the application.
13 * To create a new theme, copy this file and change the values as desired.
14 * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values.
15 */
16/* Colors for radio buttons and other form elements */
17/* Base colors for dividers
18 *
19 * Dividers consist of a div with a background color and either
20 * a top & bottom border (in the case of horizontal dividers)
21 * or a left & right border (in the case of vertical dividers),
22 * for a total of three different colors.
23 *
24 */
25/* top and left */
26/* Middle */
27/* Bottom and right */
28/* Main background color of entire app */
29/* Main app background color. */
30/* rgba version */
31/* Main app border color */
32/* color of drop shadows */
33/* Stage color */
34/* body border color */
35/* Body background color */
36/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
37/* Colors for tools: background, text, how they interact with the UI */
38/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
39/* used for editable items in their non-edit state, etc. */
40/* Border for panel and for block elements */
41/* Shadow for text and block elements */
42/* Colors for scroll bars */
43/* <copyright>
44 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
45 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
46 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
47 </copyright> */
48/*
49 * themes/themename/mixins.scss
50 * Mixins that are theme-dependent (e.g. sprite mixins, etc)
51 */
52/* <copyright>
53 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
54 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
55 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
56 </copyright> */
57/*
58 * mixins.scss
59 * Generic mixins. Theme-specific mixins (e.g. for sprites)
60 * should go in the theme/themename/mixins.scss file.
61 */
62/* line 16, ../scss/Layer.scss */ 5/* line 16, ../scss/Layer.scss */
63.layerLabel { 6.layerLabel {
64 width: 100%; 7 width: 100%;
@@ -174,23 +117,24 @@
174 border-width: 0px; 117 border-width: 0px;
175} 118}
176 119
177/* line 112, ../scss/Layer.scss */ 120/* line 113, ../scss/Layer.scss */
178.label-layer, 121.label-layer,
179.label-position, 122.label-position,
180.label-transform, 123.label-transform,
181.label-style { 124.label-style,
125.label-styles {
182 position: relative; 126 position: relative;
183 border-bottom: 1px solid #505050;<