diff options
Diffstat (limited to 'js/panels/Timeline/Span.reel')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.html | 12 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 20 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/scss/Span.scss | 64 |
3 files changed, 10 insertions, 86 deletions
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 @@ | |||
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "spanspace"}, | 16 | "element": {"#": "spanspace"}, |
17 | "container_easing" : {"#" : "container_easing"}, | 17 | "container_easing" : {"#" : "container_easing"}, |
18 | "easing_choice" : {"#": "easing_choice"}, | 18 | "easing_choice" : {"#": "easing_choice"} |
19 | "easing_choices" : {"#" : "easing_choices"} | ||
20 | } | 19 | } |
21 | } | 20 | } |
22 | 21 | ||
@@ -27,17 +26,10 @@ | |||
27 | 26 | ||
28 | <div data-montage-id="spanspace" class="tween_span"> | 27 | <div data-montage-id="spanspace" class="tween_span"> |
29 | <div class="tween_span_bar"></div> | 28 | <div class="tween_span_bar"></div> |
30 | <div data-montage-id="container_easing" class="container-easing"> | 29 | <div data-montage-id="container_easing" class="container-easing-choice"> |
31 | <div data-montage-id="easing_choice" class="easing-choice"> | 30 | <div data-montage-id="easing_choice" class="easing-choice"> |
32 | ease-out | 31 | ease-out |
33 | </div> | 32 | </div> |
34 | <ul data-montage-id="easing_choices" class="easing-choices"> | ||
35 | <li data-ninja-ease="ease">ease</li> | ||
36 | <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> | ||
37 | <li data-ninja-ease="ease-in">ease-in</li> | ||
38 | <li data-ninja-ease="ease-in-out">ease-in-out</li> | ||
39 | <li data-ninja-ease="linear">linear</li> | ||
40 | </ul> | ||
41 | </div> | 33 | </div> |
42 | </div> | 34 | </div> |
43 | 35 | ||
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 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage, |
8 | var Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | var Span = exports.Span = Montage.create(Component, { | 10 | var Span = exports.Span = Montage.create(Component, { |
11 | 11 | ||
@@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, { | |||
112 | this.element.classList.remove("spanHighlight"); | 112 | this.element.classList.remove("spanHighlight"); |
113 | } | 113 | } |
114 | 114 | ||
115 | /* | ||
115 | // Hide or show the choices menu? | 116 | // Hide or show the choices menu? |
116 | if (this.areChoicesVisible === true) { | 117 | if (this.areChoicesVisible === true) { |
117 | this.easing_choices.style.display = "block"; | 118 | this.easing_choices.style.display = "block"; |
118 | } else { | 119 | } else { |
119 | this.easing_choices.style.display = "none"; | 120 | this.easing_choices.style.display = "none"; |
120 | } | 121 | } |
122 | */ | ||
121 | 123 | ||
122 | // Change easing? | 124 | // Change easing? |
123 | if (this.easing_choice.innerText !== this.easing) { | 125 | if (this.easing_choice.innerText !== this.easing) { |
@@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, { | |||
131 | init: { | 133 | init: { |
132 | value: function() { | 134 | value: function() { |
133 | this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); | 135 | this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); |
134 | this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | 136 | //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); |
135 | 137 | ||
136 | } | 138 | } |
137 | }, | 139 | }, |
@@ -147,15 +149,9 @@ var Span = exports.Span = Montage.create(Component, { | |||
147 | handleEasingChoiceClick: { | 149 | handleEasingChoiceClick: { |
148 | value: function(event) { | 150 | value: function(event) { |
149 | event.stopPropagation(); | 151 | event.stopPropagation(); |
150 | this.areChoicesVisible = true; | 152 | //this.areChoicesVisible = true; |
151 | 153 | this.application.ninja.timeline.easingMenu.show(); | |
152 | // Possibly another menu is already open. If so, we need to close it. | 154 | |
153 | if (this.application.ninja.timeline.currentOpenSpanMenu !== false) { | ||
154 | this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu(); | ||
155 | } | ||
156 | |||
157 | // Now store a pointer to ourselves for possible future use. | ||
158 | this.application.ninja.timeline.currentOpenSpanMenu = this; | ||
159 | } | 155 | } |
160 | }, | 156 | }, |
161 | handleEasingChoicesClick: { | 157 | 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 @@ | |||
35 | opacity: 0.4; | 35 | opacity: 0.4; |
36 | } | 36 | } |
37 | 37 | ||
38 | /* | ||
39 | * Easing picker | ||
40 | */ | ||
41 | |||
42 | .container-easing { | ||
43 | position: absolute; | ||
44 | top: 2px; | ||
45 | right: 8px; | ||
46 | font-size: 10px; | ||
47 | line-height: 8px; | ||
48 | border: 1px solid $color-menu-border; | ||
49 | color: $color-menu-text; | ||
50 | background-color: $color-menu-bg; | ||
51 | } | ||
52 | .container-easing, | ||
53 | .container-easing .easing-choice, | ||
54 | .container-easing .easing-choices { | ||
55 | width: 70px; | ||
56 | white-space: nowrap; | ||
57 | } | ||
58 | .container-easing, | ||
59 | .container-easing .easing-choice { | ||
60 | height: 10px; | ||
61 | } | ||
62 | .container-easing .easing-choice { | ||
63 | position: absolute; | ||
64 | top: 0px; | ||
65 | left: 3px; | ||
66 | width: 67px; | ||
67 | cursor: pointer; | ||
68 | } | ||
69 | .container-easing .easing-choices { | ||
70 | position: absolute; | ||
71 | display: none; | ||
72 | bottom: -1px; | ||
73 | left: -1px; | ||
74 | z-index: 100; | ||
75 | height: auto; | ||
76 | border: 1px solid $color-menu-border; | ||
77 | color: $color-menu-text; | ||
78 | background-color: $color-menu-bg; | ||
79 | overflow: hidden; | ||
80 | list-style-type: none; | ||
81 | margin: 0px; | ||
82 | padding: 0px; | ||
83 | } | ||
84 | .container-easing .easing-choices li { | ||
85 | list-style-type: none; | ||
86 | margin: 0px; | ||
87 | padding: 0px; | ||
88 | padding-top: 2px; | ||
89 | padding-bottom: 2px; | ||
90 | padding-left: 3px; | ||
91 | cursor: pointer; | ||
92 | } | ||
93 | |||
94 | .container-easing .easing-choices li:hover, | ||
95 | .container-easing .easing-choices li.easing-selected { | ||
96 | color: $color-menu-hilite-text; | ||
97 | background-color: $color-menu-hilite-bg; | ||
98 | } | ||
99 | .container-easing .easing-choices li.easing-selected { | ||
100 | cursor: default; | ||
101 | } | ||