diff options
Diffstat (limited to 'js/panels/Timeline/EasingMenu.reel')
5 files changed, 252 insertions, 0 deletions
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 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" type="text/css" href="css/EasingMenu.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "prototype": "js/panels/Timeline/EasingMenu.reel", | ||
15 | "properties": { | ||
16 | "element": {"#": "container-easing-menu"} | ||
17 | |||
18 | } | ||
19 | } | ||
20 | } | ||
21 | </script> | ||
22 | </head> | ||
23 | <body> | ||
24 | <div data-montage-id="container-easing-menu" class="container-easing-choices"> | ||
25 | <ul data-montage-id="easing_choices" class="easing-choices"> | ||
26 | <li data-ninja-ease="ease">ease</li> | ||
27 | <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> | ||
28 | <li data-ninja-ease="ease-in">ease-in</li> | ||
29 | <li data-ninja-ease="ease-in-out">ease-in-out</li> | ||
30 | <li data-ninja-ease="linear">linear</li> | ||
31 | </ul> | ||
32 | </div> | ||
33 | </body> | ||
34 | </html> \ 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 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | Popup = require("montage/ui/popup/popup.reel").Popup; | ||
10 | |||
11 | var EasingMenu = exports.EasingMenu = Montage.create(Component, { | ||
12 | |||
13 | hasTemplate:{ | ||
14 | value: true | ||
15 | }, | ||
16 | |||
17 | draw: { | ||
18 | value: function() { | ||
19 | console.log("EasingMenu.draw") | ||
20 | } | ||
21 | }, | ||
22 | |||
23 | show: { | ||
24 | value: function() { | ||
25 | var popup, easingMenu; | ||
26 | popup = Popup.create(); | ||
27 | this._popup = popup; | ||
28 | |||
29 | popup.modal = false; | ||
30 | |||
31 | easingMenu = EasingMenu.create(); | ||
32 | popup.content = easingMenu; | ||
33 | |||
34 | popup.show(); | ||
35 | } | ||
36 | } | ||
37 | |||
38 | }); | ||
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 @@ | |||
1 | @charset "UTF-8"; | ||
2 | /* <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> */ | ||
7 | /* Layer.scss | ||
8 | * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.css. | ||
9 | */ | ||
10 | /* | ||
11 | * Easing picker | ||
12 | */ | ||
13 | /* line 26, ../scss/EasingMenu.scss */ | ||
14 | .container-easing-choice { | ||
15 | position: absolute; | ||
16 | top: 2px; | ||
17 | right: 8px; | ||
18 | font-size: 10px; | ||
19 | line-height: 8px; | ||
20 | border: 1px solid black; | ||
21 | color: white; | ||
22 | background-color: #474747; | ||
23 | } | ||
24 | |||
25 | /* line 38, ../scss/EasingMenu.scss */ | ||
26 | .container-easing, | ||
27 | .container-easing-choice .easing-choice, | ||
28 | .container-easing-choices .easing-choices { | ||
29 | font-size: 10px; | ||
30 | width: 70px; | ||
31 | white-space: nowrap; | ||
32 | } | ||
33 | |||
34 | /* line 44, ../scss/EasingMenu.scss */ | ||
35 | .container-easing, | ||
36 | .container-easing-choice .easing-choice { | ||
37 | height: 10px; | ||
38 | } | ||
39 | |||
40 | /* line 47, ../scss/EasingMenu.scss */ | ||
41 | .container-easing-easing-choice .easing-choice { | ||
42 | position: absolute; | ||
43 | top: 0px; | ||
44 | left: 3px; | ||
45 | width: 67px; | ||
46 | cursor: pointer; | ||
47 | } | ||
48 | |||
49 | /* line 54, ../scss/EasingMenu.scss */ | ||
50 | .container-easing-choices .easing-choices { | ||
51 | position: absolute; | ||
52 | bottom: -1px; | ||
53 | left: -1px; | ||
54 | z-index: 100; | ||
55 | height: auto; | ||
56 | border: 1px solid black; | ||
57 | color: white; | ||
58 | background-color: #474747; | ||
59 | overflow: hidden; | ||
60 | list-style-type: none; | ||
61 | margin: 0px; | ||
62 | padding: 0px; | ||
63 | } | ||
64 | |||
65 | /* line 68, ../scss/EasingMenu.scss */ | ||
66 | .container-easing-choices .easing-choices li { | ||
67 | list-style-type: none; | ||
68 | margin: 0px; | ||
69 | padding: 0px; | ||
70 | padding-top: 2px; | ||
71 | padding-bottom: 2px; | ||
72 | padding-left: 3px; | ||
73 | cursor: pointer; | ||
74 | } | ||
75 | |||
76 | /* line 79, ../scss/EasingMenu.scss */ | ||
77 | .container-easing-choices .easing-choices li:hover, | ||
78 | .container-easing-choices .easing-choices li.easing-selected { | ||
79 | color: #242424; | ||
80 | background-color: #b2b2b2; | ||
81 | } | ||
82 | |||
83 | /* line 83, ../scss/EasingMenu.scss */ | ||
84 | .container-easing-choices .easing-choices li.easing-selected { | ||
85 | cursor: default; | ||
86 | } | ||
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 @@ | |||
1 | @charset "UTF-8"; | ||
2 | |||
3 | /* <copyright> | ||
4 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
5 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
6 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
7 | </copyright> */ | ||
8 | |||
9 | /* Layer.scss | ||
10 | * Main SCSS file for EasingMenu component, compiled by SASS into the file css/EasingMenu.css. | ||
11 | */ | ||
12 | |||
13 | // Import theme settings | ||
14 | @import "../../../../../scss/imports/themes/default/colors"; | ||
15 | // @import "../../../../../scss/imports/themes/default/fonts"; | ||
16 | @import "../../../../../scss/imports/themes/default/mixins"; | ||
17 | |||
18 | // Import generic mixins and styles | ||
19 | @import "../../../../../scss/imports/scss/mixins"; | ||
20 | // @import "../../../../../scss/imports/scss/Base"; | ||
21 | |||
22 | /* | ||
23 | * Easing picker | ||
24 | */ | ||
25 | |||
26 | .container-easing-choice { | ||
27 | position: absolute; | ||
28 | top: 2px; | ||
29 | right: 8px; | ||
30 | font-size: 10px; | ||
31 | line-height: 8px; | ||
32 | border: 1px solid $color-menu-border; | ||
33 | color: $color-menu-text; | ||
34 | background-color: $color-menu-bg; | ||
35 | } | ||
36 | .container-easing, | ||
37 | .container-easing-choice .easing-choice, | ||
38 | .container-easing-choices .easing-choices { | ||
39 | font-size: 10px; | ||
40 | width: 70px; | ||
41 | white-space: nowrap; | ||
42 | } | ||
43 | .container-easing, | ||
44 | .container-easing-choice .easing-choice { | ||
45 | height: 10px; | ||
46 | } | ||
47 | .container-easing-easing-choice .easing-choice { | ||
48 | position: absolute; | ||
49 | top: 0px; | ||
50 | left: 3px; | ||
< |