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')
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
- - choice 1
- - choice 2
- - choice 3
- - choice 4
+ - ease
+ - ease-out
+ - ease-in
+ - ease-in-out
+ - linear
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