-
+
ease-out
-
- - 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 8d4c25ae..bb8fdf03 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
var Span = exports.Span = Montage.create(Component, {
@@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, {
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";
}
+ */
// Change easing?
if (this.easing_choice.innerText !== this.easing) {
@@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, {
init: {
value: function() {
this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
- this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
}
},
@@ -147,15 +149,9 @@ var Span = exports.Span = Montage.create(Component, {
handleEasingChoiceClick: {
value: function(event) {
event.stopPropagation();
- this.areChoicesVisible = true;
-
- // Possibly another menu is already open. If so, we need to close it.
- if (this.application.ninja.timeline.currentOpenSpanMenu !== false) {
- this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu();
- }
-
- // Now store a pointer to ourselves for possible future use.
- this.application.ninja.timeline.currentOpenSpanMenu = this;
+ //this.areChoicesVisible = true;
+ this.application.ninja.timeline.easingMenu.show();
+
}
},
handleEasingChoicesClick: {
diff --git a/js/panels/Timeline/Span.reel/scss/Span.scss b/js/panels/Timeline/Span.reel/scss/Span.scss
index b3aff4d2..6afb4780 100644
--- a/js/panels/Timeline/Span.reel/scss/Span.scss
+++ b/js/panels/Timeline/Span.reel/scss/Span.scss
@@ -35,67 +35,3 @@
opacity: 0.4;
}
-/*
- * Easing picker
- */
-
-.container-easing {
- position: absolute;
- top: 2px;
- right: 8px;
- 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;
- white-space: nowrap;
-}
-.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;
- 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.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 5c957619..73c5ff8d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -37,7 +37,8 @@
"checkable_relative" : {"#" : "checkable_relative"},
"checkable_absolute" : {"#" : "checkable_absolute"},
"checkable_animated" : {"#" : "checkable_animated"},
- "tl_configbutton" : {"#" : "tl-configbutton"}
+ "tl_configbutton" : {"#" : "tl-configbutton"},
+ "easingMenu" : {"@" : "easingMenu"}
}
},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8276f878..a8a4d4a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -4,9 +4,10 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var nj = require("js/lib/NJUtils").NJUtils;
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component,
+ nj = require("js/lib/NJUtils").NJUtils,
+ EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
@@ -204,6 +205,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _easingMenu: {
+ value: null
+ },
+ easingMenu: {
+ get: function() {
+ return this._easingMenu;
+ },
+ set: function(newVal) {
+ this._easingMenu = newVal;
+ }
+ },
+
// The index of the last layer that was clicked on
// (used for shift-click multiselect)
_lastLayerClicked : {
@@ -481,6 +494,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
boundObjectPropertyPath:"currentSelectedContainer",
oneway:true
});
+ this.easingMenu = EasingMenuPopup;
+ this.easingMenu.show();
}
},
--
cgit v1.2.3