aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-06-12 16:47:15 -0700
committerJon Reid2012-06-12 16:47:15 -0700
commitf97e4b6ab1db9fb7de18b2e44c1b0edcf2ba072d (patch)
treee2750ba885826ce0e1f819c2a4c1655f41308360 /js
parent8c55dfcb0a669eef0a3bb406b70868078ef09810 (diff)
downloadninja-f97e4b6ab1db9fb7de18b2e44c1b0edcf2ba072d.tar.gz
Timeline: New popup menu for easing choices.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.html34
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.js38
-rw-r--r--js/panels/Timeline/EasingMenu.reel/css/EasingMenu.css86
-rw-r--r--js/panels/Timeline/EasingMenu.reel/scss/EasingMenu.scss85
-rw-r--r--js/panels/Timeline/EasingMenu.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Span.reel/Span.html12
-rw-r--r--js/panels/Timeline/Span.reel/Span.js20
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss64
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html3
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js21
10 files changed, 282 insertions, 90 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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 Popup = require("montage/ui/popup/popup.reel").Popup;
10
11var 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;