diff options
author | Kruti Shah | 2012-02-08 10:50:46 -0800 |
---|---|---|
committer | Kruti Shah | 2012-02-08 10:50:46 -0800 |
commit | 8e8dadde520de60e5d556d7ca9bdecf7c98381fe (patch) | |
tree | 350db2035ae35f8ea20ce94f2e251eb7131f3437 /js | |
parent | 6787bda807ad3974b29cab77628cc5c3c1b06a9d (diff) | |
parent | a460855c2132bffc666582659520e575d687d0cd (diff) | |
download | ninja-8e8dadde520de60e5d556d7ca9bdecf7c98381fe.tar.gz |
Merge branch 'refs/heads/Timeline' into Timeline_updated
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 29 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/css/Span.css | 3 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 6 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 134 |
6 files changed, 185 insertions, 14 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index add6cb38..add28385 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -66,6 +66,11 @@ | |||
66 | "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty", | 66 | "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty", |
67 | "oneway" : false | 67 | "oneway" : false |
68 | }, | 68 | }, |
69 | "isSelected" : { | ||
70 | "boundObject" : {"@": "repetition1"}, | ||
71 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", | ||
72 | "oneway" : false | ||
73 | }, | ||
69 | "editorValue" : { | 74 | "editorValue" : { |
70 | "boundObject" : {"@": "repetition1"}, | 75 | "boundObject" : {"@": "repetition1"}, |
71 | "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", | 76 | "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 29171272..c5f5d7e4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -103,6 +103,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
103 | _isSelected:{ | 103 | _isSelected:{ |
104 | value: false, | 104 | value: false, |
105 | writable: true, | 105 | writable: true, |
106 | serializable: true, | ||
106 | enumerable: false | 107 | enumerable: false |
107 | }, | 108 | }, |
108 | 109 | ||
@@ -111,7 +112,22 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
111 | return this._isSelected; | 112 | return this._isSelected; |
112 | }, | 113 | }, |
113 | set:function(value){ | 114 | set:function(value){ |
114 | this._isSelected = value; | 115 | if (value !== this._isSelected) { |
116 | // Only concerned about different values | ||
117 | if (value === false) { | ||
118 | // Deselect all of the styles | ||
119 | var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; | ||
120 | if (arrLayerStylesLength > 0) { | ||
121 | for (i = 0; i < arrLayerStylesLength; i++) { | ||
122 | this.arrLayerStyles[i].isSelected = false; | ||
123 | } | ||
124 | this.styleRepetition.selectedIndexes = null; | ||
125 | } | ||
126 | } | ||
127 | this._isSelected = value; | ||
128 | this.needsDraw = true; | ||
129 | } | ||
130 | |||
115 | } | 131 | } |
116 | }, | 132 | }, |
117 | _isAnimated:{ | 133 | _isAnimated:{ |
@@ -335,6 +351,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
335 | this.styleCollapser.bypassAnimation = true; | 351 | this.styleCollapser.bypassAnimation = true; |
336 | this.styleCollapser.toggle(); | 352 | this.styleCollapser.toggle(); |
337 | } | 353 | } |
354 | |||
355 | if (this.isSelected) { | ||
356 | this.element.classList.add("selected"); | ||
357 | } else { | ||
358 | this.element.classList.remove("selected"); | ||
359 | } | ||
338 | } | 360 | } |
339 | }, | 361 | }, |
340 | /* End: Draw cycle */ | 362 | /* End: Draw cycle */ |
@@ -398,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
398 | newStyle.editorProperty = ""; | 420 | newStyle.editorProperty = ""; |
399 | newStyle.editorValue = ""; | 421 | newStyle.editorValue = ""; |
400 | newStyle.ruleTweener = false; | 422 | newStyle.ruleTweener = false; |
423 | newStyle.isSelected = true; | ||
401 | 424 | ||
402 | if (!!this.styleRepetition.selectedIndexes) { | 425 | if (!!this.styleRepetition.selectedIndexes) { |
403 | mySelection = this.styleRepetition.selectedIndexes[0]; | 426 | mySelection = this.styleRepetition.selectedIndexes[0]; |
@@ -450,13 +473,13 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
450 | handleAddStyleClick: { | 473 | handleAddStyleClick: { |
451 | value: function(event) { | 474 | value: function(event) { |
452 | // Stop the event propagation | 475 | // Stop the event propagation |
453 | event.stopPropagation(); | 476 | //event.stopPropagation(); |
454 | this.addStyle(); | 477 | this.addStyle(); |
455 | } | 478 | } |
456 | }, | 479 | }, |
457 | handleDeleteStyleClick: { | 480 | handleDeleteStyleClick: { |
458 | value: function(event) { | 481 | value: function(event) { |
459 | event.stopPropagation(); | 482 | //event.stopPropagation(); |
460 | this.deleteStyle(); | 483 | this.deleteStyle(); |
461 | } | 484 | } |
462 | }, | 485 | }, |
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 1e988c6c..f239454d 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css | |||
@@ -1,10 +1,11 @@ | |||
1 | .tween_span{ | 1 | .tween_span{ |
2 | position: absolute; | 2 | position: absolute; |
3 | height: 16px; | 3 | height: 16px; |
4 | opacity: 0.3; | 4 | opacity: 0.15; |
5 | background-color: white; | 5 | background-color: white; |
6 | } | 6 | } |
7 | 7 | ||
8 | .tween_span.spanHighlight{ | 8 | .tween_span.spanHighlight{ |
9 | background-color: #a0c8ff; | 9 | background-color: #a0c8ff; |
10 | opacity: 0.4; | ||
10 | } \ No newline at end of file | 11 | } \ No newline at end of file |
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 796385d0..bf254795 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -19,6 +19,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
19 | }, | 19 | }, |
20 | 20 | ||
21 | /* === BEGIN: Models === */ | 21 | /* === BEGIN: Models === */ |
22 | // isSelected: whether or not the style is selected | ||
23 | _isSelected: { | ||
24 | serializable: true, | ||
25 | value: false | ||
26 | }, | ||
27 | isSelected: { | ||
28 | serializable: true, | ||
29 | get: function() { | ||
30 | return this._isSelected; | ||
31 | }, | ||
32 | set: function(newVal) { | ||
33 | if (newVal !== this._isSelected) { | ||
34 | this._isSelected = newVal; | ||
35 | this.needsDraw = true; | ||
36 | } | ||
37 | } | ||
38 | }, | ||
22 | 39 | ||
23 | // Property for this editor | 40 | // Property for this editor |
24 | _editorProperty: { | 41 | _editorProperty: { |
@@ -152,6 +169,11 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
152 | // Show the right thing | 169 | // Show the right thing |
153 | this._showView(); | 170 | this._showView(); |
154 | } | 171 | } |
172 | if (this.isSelected) { | ||
173 | this.element.classList.add("selected"); | ||
174 | } else { | ||
175 | this.element.classList.remove("selected"); | ||
176 | } | ||
155 | } | 177 | } |
156 | }, | 178 | }, |
157 | didDraw: { | 179 | didDraw: { |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9ed69f4a..f7cd40ca 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -14,6 +14,7 @@ | |||
14 | "element": {"#": "timeline_panel"}, | 14 | "element": {"#": "timeline_panel"}, |
15 | "user_layers": {"#": "user_layers"}, | 15 | "user_layers": {"#": "user_layers"}, |
16 | "track_container": {"#": "right_inside"}, | 16 | "track_container": {"#": "right_inside"}, |
17 | "timeline_leftpane" : {"#" : "timeline_leftpane"}, | ||
17 | "layer_tracks": {"#": "layer_tracks"}, | 18 | "layer_tracks": {"#": "layer_tracks"}, |
18 | "master_track": {"#": "master_track"}, | 19 | "master_track": {"#": "master_track"}, |
19 | "newlayer_button": {"#": "newlayer_button"}, | 20 | "newlayer_button": {"#": "newlayer_button"}, |
@@ -92,6 +93,11 @@ | |||
92 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", | 93 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", |
93 | "oneway" : false | 94 | "oneway" : false |
94 | }, | 95 | }, |
96 | "isSelected" : { | ||
97 | "boundObject" : {"@" : "repetition1"}, | ||
98 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", | ||
99 | "oneway" : false | ||
100 | }, | ||
95 | "isStyleCollapsed" : { | 101 | "isStyleCollapsed" : { |
96 | "boundObject" : {"@" : "repetition1"}, | 102 | "boundObject" : {"@" : "repetition1"}, |
97 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", | 103 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ef353490..8f7c63bf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage; | |||
2 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | 3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | 4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; |
5 | var nj = require("js/lib/NJUtils").NJUtils; | ||
5 | 6 | ||
6 | // var Track = require("js/panels/Timeline/Track.reel").Track; | 7 | // var Track = require("js/panels/Timeline/Track.reel").Track; |
7 | 8 | ||
@@ -37,13 +38,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
37 | this._layerRepetition = newVal; | 38 | this._layerRepetition = ne |