From f97e4b6ab1db9fb7de18b2e44c1b0edcf2ba072d Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 12 Jun 2012 16:47:15 -0700
Subject: Timeline: New popup menu for easing choices.
---
js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 34 +++++++++
js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 38 ++++++++++
.../Timeline/EasingMenu.reel/css/EasingMenu.css | 86 ++++++++++++++++++++++
.../Timeline/EasingMenu.reel/scss/EasingMenu.scss | 85 +++++++++++++++++++++
js/panels/Timeline/EasingMenu.reel/scss/config.rb | 9 +++
5 files changed, 252 insertions(+)
create mode 100644 js/panels/Timeline/EasingMenu.reel/EasingMenu.html
create mode 100644 js/panels/Timeline/EasingMenu.reel/EasingMenu.js
create mode 100644 js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css
create mode 100644 js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss
create mode 100644 js/panels/Timeline/EasingMenu.reel/scss/config.rb
(limited to 'js/panels/Timeline/EasingMenu.reel')
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
new file mode 100644
index 00000000..82218b45
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+ - ease
+ - ease-out
+ - ease-in
+ - ease-in-out
+ - linear
+
+
+ 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.
+ */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component,
+ Popup = require("montage/ui/popup/popup.reel").Popup;
+
+var EasingMenu = exports.EasingMenu = Montage.create(Component, {
+
+ hasTemplate:{
+ value: true
+ },
+
+ draw: {
+ value: function() {
+ console.log("EasingMenu.draw")
+ }
+ },
+
+ show: {
+ value: function() {
+ var popup, easingMenu;
+ popup = Popup.create();
+ this._popup = popup;
+
+ popup.modal = false;
+
+ easingMenu = EasingMenu.create();
+ popup.content = easingMenu;
+
+ popup.show();
+ }
+ }
+
+});
diff --git a/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css b/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css
new file mode 100644
index 00000000..ec300304
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css
@@ -0,0 +1,86 @@
+@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.
+ */
+/* Layer.scss
+ * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.css.
+ */
+/*
+ * Easing picker
+ */
+/* line 26, ../scss/EasingMenu.scss */
+.container-easing-choice {
+ position: absolute;
+ top: 2px;
+ right: 8px;
+ font-size: 10px;
+ line-height: 8px;
+ border: 1px solid black;
+ color: white;
+ background-color: #474747;
+}
+
+/* line 38, ../scss/EasingMenu.scss */
+.container-easing,
+.container-easing-choice .easing-choice,
+.container-easing-choices .easing-choices {
+ font-size: 10px;
+ width: 70px;
+ white-space: nowrap;
+}
+
+/* line 44, ../scss/EasingMenu.scss */
+.container-easing,
+.container-easing-choice .easing-choice {
+ height: 10px;
+}
+
+/* line 47, ../scss/EasingMenu.scss */
+.container-easing-easing-choice .easing-choice {
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ width: 67px;
+ cursor: pointer;
+}
+
+/* line 54, ../scss/EasingMenu.scss */
+.container-easing-choices .easing-choices {
+ position: absolute;
+ 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 68, ../scss/EasingMenu.scss */
+.container-easing-choices .easing-choices li {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 3px;
+ cursor: pointer;
+}
+
+/* line 79, ../scss/EasingMenu.scss */
+.container-easing-choices .easing-choices li:hover,
+.container-easing-choices .easing-choices li.easing-selected {
+ color: #242424;
+ background-color: #b2b2b2;
+}
+
+/* line 83, ../scss/EasingMenu.scss */
+.container-easing-choices .easing-choices li.easing-selected {
+ cursor: default;
+}
diff --git a/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss b/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss
new file mode 100644
index 00000000..b7b1c70d
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss
@@ -0,0 +1,85 @@
+@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.
+ */
+
+/* Layer.scss
+ * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.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";
+
+/*
+ * Easing picker
+ */
+
+.container-easing-choice {
+ 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-choice .easing-choice,
+.container-easing-choices .easing-choices {
+ font-size: 10px;
+ width: 70px;
+ white-space: nowrap;
+}
+.container-easing,
+.container-easing-choice .easing-choice {
+ height: 10px;
+}
+.container-easing-easing-choice .easing-choice {
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ width: 67px;
+ cursor: pointer;
+}
+.container-easing-choices .easing-choices {
+ position: absolute;
+ 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-choices .easing-choices li {
+ list-style-type: none;
+ margin: 0px;
+ padding: 0px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 3px;
+ cursor: pointer;
+}
+
+.container-easing-choices .easing-choices li:hover,
+.container-easing-choices .easing-choices li.easing-selected {
+ color: $color-menu-hilite-text;
+ background-color: $color-menu-hilite-bg;
+}
+.container-easing-choices .easing-choices li.easing-selected {
+ cursor: default;
+}
\ No newline at end of file
diff --git a/js/panels/Timeline/EasingMenu.reel/scss/config.rb b/js/panels/Timeline/EasingMenu.reel/scss/config.rb
new file mode 100644
index 00000000..e5a99b70
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.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
--
cgit v1.2.3
From 80d1074a5e4a10da8d36c14b8d4f4e9fae47a5ec Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Wed, 13 Jun 2012 16:00:32 -0700
Subject: Timeline: More work on new easing menu.
---
js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 141 +++++++++++++++++++++--
1 file changed, 132 insertions(+), 9 deletions(-)
(limited to 'js/panels/Timeline/EasingMenu.reel')
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index b736ea59..006efd69 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -13,26 +13,149 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
hasTemplate:{
value: true
},
+
+ /* Begin: Models */
+
+ // popup: the initialized component.
+ _popup: {
+ value: null
+ },
+ popup: {
+ get: function() {
+ return this._popup;
+ },
+ set: function(newVal) {
+ this._popup = newVal
+ }
+ },
+
+ // callingComponent: pointer to the span that called for the menu
+ _callingComponent: {
+ value: null
+ },
+ callingComponent: {
+ get: function() {
+ return this._callingComponent;
+ },
+ set: function(newVal) {
+ this._callingComponent = newVal;
+ }
+ },
+
+ // anchor: pointer to the anchoring element
+ _anchor: {
+ value: null
+ },
+ anchor: {
+ get: function() {
+ return this._anchor;
+ },
+ set: function(newVal) {
+ this._anchor = newVal;
+ }
+ },
+
+
+ _top: {
+ value: null
+ },
+ top: {
+ get: function() {
+ return this._top;
+ },
+ set: function(newVal) {
+ this._top = newVal;
+ }
+ },
+ _left: {
+ value: null
+ },
+ left: {
+ get: function() {
+ return this._left;
+ },
+ set: function(newVal) {
+ this._left = newVal;
+ }
+ },
+
+ // currentChoice: The data attribute of the current choice
+ _currentChoice: {
+ value: null
+ },
+ currentChoice: {
+ get: function() {
+ return this._currentChoice;
+ },
+ set: function(newVal) {
+ this._currentChoice = newVal;
+ }
+ },
+
+ /* End: Models */
+
+ /* Begin: Draw Cycle */
+ willDraw: {
+ value: function() {
+ this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ }
+ },
draw: {
value: function() {
- console.log("EasingMenu.draw")
+ // Update the selection classes.
+ this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+ this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+ }
+ },
+ didDraw: {
+ value: function() {
}
},
+ /* End Draw Cycle */
+ /* Begin: Controllers */
show: {
value: function() {
- var popup, easingMenu;
- popup = Popup.create();
- this._popup = popup;
+ // Initialize the popup if it hasn't already been done
+ if (this.popup == null) {
+ this.popup = Popup.create();
+ this.popup.modal = false;
+ this.popup.content = EasingMenu.create();
+ }
+
+ // Show the popup
+ this.popup.anchor = this.anchor;
+ var position = {};
+ position.top = this.top;
+ position.left = this.left;
+ this.popup.position = position;
+ this.popup.show();
- popup.modal = false;
- easingMenu = EasingMenu.create();
- popup.content = easingMenu;
-
- popup.show();
+
+
+
+ // Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
+ this.popup.content.needsDraw = true;
}
+ },
+ handleEasingChoicesClick: {
+ value: function(event) {
+ event.stopPropagation();
+
+ // Un-highlight the old choice and highlight the new choice
+ this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+ event.target.classList.add("easing-selected");
+
+ // Set the easing in the span that called us
+ this.callingComponent.easing = event.target.dataset.ninjaEase;
+
+ // Hide the menu.
+ this.popup.hide();
+ }
}
+ /* End: Controllers */
+
});
--
cgit v1.2.3
From 53bb51a38edc6fe7cc80c43d34027590a22a1d32 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 14 Jun 2012 14:29:37 -0700
Subject: Timeline: New easing menu.
---
js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 22 ++++++++++++++++------
1 file changed, 16 insertions(+), 6 deletions(-)
(limited to 'js/panels/Timeline/EasingMenu.reel')
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index 006efd69..f0547e31 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -92,12 +92,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
}
},
+ _isShown: {
+ value: false
+ },
+
/* End: Models */
/* Begin: Draw Cycle */
willDraw: {
value: function() {
this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+ document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
}
},
@@ -131,11 +136,8 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
position.left = this.left;
this.popup.position = position;
this.popup.show();
+ this._isShow = true;
-
-
-
-
// Redraw the content (needed to reflect probable changes in selection from the last time we showed it)
this.popup.content.needsDraw = true;
}
@@ -152,9 +154,17 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
this.callingComponent.easing = event.target.dataset.ninjaEase;
// Hide the menu.
- this.popup.hide();
+ this.popup.hide();
+ this._isShow = false;
}
- }
+ },
+ handleDocumentScroll: {
+ value: function(event) {
+ if (this._isShow = true) {
+ this.popup.hide();
+ }
+ }
+ }
/* End: Controllers */
--
cgit v1.2.3
From 730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Mon, 18 Jun 2012 16:12:49 -0700
Subject: Timeline: Bug Fixes - Splitting tweens now works again for
shift-click interaction - Fixed visual "jump" in keyframes and spans when
splitting tweens - Set default easing to "none" to match CSS standard.
---
js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 3 ++-
js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 17 +++++++++++++----
2 files changed, 15 insertions(+), 5 deletions(-)
(limited to 'js/panels/Timeline/EasingMenu.reel')
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
index 82218b45..1c8f808f 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -23,8 +23,9 @@
+ - none
- ease
- - ease-out
+ - ease-out
- ease-in
- ease-in-out
- linear
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index f0547e31..ced3ae6a 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
// currentChoice: The data attribute of the current choice
_currentChoice: {
- value: null
+ value: "none"
},
currentChoice: {
get: function() {
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
draw: {
value: function() {
// Update the selection classes.
- this.element.querySelector(".easing-selected").classList.remove("easing-selected");
- this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+ var easingSelected = this.element.querySelector(".easing-selected");
+ if (easingSelected !== null) {
+ easingSelected.classList.remove("easing-selected");
+ }
+ var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
+ if (dataEl !== null) {
+ dataEl.classList.add("easing-selected");
+ }
}
},
didDraw: {
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
event.stopPropagation();
// Un-highlight the old choice and highlight the new choice
- this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+ var easingSelected = this.element.querySelector(".easing-selected");
+ if (easingSelected !== null) {
+ easingSelected.classList.remove("easing-selected");
+ }
event.target.classList.add("easing-selected");
// Set the easing in the span that called us
--
cgit v1.2.3