aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Style.reel
diff options
context:
space:
mode:
authorPushkar Joshi2012-02-24 12:08:49 -0800
committerPushkar Joshi2012-02-24 12:08:49 -0800
commit03ca7a5ed13c25faaa9100bb666e062fd15335e6 (patch)
treec51112223ceb9121cd595a60335eb2795215590f /js/panels/Timeline/Style.reel
parentfcb12cc09eb3cd3b42bd215877ba18f449275b75 (diff)
parent053fc63a2950c7a5ee4ebf98033b64d474a3c46e (diff)
downloadninja-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.html96
-rw-r--r--js/panels/Timeline/Style.reel/Style.js654
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css133
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss76
-rw-r--r--js/panels/Timeline/Style.reel/scss/config.rb9
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">[&nbsp;]</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
18var Montage = require("montage/core/core").Montage;
19var Component = require("montage/ui/component").Component;
20
21var 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 return this._myHintable;