diff options
author | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-02-24 12:08:49 -0800 |
commit | 03ca7a5ed13c25faaa9100bb666e062fd15335e6 (patch) | |
tree | c51112223ceb9121cd595a60335eb2795215590f /js/panels/Timeline/Style.reel | |
parent | fcb12cc09eb3cd3b42bd215877ba18f449275b75 (diff) | |
parent | 053fc63a2950c7a5ee4ebf98033b64d474a3c46e (diff) | |
download | ninja-03ca7a5ed13c25faaa9100bb666e062fd15335e6.tar.gz |
Merge branch 'pentool' into brushtool
Conflicts:
imports/codemirror/mode/scheme/scheme.js
js/tools/BrushTool.js
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 96 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 654 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 133 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 76 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/config.rb | 9 |
5 files changed, 968 insertions, 0 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html new file mode 100644 index 00000000..48714432 --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.html | |||
@@ -0,0 +1,96 @@ | |||
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/Style.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module": "js/panels/Timeline/Style.reel", | ||
15 | "name": "Style", | ||
16 | "properties": { | ||
17 | "element": {"#": "style-container"}, | ||
18 | "styleContainer" : {"#" : "style-container"}, | ||
19 | "styleHintable" : {"#" : "style-hintable"}, | ||
20 | "styleProperty" : {"#": "container-property"}, | ||
21 | "valueEditorHottext" : {"@":"hottextunit"}, | ||
22 | "dtextProperty" : {"@":"dtext1"}, | ||
23 | "myHintable" : {"@" :"hintable"} | ||
24 | } | ||
25 | }, | ||
26 | "dtext1" : { | ||
27 | "module" : "montage/ui/dynamic-text.reel", | ||
28 | "name" : "DynamicText", | ||
29 | "properties" : { | ||
30 | "element" : {"#" : "container-property"} | ||
31 | }, | ||
32 | "bindings" : { | ||
33 | "value" : { | ||
34 | "boundObject" : {"@" : "owner"}, | ||
35 | "boundObjectPropertyPath" : "editorProperty", | ||
36 | "oneway" : false | ||
37 | } | ||
38 | } | ||
39 | }, | ||
40 | "hottextunit" : { | ||
41 | "module" : "js/components/hottextunit.reel", | ||
42 | "name" : "HotTextUnit", | ||
43 | "properties" : { | ||
44 | "element" : {"#":"value-editor-hottext"} | ||
45 | }, | ||
46 | "bindings" : { | ||
47 | "value" : { | ||
48 | "boundObject" : {"@" : "owner"}, | ||
49 | "boundObjectPropertyPath" : "editorValue", | ||
50 | "oneway" : false | ||
51 | } | ||
52 | } | ||
53 | }, | ||
54 | "hintable" : { | ||
55 | "module" : "js/components/hintable.reel", | ||
56 | "name" : "Hintable", | ||
57 | "properties" : { | ||
58 | "element" : {"#":"style-hintable"} | ||
59 | }, | ||
60 | "bindings" : { | ||
61 | "value" : { | ||
62 | "boundObject" : {"@" : "owner"}, | ||
63 | "boundObjectPropertyPath" : "editorProperty", | ||
64 | "oneway" : false | ||
65 | } | ||
66 | } | ||
67 | } | ||
68 | } | ||
69 | </script> | ||
70 | </head> | ||
71 | <body> | ||
72 | <div id="style-container"> | ||
73 | <div class="style-padding"> | ||
74 | <div class="row-hintable hidden"> | ||
75 | <div id="style-hintable"></div> | ||
76 | </div> | ||
77 | <div class="container-propvals hidden"> | ||
78 | <div class="cell-property"> | ||
79 | <div id="container-property">property</div> | ||
80 | </div> | ||
81 | <div class="cell-value value-editor editor-hottext hidden"> | ||
82 | <div id="value-editor-hottext"></div> | ||
83 | </div> | ||
84 | <div class="cell-value value-editor editor-color hidden"> | ||
85 | <div id="value-editor-color">[ ]</div> | ||
86 | </div> | ||
87 | <div class="cell-value value-editor editor-input hidden"> | ||
88 | <!-- <div id="value-editor-input"></div> --> | ||
89 | <input type="text" class="nj-skinned" value="" /> | ||
90 | </div> | ||
91 | </div> | ||
92 | |||
93 | </div> | ||
94 | </div> | ||
95 | </body> | ||
96 | </html> \ No newline at end of file | ||
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js new file mode 100644 index 00000000..027f3a40 --- /dev/null +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -0,0 +1,654 @@ | |||
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 | /* | ||
8 | * Style component: Edits and manages a single style rule for a Layer in the Timeline. | ||
9 | * Public Properties: | ||
10 | * editorProperty: The CSS property for the style. | ||
11 | * editorValue: The value for the editorProperty. | ||
12 | * whichView: Which view to show, the hintable view (where a new property can be typed in) | ||
13 | * or the propval view (where the property's value can be set with the tweener). | ||
14 | * Valid values are "hintable" and "propval", defaults to "hintable". | ||
15 | * | ||
16 | */ | ||
17 | |||
18 | var Montage = require("montage/core/core").Montage; | ||
19 | var Component = require("montage/ui/component").Component; | ||
20 | |||
21 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | ||
22 | |||
23 | hasTemplate:{ | ||
24 | value: true | ||
25 | }, | ||
26 | |||
27 | /* === BEGIN: Models === */ | ||
28 | // isSelected: whether or not the style is selected | ||
29 | _isSelected: { | ||
30 | serializable: true, | ||
31 | value: false | ||
32 | }, | ||
33 | isSelected: { | ||
34 | serializable: true, | ||
35 | get: function() { | ||
36 | return this._isSelected; | ||
37 | }, | ||
38 | set: function(newVal) { | ||
39 | if (newVal !== this._isSelected) { | ||
40 | this._isSelected = newVal; | ||
41 | this.needsDraw = true; | ||
42 | } | ||
43 | } | ||
44 | }, | ||
45 | |||
46 | /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with | ||
47 | * parent Layer. | ||
48 | */ | ||
49 | _isActive: { | ||
50 | value: false | ||
51 | }, | ||
52 | isActive: { | ||
53 | get: function() { | ||
54 | return this._isActive; | ||
55 | }, | ||
56 | set: function(newVal) { | ||
57 | this._isActive = newVal; | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | // Property for this editor | ||
62 | _editorProperty: { | ||
63 | serializable: true, | ||
64 | value: "" | ||
65 | }, | ||
66 | editorProperty: { | ||
67 | serializable: true, | ||
68 | get: function() { | ||
69 | return this._editorProperty; | ||
70 | }, | ||
71 | set: function(newVal) { | ||
72 | this._editorProperty = newVal; | ||
73 | this.needsDraw = true; | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | // Value for the property for this editor. | ||
78 | _editorValue: { | ||
79 | serializable: true, | ||
80 | value: "" | ||
81 | }, | ||
82 | editorValue: { | ||
83 | serializable: true, | ||
84 | get: function() { | ||
85 | return this._editorValue; | ||
86 | }, | ||
87 | set: function(newVal) { | ||
88 | this._editorValue = newVal; | ||
89 | this.needsDraw = true; | ||
90 | } | ||
91 | }, | ||
92 | |||
93 | // The tweener used to change the value for this property. | ||
94 | _ruleTweener: { | ||
95 | serializable: true, | ||
96 | value: false | ||
97 | }, | ||
98 | ruleTweener: { | ||
99 | serializable: true, | ||
100 | get: function() { | ||
101 | return this._ruleTweener; | ||
102 | }, | ||
103 | set: function(newVal) { | ||
104 | this._ruleTweener = newVal; | ||
105 | this.needsDraw = true; | ||
106 | } | ||
107 | }, | ||
108 | |||
109 | // The hintable we use to change the Property | ||
110 | _myHintable: { | ||
111 | value: "" | ||
112 | }, | ||
113 | myHintable: { | ||
114 | get: function() { | ||
115 | r |