From d3f67c2e306cb1888099f4decba00a9d8727cc43 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 22 May 2012 18:23:36 -0700
Subject: Timeline: New easing selector in spans.
---
js/panels/Timeline/Span.reel/Span.html | 17 +++-
js/panels/Timeline/Span.reel/Span.js | 78 ++++++++++++++++++-
js/panels/Timeline/Span.reel/css/Span.css | 90 +++++++++++++++++++---
js/panels/Timeline/Span.reel/scss/Span.scss | 87 +++++++++++++++++++++
js/panels/Timeline/Span.reel/scss/config.rb | 9 +++
.../TimelineTrack.reel/css/TimelineTrack.css | 2 +-
.../TimelineTrack.reel/scss/TimelineTrack.scss | 2 +-
7 files changed, 270 insertions(+), 15 deletions(-)
create mode 100644 js/panels/Timeline/Span.reel/scss/Span.scss
create mode 100644 js/panels/Timeline/Span.reel/scss/config.rb
(limited to 'js')
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index 8baa141a..d6c359ad 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -13,7 +13,10 @@
"owner": {
"prototype": "js/panels/Timeline/Span.reel",
"properties": {
- "element": {"#": "spanspace"}
+ "element": {"#": "spanspace"},
+ "container_easing" : {"#" : "container_easing"},
+ "easing_choice" : {"#": "easing_choice"},
+ "easing_choices" : {"#" : "easing_choices"}
}
}
@@ -23,6 +26,18 @@
+
+
+
+ ease-in-out
+
+
+ - choice 1
+ - choice 2
+ - choice 3
+ - choice 4
+
+
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
+/* Span.scss
+ * Main SCSS file for Span component, compiled by SASS into the file css/Span.css.
+ */
+/* line 22, ../scss/Span.scss */
+.tween_span {
+ position: absolute;
+ height: 16px;
+}
+
+/* line 26, ../scss/Span.scss */
+.tween_span .tween_span_bar {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ opacity: 0.15;
+}
+
+/* line 33, ../scss/Span.scss */
+.tween_span.spanHighlight .tween_span_bar {
+ background-color: #a0c8ff;
+ opacity: 0.4;
+}
+
+/*
+ * Easing picker
+ */
+/* line 42, ../scss/Span.scss */
+.container-easing {
+ position: absolute;
+ top: 2px;
+ right: 6px;
+ font-size: 10px;
+ line-height: 8px;
+ border: 1px solid black;
+ color: white;
+ background-color: #474747;
+}
-.tween_span{
- position: absolute;
- height: 16px;
- opacity: 0.15;
- background-color: white;
+/* line 54, ../scss/Span.scss */
+.container-easing,
+.container-easing .easing-choice,
+.container-easing .easing-choices {
+ width: 70px;
}
-.tween_span.spanHighlight{
- background-color: #a0c8ff;
- opacity: 0.4;
-}
\ No newline at end of file
+/* line 58, ../scss/Span.scss */
+.container-easing,
+.container-easing .easing-choice {
+ height: 10px;
+}
+
+/* line 61, ../scss/Span.scss */
+.container-easing .easing-choice {
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ width: 67px;
+ cursor: pointer;
+}
+
+/* line 68, ../scss/Span.scss */
+.container-easing .easing-choices {
+ position: absolute;
+ display: none;
+ bottom: -1px;
+ left: -1px;
+ z-index: 100;
+ height: auto;
+ border: 1px solid black;
+ color: white;
+ background-color: #474747;
+ overflow: hidden;
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+}
+
+/* line 83, ../scss/Span.scss */
+.container-easing .easing-choices li {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+}
diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss
new file mode 100644
index 00000000..a39cf465
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+/* Span.scss
+ * Main SCSS file for Span component, compiled by SASS into the file css/Span.css.
+ */
+
+// Import theme settings
+@import "../../../../../scss/imports/themes/default/colors";
+// @import "../../../../../scss/imports/themes/default/fonts";
+@import "../../../../../scss/imports/themes/default/mixins";
+
+// Import generic mixins and styles
+@import "../../../../../scss/imports/scss/mixins";
+// @import "../../../../../scss/imports/scss/Base";
+
+.tween_span{
+ position: absolute;
+ height: 16px;
+}
+.tween_span .tween_span_bar {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ opacity: 0.15;
+}
+
+.tween_span.spanHighlight .tween_span_bar {
+ background-color: #a0c8ff;
+ opacity: 0.4;
+}
+
+/*
+ * Easing picker
+ */
+
+.container-easing {
+ position: absolute;
+ top: 2px;
+ right: 6px;
+ font-size: 10px;
+ line-height: 8px;
+ border: 1px solid $color-menu-border;
+ color: $color-menu-text;
+ background-color: $color-menu-bg;
+}
+.container-easing,
+.container-easing .easing-choice,
+.container-easing .easing-choices {
+ width: 70px;
+}
+.container-easing,
+.container-easing .easing-choice {
+ height: 10px;
+}
+.container-easing .easing-choice {
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ width: 67px;
+ cursor: pointer;
+}
+.container-easing .easing-choices {
+ position: absolute;
+ display: none;
+ bottom: -1px;
+ left: -1px;
+ z-index: 100;
+ height: auto;
+ border: 1px solid $color-menu-border;
+ color: $color-menu-text;
+ background-color: $color-menu-bg;
+ overflow: hidden;
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+}
+.container-easing .easing-choices li {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+}
diff --git a/js/panels/Timeline/Span.reel/scss/config.rb b/js/panels/Timeline/Span.reel/scss/config.rb
new file mode 100644
index 00000000..e5a99b70
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/scss/config.rb
@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../css"
+sass_dir = ""
+images_dir = "../images/"
+javascripts_dir = "../js"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
index 03d1cf8d..9ea5ce01 100644
--- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
+++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
@@ -17,7 +17,7 @@
border-bottom-style: solid;
border-bottom-width: thin;
background-image: url("../images/gridline.jpg");
- overflow: hidden;
+ overflow: visible;
}
/* line 34, ../scss/TimelineTrack.scss */
diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
index 1b025c74..bad754a6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
+++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
@@ -28,7 +28,7 @@
border-bottom-style: solid;
border-bottom-width: thin;
background-image: url("../images/gridline.jpg");
- overflow: hidden;
+ overflow: visible;
}
.keyframe{
--
cgit v1.2.3
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')
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