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 +++ js/panels/Timeline/Span.reel/Span.html | 12 +-- js/panels/Timeline/Span.reel/Span.js | 20 ++--- js/panels/Timeline/Span.reel/scss/Span.scss | 64 ---------------- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 3 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 21 +++++- 10 files changed, 282 insertions(+), 90 deletions(-) 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') 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 diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index a1f3afeb..6e643daa 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -15,8 +15,7 @@ "properties": { "element": {"#": "spanspace"}, "container_easing" : {"#" : "container_easing"}, - "easing_choice" : {"#": "easing_choice"}, - "easing_choices" : {"#" : "easing_choices"} + "easing_choice" : {"#": "easing_choice"} } } @@ -27,17 +26,10 @@
-
+
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 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 +++++++++++++++++++-- js/panels/Timeline/Span.reel/Span.js | 19 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 4 +- 3 files changed, 150 insertions(+), 14 deletions(-) (limited to 'js/panels') 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 */ + }); diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index bb8fdf03..44316469 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -150,31 +150,42 @@ var Span = exports.Span = Montage.create(Component, { value: function(event) { event.stopPropagation(); //this.areChoicesVisible = true; + this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; + this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; + console.log(event); + this.application.ninja.timeline.easingMenu.top = 100; + this.application.ninja.timeline.easingMenu.left = 100; this.application.ninja.timeline.easingMenu.show(); - + this.application.ninja.timeline.easingMenu.callingComponent = this; } }, handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); + + console.log("span.handleEasingChoicesClick") // Remove the pointer to ourselves - this.application.ninja.timeline.currentOpenSpanMenu = false; + //this.application.ninja.timeline.currentOpenSpanMenu = false; // Un-highlight the old choice and highlight the new choice - this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected"); + this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); event.target.classList.add("easing-selected"); // Set the easing this.easing = event.target.dataset.ninjaEase; + // Unbind the event handler + this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); + // Hide the menu. this.hideEasingMenu(); } }, hideEasingMenu: { value: function() { - this.areChoicesVisible = false; + //this.areChoicesVisible = false; + this.application.ninja.timeline.easingMenu.hide(); } } }); diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a8a4d4a8..666b2816 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -494,8 +494,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { boundObjectPropertyPath:"currentSelectedContainer", oneway:true }); + + // Create the easing menu for future use. this.easingMenu = EasingMenuPopup; - this.easingMenu.show(); + //this.easingMenu.show(); } }, -- 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 +++++--- js/panels/Timeline/Span.reel/Span.js | 24 +++++++-- js/panels/Timeline/Span.reel/css/Span.css | 66 +++++------------------- js/panels/Timeline/Span.reel/scss/Span.scss | 28 ++++++++++ 4 files changed, 75 insertions(+), 65 deletions(-) (limited to 'js/panels') 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 */ diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 44316469..7347ef51 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -152,9 +152,25 @@ var Span = exports.Span = Montage.create(Component, { //this.areChoicesVisible = true; this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; - console.log(event); - this.application.ninja.timeline.easingMenu.top = 100; - this.application.ninja.timeline.easingMenu.left = 100; + + function findPos(obj) { + var objReturn = {}; + objReturn.top = 0; + objReturn.left = 0; + + if (obj.offsetParent) { + + do { + objReturn.left += obj.offsetLeft; + objReturn.top += obj.offsetTop; + + } while (obj = obj.offsetParent); + } + return objReturn; + } + var objPos = findPos(event.target); + this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop); + this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft); this.application.ninja.timeline.easingMenu.show(); this.application.ninja.timeline.easingMenu.callingComponent = this; } @@ -162,8 +178,6 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); - - console.log("span.handleEasingChoicesClick") // Remove the pointer to ourselves //this.application.ninja.timeline.currentOpenSpanMenu = false; diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index e5cb4263..040379ea 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -27,11 +27,8 @@ opacity: 0.4; } -/* - * Easing picker - */ -/* line 42, ../scss/Span.scss */ -.container-easing { +/* line 38, ../scss/Span.scss */ +.container-easing-choice { position: absolute; top: 2px; right: 8px; @@ -42,65 +39,26 @@ background-color: #474747; } -/* line 54, ../scss/Span.scss */ -.container-easing, -.container-easing .easing-choice, -.container-easing .easing-choices { +/* line 50, ../scss/Span.scss */ +.container-easing-choice, +.container-easing-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; width: 70px; white-space: nowrap; } -/* line 59, ../scss/Span.scss */ -.container-easing, -.container-easing .easing-choice { +/* line 56, ../scss/Span.scss */ +.container-easing-choice, +.container-easing-choice .easing-choice { height: 10px; } -/* line 62, ../scss/Span.scss */ -.container-easing .easing-choice { +/* line 59, ../scss/Span.scss */ +.container-easing-choice .easing-choice { position: absolute; top: 0px; left: 3px; width: 67px; cursor: pointer; } - -/* line 69, ../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 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 6afb4780..31781f87 100644 --- a/js/panels/Timeline/Span.reel/scss/Span.scss +++ b/js/panels/Timeline/Span.reel/scss/Span.scss @@ -35,3 +35,31 @@ opacity: 0.4; } +.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-choice, +.container-easing-choice .easing-choice, +.container-easing-choices .easing-choices { + font-size: 10px; + width: 70px; + white-space: nowrap; +} +.container-easing-choice, +.container-easing-choice .easing-choice { + height: 10px; +} +.container-easing-choice .easing-choice { + position: absolute; + top: 0px; + left: 3px; + width: 67px; + cursor: pointer; +} -- cgit v1.2.3