diff options
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 56 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 2 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 12 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 8 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 27 |
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, { | |||
83 | return; | 83 | return; |
84 | } | 84 | } |
85 | if (newVal !== this._selectedStyleIndex) { | 85 | if (newVal !== this._selectedStyleIndex) { |
86 | console.log("Layer.selectedStyleIndex.set ", newVal); | ||
87 | this._selectedStyleIndex = newVal; | 86 | this._selectedStyleIndex = newVal; |
88 | this.layerData.selectedStyleIndex = newVal; | 87 | this.layerData.selectedStyleIndex = newVal; |
89 | this.needsDraw = true; | ||
90 | } | 88 | } |
91 | } | 89 | } |
92 | }, | 90 | }, |
91 | _storedStyleIndex : { | ||
92 | value: false | ||
93 | }, | ||
93 | 94 | ||
94 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ | 95 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ |
95 | _layerName:{ | 96 | _layerName:{ |
@@ -277,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
277 | if (value === false) { | 278 | if (value === false) { |
278 | // If changing from true to false, we need to deselect any associated styles | 279 | // If changing from true to false, we need to deselect any associated styles |
279 | this.selectStyle(false); | 280 | this.selectStyle(false); |
281 | } else { | ||
282 | if (this._storedStyleIndex !== false) { | ||
283 | this.selectStyle(this._storedStyleIndex); | ||
284 | } | ||
280 | } | 285 | } |
281 | this._isSelected = value; | 286 | this._isSelected = value; |
282 | this.layerData.isSelected = value; | 287 | this.layerData.isSelected = value; |
@@ -541,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
541 | } | 546 | } |
542 | // Enable or disable the delete style button as appropriate | 547 | // Enable or disable the delete style button as appropriate |
543 | if (this.isSelected) { | 548 | if (this.isSelected) { |
544 | if (this.selectedStyleIndex !== "false") { | 549 | if (this.selectedStyleIndex !== false) { |
545 | this.selectStyle(this.selectedStyleIndex); | 550 | this.selectStyle(this.selectedStyleIndex); |
546 | this.buttonDeleteStyle.classList.remove("disabled"); | 551 | this.buttonDeleteStyle.classList.remove("disabled"); |
547 | } | 552 | } |
@@ -630,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
630 | newStyle.ruleTweener = false; | 635 | newStyle.ruleTweener = false; |
631 | newStyle.isSelected = false; | 636 | newStyle.isSelected = false; |
632 | this.arrLayerStyles.push(newStyle); | 637 | this.arrLayerStyles.push(newStyle); |
638 | this.selectStyle(this.arrLayerStyles.length -1); | ||
633 | 639 | ||
634 | // Set up the event info and dispatch the event | 640 | // Set up the event info and dispatch the event |
635 | this.styleCounter += 1; | 641 | this.styleCounter += 1; |
@@ -666,26 +672,37 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
666 | }, | 672 | }, |
667 | selectStyle : { | 673 | selectStyle : { |
668 | value: function(styleIndex) { | 674 | value: function(styleIndex) { |
669 | console.log("Layer.selectStyle ", styleIndex); | ||
670 | |||
671 | // Select a style based on its index. | 675 | // Select a style based on its index. |
672 | // use layerIndex = false to deselect all styles. | 676 | // use layerIndex = false to deselect all styles. |
673 | var i = 0, | 677 | var i = 0, |
674 | arrLayerStylesLength = this.arrLayerStyles.length; | 678 | arrLayerStylesLength = this.arrLayerStyles.length; |
675 | 679 | ||
676 | 680 | if (styleIndex === false) { | |
677 | // First, update this.arrStyles[].isSelected | 681 | if (arrLayerStylesLength === 0) { |
678 | for (i = 0; i < arrLayerStylesLength; i++) { | 682 | // No styles selected, so do nothing. |
679 | if (i === styleIndex) { | 683 | return; |
680 | this.arrLayerStyles[i].isSelected = true; | 684 | } |
681 | } else { | 685 | for (i = 0; i < arrLayerStylesLength; i++) { |
682 | if (this.arrLayerStyles[i].isSelected === true) { | 686 | if (this.arrLayerStyles[i].isSelected === true) { |
683 | this.arrLayerStyles[i].isSelected = false; | 687 | this.arrLayerStyles[i].isSelected = false; |
684 | } | 688 | } |
685 | } | 689 | } |
686 | } | 690 | } else { |
687 | 691 | for (i = 0; i < arrLayerStylesLength; i++) { | |
688 | 692 | if (i === styleIndex) { | |
693 | this.arrLayerStyles[i].isSelected = true; | ||
694 | } else { | ||
695 | if (this.arrLayerStyles[i].isSelected === true) { | ||
696 | this.arrLayerStyles[i].isSelected = false; | ||
697 | } | ||
698 | } | ||
699 | } | ||
700 | this.selectedStyleIndex = styleIndex; | ||
701 | this._storedStyleIndex = styleIndex; | ||
702 | } | ||
703 | |||
704 | |||
705 | |||
689 | /* | 706 | /* |
690 | // Next, update this.styleRepetition.selectedIndexes. | 707 | // Next, update this.styleRepetition.selectedIndexes. |
691 | if (styleIndex !== false) { | 708 | if (styleIndex !== false) { |
@@ -744,6 +761,9 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
744 | }, | 761 | }, |
745 | handleDeleteStyleClick: { | 762 | handleDeleteStyleClick: { |
746 | value: function(event) { | 763 | value: function(event) { |
764 | if (event.target.classList.contains("disabled")) { | ||
765 | return; | ||
766 | } | ||
747 | this.deleteStyle(); | 767 | this.deleteStyle(); |
748 | } | 768 | } |
749 | }, | 769 | }, |
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 @@ | |||
274 | .content-style .item-template { | 274 | .content-style .item-template { |
275 | display: none; | 275 | display: none; |
276 | } | 276 | } |
277 | .style-row { | ||
278 | height: 20px; | ||
279 | } | ||
277 | .content-style .layout-row.selected .layout-cell { | 280 | .content-style .layout-row.selected .layout-cell { |
278 | background-color: $color-panel-hilite-bg; | 281 | background-color: $color-panel-hilite-bg; |
279 | color: $color-panel-hilite-text; | 282 | color: $color-panel-hilite-text; |
280 | } | 283 | } |
281 | .style-row { | ||
282 | height: 20px; | ||
283 | } | ||
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, { | |||
35 | return this._isSelected; | 35 | return this._isSelected; |
36 | }, | 36 | }, |
37 | set: function(newVal) { | 37 | set: function(newVal) { |
38 | //console.log("Style["+this.styleID+"].isSelected.set ", newVal) | 38 | |
39 | if (newVal !== this._isSelected) { | 39 | if (newVal !== this._isSelected) { |
40 | this._isSelected = newVal; | 40 | this._isSelected = newVal; |
41 | this.needsDraw = true; | 41 | 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 { | |||
84 | div.style-row .container-propvals { | 84 | div.style-row .container-propvals { |
85 | overflow: hidden; | 85 | overflow: hidden; |
86 | } | 86 | } |
87 | |||
88 | /* line 80, ../scss/Style.scss */ | ||
89 | .content-style .style-row.selected { | ||
90 | background-color: #474747; | ||
91 | color: white; | ||
92 | } | ||
93 | |||
94 | /* line 84, ../scss/Style.scss */ | ||
95 | .content-style .style-row.style-selected { | ||
96 | background-color: #b2b2b2; | ||
97 | color: #242424; | ||
98 | } | ||
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 { | |||
77 | overflow: hidden; | 77 | overflow: hidden; |
78 | } | 78 | } |
79 | 79 | ||
80 | .content-style .style-row.selected { | ||
81 | background-color: $color-panel-bg; | ||
82 | color: $color-panel-text; | ||
83 | } | ||
80 | .content-style .style-row.style-selected { | 84 | .content-style .style-row.style-selected { |
81 | //background-color: red !important; | 85 | background-color: $color-panel-hilite-bg; |
86 | color: $color-panel-hilite-text; | ||
82 | } | 87 | } |
83 | |||
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, { | |||
919 | for (i = 0; i < arrLayersLength; i++) { | 919 | for (i = 0; i < arrLayersLength; i++) { |
920 | if (this.arrLayers[i].layerData.isSelected === true) { | 920 | if (this.arrLayers[i].layerData.isSelected === true) { |
921 | if (arrSelectedIndexes.indexOf(i) < 0) { | 921 | if (arrSelectedIndexes.indexOf(i) < 0) { |
922 | console.log("TimelinePanel.selectLayers, deselecting ", i); | 922 | |
923 | this.arrLayers[i].layerData.isSelected = false; | 923 | this.arrLayers[i].layerData.isSelected = false; |
924 | this.triggerLayerBinding(i); | 924 | this.triggerLayerBinding(i); |
925 | } | 925 | } |
@@ -992,7 +992,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
992 | value: function() { | 992 | value: function() { |
993 | var arrSelectedElements = [], | 993 | var arrSelectedElements = [], |
994 | i = 0, | 994 | i = 0, |
995 | a |