aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js56
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss6
-rw-r--r--js/panels/Timeline/Style.reel/Style.js2
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css12
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss8
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js27
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 {
84div.style-row .container-propvals { 84div.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 arrLayersLength = this.arrLayers.length;