From a8dff9f5cb9dec84e6805118d49903710b361275 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 23 May 2012 15:44:41 -0700 Subject: Timeline: Easing selection per keyframe. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 1 + js/panels/Timeline/Span.reel/Span.html | 11 ++--- js/panels/Timeline/Span.reel/Span.js | 49 ++++++++++++++++++++++ js/panels/Timeline/Span.reel/css/Span.css | 27 +++++++++--- js/panels/Timeline/Span.reel/scss/Span.scss | 16 ++++++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 + .../Timeline/TimelineTrack.reel/TimelineTrack.js | 3 +- 7 files changed, 96 insertions(+), 12 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 52302319..41eb6ef1 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -91,6 +91,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } } this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; + this.selectKeyframe(); } }, handleDragend: { diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index d6c359ad..a1f3afeb 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -29,13 +29,14 @@
- ease-in-out + ease-out
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index e5894500..1ab3455c 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -57,6 +57,22 @@ var Span = exports.Span = Montage.create(Component, { } } }, + + _easing: { + value: "ease-in" + }, + easing: { + get: function() { + return this._easing; + }, + set: function(newVal) { + if (newVal !== this._easing) { + this._easing = newVal; + this.parentComponent.setKeyframeEase(newVal); + this.needsDraw = true; + } + } + }, // BEGIN: draw cycle prepareForDraw: { @@ -67,7 +83,27 @@ var Span = exports.Span = Montage.create(Component, { draw:{ value: function(){ + this.element.style.width = this.spanWidth + "px"; + + if ((this.spanWidth <= 70) && (this.spanWidth >0)) { + var containerWidth = this.spanWidth -18, + choiceWidth; + if (containerWidth < 0) { + containerWidth = 0; + } + choiceWidth = containerWidth -3; + if (choiceWidth < 0) { + choiceWidth = 0; + } + this.container_easing.style.width = containerWidth + "px"; + this.easing_choice.style.width = choiceWidth + "px"; + this.easing_choice.style.overflow = "hidden"; + } + if (this.spanWidth > 70) { + this.container_easing.setAttribute("style", ""); + this.easing_choice.setAttribute("style", ""); + } // Highlight the span? if (this.isHighlighted === true) { @@ -82,6 +118,12 @@ var Span = exports.Span = Montage.create(Component, { } else { this.easing_choices.style.display = "none"; } + + // Change easing? + if (this.easing_choice.innerText !== this.easing) { + this.easing_choice.innerText = this.easing; + } + } }, @@ -90,6 +132,7 @@ var Span = exports.Span = Montage.create(Component, { value: function() { this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); + } }, @@ -108,6 +151,12 @@ var Span = exports.Span = Montage.create(Component, { }, handleEasingChoicesClick: { value: function(event) { + + this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); + event.target.classList.add("easing-selected"); + this.easing = event.target.dataset.ninjaEase; + + // Which element was just this.areChoicesVisible = false; } } diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 16f931b2..e5cb4263 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -34,7 +34,7 @@ .container-easing { position: absolute; top: 2px; - right: 6px; + right: 8px; font-size: 10px; line-height: 8px; border: 1px solid black; @@ -47,15 +47,16 @@ .container-easing .easing-choice, .container-easing .easing-choices { width: 70px; + white-space: nowrap; } -/* line 58, ../scss/Span.scss */ +/* line 59, ../scss/Span.scss */ .container-easing, .container-easing .easing-choice { height: 10px; } -/* line 61, ../scss/Span.scss */ +/* line 62, ../scss/Span.scss */ .container-easing .easing-choice { position: absolute; top: 0px; @@ -64,7 +65,7 @@ cursor: pointer; } -/* line 68, ../scss/Span.scss */ +/* line 69, ../scss/Span.scss */ .container-easing .easing-choices { position: absolute; display: none; @@ -81,9 +82,25 @@ padding: 0px; } -/* line 83, ../scss/Span.scss */ +/* line 84, ../scss/Span.scss */ .container-easing .easing-choices li { list-style-type: none; margin: 0px; padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +/* line 95, ../scss/Span.scss */ +.container-easing .easing-choices li:hover, +.container-easing .easing-choices li.easing-selected { + color: #242424; + background-color: #b2b2b2; +} + +/* line 99, ../scss/Span.scss */ +.container-easing .easing-choices li.easing-selected { + cursor: default; } diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss index a39cf465..b3aff4d2 100644 --- a/js/panels/Timeline/Span.reel/scss/Span.scss +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -42,7 +42,7 @@ .container-easing { position: absolute; top: 2px; - right: 6px; + right: 8px; font-size: 10px; line-height: 8px; border: 1px solid $color-menu-border; @@ -53,6 +53,7 @@ .container-easing .easing-choice, .container-easing .easing-choices { width: 70px; + white-space: nowrap; } .container-easing, .container-easing .easing-choice { @@ -84,4 +85,17 @@ list-style-type: none; margin: 0px; padding: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 3px; + cursor: pointer; +} + +.container-easing .easing-choices li:hover, +.container-easing .easing-choices li.easing-selected { + color: $color-menu-hilite-text; + background-color: $color-menu-hilite-bg; +} +.container-easing .easing-choices li.easing-selected { + cursor: default; } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 185211ae..8be0caef 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1721,6 +1721,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex+1].setData(); } this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween(); + this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].keyframe.selectKeyframe(); this.trackRepetition.childComponents[trackIndex].updateKeyframeRule(); // If this is the last keyframe, we'll need to update the track duration diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index faa3ba77..b195dbd6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -994,9 +994,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelper = event.target.cloneNode(true); this._dragAndDropHelper.style.opacity = 0.8; this._dragAndDropHelper.style.position = "absolute"; - this._dragAndDropHelper.style.top = "2px"; + this._dragAndDropHelper.style.top = "5px"; this._dragAndDropHelper.style.left = "0px"; this._dragAndDropHelper.style.zIndex = 700; + this._dragAndDropHelper.classList.add("keyframeSelected"); //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); this._dragAndDropHelper.classList.add("track-dnd-helper"); -- cgit v1.2.3