aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js107
-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.js26
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js4
7 files changed, 111 insertions, 54 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index db4ad712..4da1bfba 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -85,10 +85,12 @@ var Layer = exports.Layer = Montage.create(Component, {
85 if (newVal !== this._selectedStyleIndex) { 85 if (newVal !== this._selectedStyleIndex) {
86 this._selectedStyleIndex = newVal; 86 this._selectedStyleIndex = newVal;
87 this.layerData.selectedStyleIndex = newVal; 87 this.layerData.selectedStyleIndex = newVal;
88 this.needsDraw = true;
89 } 88 }
90 } 89 }
91 }, 90 },
91 _storedStyleIndex : {
92 value: false
93 },
92 94
93 /* 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 */
94 _layerName:{ 96 _layerName:{
@@ -276,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, {
276 if (value === false) { 278 if (value === false) {
277 // 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
278 this.selectStyle(false); 280 this.selectStyle(false);
281 } else {
282 if (this._storedStyleIndex !== false) {
283 this.selectStyle(this._storedStyleIndex);
284 }
279 } 285 }
280 this._isSelected = value; 286 this._isSelected = value;
281 this.layerData.isSelected = value; 287 this.layerData.isSelected = value;
@@ -540,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, {
540 } 546 }
541 // Enable or disable the delete style button as appropriate 547 // Enable or disable the delete style button as appropriate
542 if (this.isSelected) { 548 if (this.isSelected) {
543 if (this.selectedStyleIndex !== "false") { 549 if (this.selectedStyleIndex !== false) {
544 this.selectStyle(this.selectedStyleIndex); 550 this.selectStyle(this.selectedStyleIndex);
545 this.buttonDeleteStyle.classList.remove("disabled"); 551 this.buttonDeleteStyle.classList.remove("disabled");
546 } 552 }
@@ -629,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, {
629 newStyle.ruleTweener = false; 635 newStyle.ruleTweener = false;
630 newStyle.isSelected = false; 636 newStyle.isSelected = false;
631 this.arrLayerStyles.push(newStyle); 637 this.arrLayerStyles.push(newStyle);
638 this.selectStyle(this.arrLayerStyles.length -1);
632 639
633 // Set up the event info and dispatch the event 640 // Set up the event info and dispatch the event
634 this.styleCounter += 1; 641 this.styleCounter += 1;
@@ -638,56 +645,64 @@ var Layer = exports.Layer = Montage.create(Component, {
638 }, 645 },
639 deleteStyle : { 646 deleteStyle : {
640 value: function() { 647 value: function() {
641 var newEvent = document.createEvent("CustomEvent"), 648
642 selectedIndex = 0; 649 // Only delete a style if we have one or more styles, and one of them is selected
643 if (this.arrLayerStyles.length > 0) { 650 if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) {
644 if (!!this.styleRepetition.selectedIndexes) { 651 var newEvent = document.createEvent("CustomEvent");
645
646 selectedIndex = this.styleRepetition.selectedIndexes[0];
647 652
648 // Set up the event info and dispatch the event 653 // Set up the event info and dispatch the event
649 newEvent.initCustomEvent("layerEvent", false, true); 654 newEvent.initCustomEvent("layerEvent", false, true);
650 newEvent.layerEventLocale = "styles"; 655 newEvent.layerEventLocale = "styles";
651 newEvent.layerEventType = "deleteStyle"; 656 newEvent.layerEventType = "deleteStyle";
652 newEvent.layerID = this.layerID; 657 newEvent.layerID = this.layerID;
653 newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; 658 newEvent.styleID = this.selectedStyleIndex;
654 newEvent.styleSelection = selectedIndex; 659 newEvent.selectedStyleIndex = this.selectedStyleIndex;
655 defaultEventManager.dispatchEvent(newEvent); 660 defaultEventManager.dispatchEvent(newEvent);
656 661
657 // Delete the style from the view 662 // Delete the style from the view
658 this.arrLayerStyles.splice(selectedIndex, 1); 663 this.arrLayerStyles.splice(this.selectedStyleIndex, 1);
659 664
660 // Was that the last style? 665 // Set selection to none
661 if (this.arrLayerStyles.length === 0) { 666 this.selectedStyleIndex = false;
662 this.buttonDeleteStyle.classList.add("disabled"); 667
663 } 668 // Disable the delete style button, because now nothing is selected
664 669 this.buttonDeleteStyle.classList.add("disabled");
665 } 670 }
666 }
667 } 671 }
668 }, 672 },
669 selectStyle : { 673 selectStyle : {
670 value: function(styleIndex) { 674 value: function(styleIndex) {
671 //console.log("Layer.selectStyle ", styleIndex);
672
673 // Select a style based on its index. 675 // Select a style based on its index.
674 // use layerIndex = false to deselect all styles. 676 // use layerIndex = false to deselect all styles.
675 var i = 0, 677 var i = 0,
676 arrLayerStylesLength = this.arrLayerStyles.length; 678 arrLayerStylesLength = this.arrLayerStyles.length;
677 679
678 680 if (styleIndex === false) {
679 // First, update this.arrStyles[].isSelected 681 if (arrLayerStylesLength === 0) {
680 for (i = 0; i < arrLayerStylesLength; i++) { 682 // No styles selected, so do nothing.
681 if (i === styleIndex) { 683 return;
682 this.arrLayerStyles[i].isSelected = true; 684 }
683 } else { 685 for (i = 0; i < arrLayerStylesLength; i++) {
684 if (this.arrLayerStyles[i].isSelected === true) { 686 if (this.arrLayerStyles[i].isSelected === true) {
685 this.arrLayerStyles[i].isSelected = false; 687 this.arrLayerStyles[i].isSelected = false;
686 } 688 }
687 } 689 }
688 } 690 } else {
689 691 for (i = 0; i < arrLayerStylesLength; i++) {
690 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
691 /* 706 /*
692 // Next, update this.styleRepetition.selectedIndexes. 707 // Next, update this.styleRepetition.selectedIndexes.
693 if (styleIndex !== false) { 708 if (styleIndex !== false) {
@@ -746,6 +761,9 @@ var Layer = exports.Layer = Montage.create(Component, {
746 }, 761 },
747 handleDeleteStyleClick: { 762 handleDeleteStyleClick: {
748 value: function(event) { 763 value: function(event) {
764 if (event.target.classList.contains("disabled")) {
765 return;
766 }
749 this.deleteStyle(); 767 this.deleteStyle();
750 } 768 }
751 }, 769 },
@@ -771,7 +789,9 @@ var Layer = exports.Layer = Montage.create(Component, {
771 }, 789 },
772 handleMousedown: { 790 handleMousedown: {
773 value: function(event) { 791 value: function(event) {
774 //console.log("Layer.handleMousedown") 792 if (event.target.classList.contains("button-delete")) {
793 return;
794 }
775 this.layerData.isActive = true; 795 this.layerData.isActive = true;
776 var ptrParent = nj.queryParentSelector(event.target, ".content-style"), 796 var ptrParent = nj.queryParentSelector(event.target, ".content-style"),
777 activeStyleIndex = this.getActiveStyleIndex(); 797 activeStyleIndex = this.getActiveStyleIndex();
@@ -783,7 +803,6 @@ var Layer = exports.Layer = Montage.create(Component, {
783 }, 803 },
784 handleLayerClick : { 804 handleLayerClick : {
785 value: function(event) { 805 value: function(event) {
786 //console.log("Layer.handleLayerClick")
787 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 806 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
788 if (ptrParent !== false) { 807 if (ptrParent !== false) {
789 var myIndex = this.getActiveStyleIndex(); 808 var myIndex = this.getActiveStyleIndex();
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 d712f2bd..5c1c9eeb 100644
--- a/js/panels/Timeline/