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 @@ + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..b736ea59 --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js @@ -0,0 +1,38 @@ +/* + 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. + */ + +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 @@