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/panels')
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
+
+
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
value: true
},
+ // BEGIN: Models
_spanWidth:{
value:0
},
-
spanWidth:{
serializable:true,
get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
this.needsDraw = true;
}
},
-
+
+ _isHighlighted: {
+ value: false
+ },
+ isHighlighted: {
+ get: function() {
+ return this._isHighlighted;
+ },
+ set: function(newVal) {
+ if (newVal !== this._isHighlighted) {
+ this._isHighlighted = newVal;
+ this.needsDraw = true;
+ }
+ }
+ },
+
+ _areChoicesVisible: {
+ value: false
+ },
+ areChoicesVisible: {
+ get: function() {
+ return this._areChoicesVisible;
+ },
+ set: function(newVal) {
+ if (newVal !== this._areChoicesVisible) {
+ this._areChoicesVisible = newVal;
+ this.needsDraw = true;
+ }
+ }
+ },
+
+ // BEGIN: draw cycle
+ prepareForDraw: {
+ value: function() {
+ this.init();
+ }
+ },
+
draw:{
value: function(){
this.element.style.width = this.spanWidth + "px";
+
+ // Highlight the span?
+ if (this.isHighlighted === true) {
+ this.element.classList.add("spanHighlight");
+ } else {
+ this.element.classList.remove("spanHighlight");
+ }
+
+ // Hide or show the choices menu?
+ if (this.areChoicesVisible === true) {
+ this.easing_choices.style.display = "block";
+ } else {
+ this.easing_choices.style.display = "none";
+ }
}
},
+ // BEGIN: Controllers
+ init: {
+ value: function() {
+ this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
+ this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ }
+ },
+
highlightSpan:{
value: function(){
- this.element.classList.add("spanHighlight");
+ // Class add/remove should only be done in draw cycle.
+ // this.element.classList.add("spanHighlight");
+ this.isHighlighted = true;
}
+ },
+
+ handleEasingChoiceClick: {
+ value: function(event) {
+ this.areChoicesVisible = true;
+ }
+ },
+ handleEasingChoicesClick: {
+ value: function(event) {
+ this.areChoicesVisible = false;
+ }
}
});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 198d71f3..16f931b2 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -1,17 +1,89 @@
+@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.
+ */
+/* 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/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