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(-) 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