From 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 1 Jun 2012 14:26:30 -0700 Subject: Timeline: Better style selection and deselection. Automatic re-selection of previously selected style when parent layer is reselected. --- js/panels/Timeline/Layer.reel/Layer.js | 56 +++++++++++++++------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 6 +-- js/panels/Timeline/Style.reel/Style.js | 2 +- js/panels/Timeline/Style.reel/css/Style.css | 12 +++++ js/panels/Timeline/Style.reel/scss/Style.scss | 8 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 27 +++++++++-- 6 files changed, 84 insertions(+), 27 deletions(-) (limited to 'js/panels/Timeline') 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() { var arrSelectedElements = [], i = 0, - arrLayersLength = this.arrLayers.length; + j = 0, + arrLayersLength = this.arrLayers.length, + boolDoIt = false, + arrSelectedElementsLength = 0, + arrStageIndexes = this.getSelectedLayerIndexesFromStage(), + arrStageIndexesLength = arrStageIndexes.length; // Get the selected layers for (i = 0; i < arrLayersLength; i++) { @@ -1000,9 +1005,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrSelectedElements.push(this.arrLayers[i].layerData.stageElement); } } + arrSelectedElementsLength = arrSelectedElements.length; + + // check to see if we even need to continue... + if (arrSelectedElementsLength !== arrStageIndexesLength) { + boolDoIt = true; + } else { + for (i = 0; i < arrStageIndexesLength; i++) { + if (this.currentLayersSelected.indexOf(arrStageIndexes[i]) < 0) { + boolDoIt = true; + } + } + } + + if (boolDoIt === false) { + return; + } // Select the layers, or clear the selection if none were found - if (arrSelectedElements.length > 0) { + if (arrSelectedElementsLength > 0) { this.application.ninja.selectionController.selectElements(arrSelectedElements); } else { this.application.ninja.selectionController.executeSelectElement(); -- cgit v1.2.3