Timeline: New easing menu.

3 files changed, 59 insertions, 59 deletions

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;
+}