aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r--js/panels/Timeline/Style.reel/Style.js695
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css124
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss2
3 files changed, 397 insertions, 424 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index bfa6f930..9785ba74 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -32,200 +32,240 @@ POSSIBILITY OF SUCH DAMAGE.
32/* 32/*
33 * Style component: Edits and manages a single style rule for a Layer in the Timeline. 33 * Style component: Edits and manages a single style rule for a Layer in the Timeline.
34 * Public Properties: 34 * Public Properties:
35 * editorProperty: The CSS property for the style. 35 * editorProperty: The CSS property for the style.
36 * editorValue: The value for the editorProperty. 36 * editorValue: The value for the editorProperty.
37 * whichView: Which view to show, the hintable view (where a new property can be typed in) 37 * whichView: Which view to show, the hintable view (where a new property can be typed in)
38 * or the propval view (where the property's value can be set with the tweener). 38 * or the propval view (where the property's value can be set with the tweener).
39 * Valid values are "hintable" and "propval", defaults to "hintable". 39 * Valid values are "hintable" and "propval", defaults to "hintable".
40 * 40 *
41 */ 41 */
42 42
43var Montage = require("montage/core/core").Montage; 43var Montage = require("montage/core/core").Montage;
44var Component = require("montage/ui/component").Component; 44var Component = require("montage/ui/component").Component;
45var ElementsMediator = require("js/mediators/element-mediator").ElementMediator 45var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
46 46
47 47
48var LayerStyle = exports.LayerStyle = Montage.create(Component, { 48var LayerStyle = exports.LayerStyle = Montage.create(Component, {
49
50 styleContainer: {
51 value: null,
52 serializable: true
53 },
54
55 styleHintable: {
56 value: null,
57 serializable: true
58 },
59
60 styleProperty: {
61 value: null,
62 serializable: true
63 },
64
65 valueEditorHottext: {
66 value: null,
67 serializable: true
68 },
69
70 dtextProperty: {
71 value: null,
72 serializable: true
73 },
74
75 /* === BEGIN: Models === */ 49 /* === BEGIN: Models === */
76 // isSelected: whether or not the style is selected 50 _parentLayerComponent: {
77 _isSelected: { 51 value: null
78 value: false 52 },
79 }, 53
80 isSelected: { 54 _styleContainer: {
55 value: null
56 },
57 styleContainer: {
81 serializable: true, 58 serializable: true,
82 get: function() { 59 get: function() {
83 return this._isSelected; 60 return this._styleContainer;
84 }, 61 },
85 set: function(newVal) { 62 set: function(newVal) {
86 63 this._styleContainer = newVal;
87 if (newVal !== this._isSelected) {
88 this._isSelected = newVal;
89 this.needsDraw = true;
90 }
91 } 64 }
92 }, 65 },
93 66
94 /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with 67 _styleHintable: {
95 * parent Layer. 68 value: null
96 */ 69 },
97 _isActive: { 70 styleHintable: {
98 value: false 71 serializable: true,
99 },
100 isActive: {
101 get: function() { 72 get: function() {
102 return this._isActive; 73 return this._styleHintable;
103 }, 74 },
104 set: function(newVal) { 75 set: function(newVal) {
105 this._isActive = newVal; 76 this._styleHintable = newVal;
106 } 77 }
107 }, 78 },
108 79
109 // Property for this editor 80 _styleProperty: {
110 _editorProperty: { 81 value: null
111 value: "" 82 },
112 }, 83 styleProperty: {
113 editorProperty: {
114 serializable: true, 84 serializable: true,
115 get: function() { 85 get: function() {
116 return this._editorProperty; 86 return this._styleProperty;
117 }, 87 },
118 set: function(newVal) { 88 set: function(newVal) {
119 this._editorProperty = newVal; 89 this._styleProperty = newVal;
120 this.needsDraw = true;
121 } 90 }
122 }, 91 },
123 92
124 // Value for the property for this editor. 93 _valueEditorHottext: {
125 _editorValue: { 94 value: null
126 value: "" 95 },
127 }, 96 valueEditorHottext: {
128 editorValue: {
129 serializable: true, 97 serializable: true,
130 get: function() { 98 get: function() {
131 return this._editorValue; 99 return this._valueEditorHottext;
132 }, 100 },
133 set: function(newVal) { 101 set: function(newVal) {
134 this._editorValue = newVal; 102 this._valueEditorHottext = newVal;
135 this.needsDraw = true;
136 } 103 }
137 }, 104 },
138 105
139 // The tweener used to change the value for this property. 106 _dtextProperty: {
140 _ruleTweener: { 107 value: null
141 value: false 108 },
142 }, 109 dtextProperty: {
143 ruleTweener: {
144 serializable: true, 110 serializable: true,
145 get: function() { 111 get: function() {
146 return this._ruleTweener; 112 return this._dtextProperty;
147 }, 113 },
148 set: function(newVal) { 114 set: function(newVal) {
149 this._ruleTweener = newVal; 115 this._dtextProperty = newVal;
150 this.needsDraw = true;
151 } 116 }
152 }, 117 },
153 118
119 _isSelected: {
120 value: false
121 },
122 isSelected: {
123 serializable: true,
124 get: function() {
125 return this._isSelected;
126 },
127 set: function(newVal) {
128
129 if (newVal !== this._isSelected) {
130 this._isSelected = newVal;
131 this.needsDraw = true;
132 }
133 }
134 },
135
136 _isActive: {
137 value: false
138 },
139 isActive: {
140 get: function() {
141 return this._isActive;
142 },
143 set: function(newVal) {
144 this._isActive = newVal;
145 }
146 },
147
148 // Property for this editor
149 _editorProperty: {
150 value: ""
151 },
152 editorProperty: {
153 serializable: true,
154 get: function() {
155 return this._editorProperty;
156 },
157 set: function(newVal) {
158 this._editorProperty = newVal;
159 this.needsDraw = true;
160 }
161 },
162
163 // Value for the property for this editor.
164 _editorValue: {
165 value: ""
166 },
167 editorValue: {
168 serializable: true,
169 get: function() {
170 return this._editorValue;
171 },
172 set: function(newVal) {
173 this._editorValue = newVal;
174 this.needsDraw = true;
175 }
176 },
177
178 // The tweener used to change the value for this property.