Timeline: Better style selection and deselection. Automatic re-selection of

previously selected style when parent layer is reselected.

6 files changed, 84 insertions, 27 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 9576d66f..4da1bfba 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -83,13 +83,14 @@ var Layer = exports.Layer = Montage.create(Component, {
                         return;
                 }
                 if (newVal !== this._selectedStyleIndex) {
-                        console.log("Layer.selectedStyleIndex.set ", newVal);
                         this._selectedStyleIndex = newVal;
                         this.layerData.selectedStyleIndex = newVal;
-                        this.needsDraw = true;
                 }
         }
     },
+    _storedStyleIndex : {
+        value: false
+    },
 
     /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
@@ -277,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, {
                         if (value === false) {
                                 // If changing from true to false, we need to deselect any associated styles
                                 this.selectStyle(false);
+                        } else {
+                            if (this._storedStyleIndex !== false) {
+                                this.selectStyle(this._storedStyleIndex);
+                            }
                         }
                         this._isSelected = value;
                         this.layerData.isSelected = value;
@@ -541,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             }
             // Enable or disable the delete style button as appropriate
             if (this.isSelected) {
-                if (this.selectedStyleIndex !== "false") {
+                if (this.selectedStyleIndex !== false) {
                         this.selectStyle(this.selectedStyleIndex);
                         this.buttonDeleteStyle.classList.remove("disabled");
                 }
@@ -630,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         newStyle.ruleTweener = false;
                         newStyle.isSelected = false;
             this.arrLayerStyles.push(newStyle);
+            this.selectStyle(this.arrLayerStyles.length -1);
 
                         // Set up the event info and dispatch the event
             this.styleCounter += 1;
@@ -666,26 +672,37 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         selectStyle : {
                 value: function(styleIndex) {
-                        console.log("Layer.selectStyle ", styleIndex);
-
                 // Select a style based on its index.
                 // use layerIndex = false to deselect all styles.
                 var i = 0,
                         arrLayerStylesLength = this.arrLayerStyles.length;
                         
-
-                // First, update this.arrStyles[].isSelected
-                for (i = 0; i < arrLayerStylesLength; i++) {
-                        if (i === styleIndex) {
-                                this.arrLayerStyles[i].isSelected = true;
-                        } else {
-                                if (this.arrLayerStyles[i].isSelected === true) {
-                                        this.arrLayerStyles[i].isSelected = false;
-                                }
-                        }
-                }
-                
-
+            if (styleIndex === false) {
+                if (arrLayerStylesLength === 0) {
+                    // No styles selected, so do nothing.
+                    return;
+                }
+                for (i = 0; i < arrLayerStylesLength; i++) {
+                    if (this.arrLayerStyles[i].isSelected === true) {
+                        this.arrLayerStyles[i].isSelected = false;
+                    }
+                }
+            } else {
+                for (i = 0; i < arrLayerStylesLength; i++) {
+                    if (i === styleIndex) {
+                        this.arrLayerStyles[i].isSelected = true;
+                    } else {
+                        if (this.arrLayerStyles[i].isSelected === true) {
+                            this.arrLayerStyles[i].isSelected = false;
+                        }
+                    }
+                }
+                this.selectedStyleIndex = styleIndex;
+                this._storedStyleIndex = styleIndex;
+            }
+            
+            
+            
                 /*
                 // Next, update this.styleRepetition.selectedIndexes.
                 if (styleIndex !== false) {
@@ -744,6 +761,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleDeleteStyleClick: {
                 value: function(event) {
+                    if (event.target.classList.contains("disabled")) {
+                        return;
+                    }
                         this.deleteStyle();
                 }
         },
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
index 8f8881dd..5220d0f1 100644
--- a/js/panels/Timeline/Layer.reel/scss/Layer.scss
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -274,10 +274,10 @@
 .content-style .item-template {
         display: none;
 }
+.style-row {
+        height: 20px;
+}
 .content-style .layout-row.selected .layout-cell {
         background-color: $color-panel-hilite-bg;
         color: $color-panel-hilite-text;
 }
-.style-row {
-        height: 20px;
-}
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 185c9bb0..5c1c9eeb 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         return this._isSelected;
                 },
                 set: function(newVal) {
-                        //console.log("Style["+this.styleID+"].isSelected.set ", newVal)
+
                         if (newVal !== this._isSelected) {
                                 this._isSelected = newVal;
                                 this.needsDraw = true;
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index 0cc8a1f8..bb65b0c7 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -84,3 +84,15 @@ div.content-style input.nj-skinned {
 div.style-row .container-propvals {
   overflow: hidden;
 }
+
+/* line 80, ../scss/Style.scss */
+.content-style .style-row.selected {
+  background-color: #474747;
+  color: white;
+}
+
+/* line 84, ../scss/Style.scss */
+.content-style .style-row.style-selected {
+  background-color: #b2b2b2;
+  color: #242424;
+}
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 3ea943d8..c5287b00 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -77,7 +77,11 @@ div.style-row .container-propvals {
         overflow: hidden;
 }
 
+.content-style .style-row.selected {
+  background-color: $color-panel-bg;
+  color: $color-panel-text;
+}
 .content-style .style-row.style-selected {
-        //background-color: red !important;
+  background-color: $color-panel-hilite-bg;
+  color: $color-panel-hilite-text;
 }
-
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9f9a747a..bb5ca036 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -919,7 +919,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             for (i = 0; i < arrLayersLength; i++) {
                 if (this.arrLayers[i].layerData.isSelected === true) {
                         if (arrSelectedIndexes.indexOf(i) < 0) {
-                                console.log("TimelinePanel.selectLayers, deselecting ", i);
+
                                                 this.arrLayers[i].layerData.isSelected = false;
                                 this.triggerLayerBinding(i);
                         }
@@ -992,7 +992,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: function() {