diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 107 | ||||
-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 | 26 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 |
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; |