diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 83 |
1 files changed, 58 insertions, 25 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 14c5f1c8..f10e9ac9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <!-- <copyright> | 2 | <!-- <copyright> |
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 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/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
@@ -13,17 +13,14 @@ | |||
13 | <script type="text/montage-serialization"> | 13 | <script type="text/montage-serialization"> |
14 | { | 14 | { |
15 | "owner": { | 15 | "owner": { |
16 | "module": "js/panels/Timeline/TimelinePanel.reel", | 16 | "prototype": "js/panels/Timeline/TimelinePanel.reel", |
17 | "name": "TimelinePanel", | ||
18 | "properties": { | 17 | "properties": { |
19 | "element": {"#": "timeline_panel"}, | 18 | "element": {"#": "timeline_panel"}, |
20 | "user_layers": {"#": "user_layers"}, | 19 | "user_layers": {"#": "user_layers"}, |
21 | "track_container": {"#": "right_inside"}, | 20 | "track_container": {"#": "right_inside"}, |
22 | "timeline_leftpane" : {"#" : "timeline_leftpane"}, | 21 | "timeline_leftpane" : {"#" : "leftpane_inside"}, |
23 | "layer_tracks": {"#": "layer_tracks"}, | 22 | "layer_tracks": {"#": "layer_tracks"}, |
24 | "master_track": {"#": "master_track"}, | 23 | "master_track": {"#": "master_track"}, |
25 | "newlayer_button": {"#": "newlayer_button"}, | ||
26 | "deletelayer_button": {"#": "deletelayer_button"}, | ||
27 | "time_markers" : {"#": "timeline_markers"}, | 24 | "time_markers" : {"#": "timeline_markers"}, |
28 | "layerRepetition" : {"@": "repetition1"}, | 25 | "layerRepetition" : {"@": "repetition1"}, |
29 | "trackRepetition" : {"@" : "repetition2"}, | 26 | "trackRepetition" : {"@" : "repetition2"}, |
@@ -34,13 +31,16 @@ | |||
34 | "container_tracks" : {"#" : "container-tracks"}, | 31 | "container_tracks" : {"#" : "container-tracks"}, |
35 | "end_hottext" : {"@" : "endHottext"}, | 32 | "end_hottext" : {"@" : "endHottext"}, |
36 | "container_layers" : {"#" : "container-layers"}, | 33 | "container_layers" : {"#" : "container-layers"}, |
37 | "timeline_disabler" : {"#" : "timeline-disabler"} | 34 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
35 | "checkable_relative" : {"#" : "checkable_relative"}, | ||
36 | "checkable_absolute" : {"#" : "checkable_absolute"}, | ||
37 | "checkable_animated" : {"#" : "checkable_animated"}, | ||
38 | "tl_configbutton" : {"#" : "tl-configbutton"} | ||
38 | } | 39 | } |
39 | }, | 40 | }, |
40 | 41 | ||
41 | "timelineResize" : { | 42 | "timelineResize" : { |
42 | "module": "js/panels/Resizer", | 43 | "prototype": "js/panels/Resizer", |
43 | "name": "Resizer", | ||
44 | "properties": { | 44 | "properties": { |
45 | "element": {"#": "layer_resizer"}, | 45 | "element": {"#": "layer_resizer"}, |
46 | "panel" : {"#" : "timeline_leftpane"}, | 46 | "panel" : {"#" : "timeline_leftpane"}, |
@@ -52,8 +52,7 @@ | |||
52 | 52 | ||
53 | 53 | ||
54 | "repetition1": { | 54 | "repetition1": { |
55 | "module": "montage/ui/repetition.reel", | 55 | "prototype": "montage/ui/repetition.reel", |
56 | "name": "Repetition", | ||
57 | "properties": { | 56 | "properties": { |
58 | "element": {"#": "container-layers"}, | 57 | "element": {"#": "container-layers"}, |
59 | "isSelectionEnabled" : true | 58 | "isSelectionEnabled" : true |
@@ -67,8 +66,7 @@ | |||
67 | } | 66 | } |
68 | }, | 67 | }, |
69 | "layer" : { | 68 | "layer" : { |
70 | "module" : "js/panels/Timeline/Layer.reel", | 69 | "prototype" : "js/panels/Timeline/Layer.reel", |
71 | "name" : "Layer", | ||
72 | "properties" : { | 70 | "properties" : { |
73 | "element": {"#": "container-layer"} | 71 | "element": {"#": "container-layer"} |
74 | }, | 72 | }, |
@@ -77,13 +75,17 @@ | |||
77 | "boundObject" : {"@" : "repetition1"}, | 75 | "boundObject" : {"@" : "repetition1"}, |
78 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 76 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
79 | "oneway" : false | 77 | "oneway" : false |
80 | } | 78 | }, |
79 | "bindingPoint" : { | ||
80 | "boundObject" : {"@" : "repetition1"}, | ||
81 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
82 | "oneway" : false | ||
83 | } | ||
81 | } | 84 | } |
82 | }, | 85 | }, |
83 | 86 | ||
84 | "repetition2" : { | 87 | "repetition2" : { |
85 | "module": "montage/ui/repetition.reel", | 88 | "prototype": "montage/ui/repetition.reel", |
86 | "name": "Repetition", | ||
87 | "properties": { | 89 | "properties": { |
88 | "element": {"#": "container-tracks"}, | 90 | "element": {"#": "container-tracks"}, |
89 | "isSelectionEnabled" : false | 91 | "isSelectionEnabled" : false |
@@ -97,8 +99,7 @@ | |||
97 | } | 99 | } |
98 | }, | 100 | }, |
99 | "track" : { | 101 | "track" : { |
100 | "module" : "js/panels/Timeline/TimelineTrack.reel", | 102 | "prototype" : "js/panels/Timeline/TimelineTrack.reel", |
101 | "name" : "TimelineTrack", | ||
102 | "properties" : { | 103 | "properties" : { |
103 | "element": {"#": "container-track"} | 104 | "element": {"#": "container-track"} |
104 | }, | 105 | }, |
@@ -107,12 +108,34 @@ | |||
107 | "boundObject" : {"@" : "repetition2"}, | 108 | "boundObject" : {"@" : "repetition2"}, |
108 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", | 109 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", |
109 | "oneway" : false | 110 | "oneway" : false |
111 | }, | ||
112 | "bindingPoint" : { | ||
113 | "boundObject" : {"@" : "repetition2"}, | ||
114 | "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", | ||
115 | "oneway" : false | ||
110 | } | 116 | } |
117 | |||
111 | } | 118 | } |
112 | }, | 119 | }, |
120 | |||
121 | "timelineZoomSlider":{ | ||
122 | "prototype":"js/components/slider.reel", | ||
123 | "properties":{ | ||
124 | "element":{"#":"tl_slider"}, | ||
125 | "maxValue" : 10000, | ||
126 | "minValue" : 1000 | ||
127 | }, | ||
128 | "bindings": { | ||
129 | "value": { | ||
130 | "boundObject": {"@": "owner"}, | ||
131 | "boundObjectPropertyPath": "millisecondsOffset", | ||
132 | "oneway": false | ||
133 | } | ||
134 | } | ||
135 | }, | ||
136 | |||
113 | "endHottext" : { | 137 | "endHottext" : { |
114 | "module": "js/components/hottextunit.reel", | 138 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
115 | "name": "HotTextUnit", | ||
116 | "properties": { | 139 | "properties": { |
117 | "element": {"#": "end_hottext"}, | 140 | "element": {"#": "end_hottext"}, |
118 | "maxValue" : 100000, | 141 | "maxValue" : 100000, |
@@ -151,16 +174,26 @@ | |||
151 | 174 | ||
152 | <div id="user_layers" class="userlayers"> | 175 | <div id="user_layers" class="userlayers"> |
153 | <div id="master_layer" class="masterlayer"> | 176 | <div id="master_layer" class="masterlayer"> |
154 | <div>Master Layer</div> | 177 | <div class="layer-master">Master Layer |
178 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> | ||
179 | <div class="tl-dropdown"> | ||
180 | <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div> | ||
181 | <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div> | ||
182 | <div class="nj-divider divider-horizontal"></div> | ||
183 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> | ||
184 | </div> | ||
185 | </div> | ||
186 | |||
187 | </div> | ||
188 | |||
155 | </div> | 189 | </div> |
156 | <div id="container-layers"> | 190 | <div id="container-layers" style="position: relative;" class="container-layers"> |
157 | <div id="container-layer"></div> | 191 | <div id="container-layer"></div> |
158 | </div> | 192 | </div> |
159 | </div> | 193 | </div> |
160 | 194 | ||
161 | <div id="timeline_gutter" class="timelinegutter"> | 195 | <div id="timeline_gutter" class="timelinegutter"> |
162 | <div id="newlayer_button" class="newlayerbutton"></div> | 196 | <div id="tl_slider" class="tl_slider"></div> |
163 | <div id="deletelayer_button" class="deletelayerbutton"></div> | ||
164 | <input id="end_hottext" class="endhottext"> | 197 | <input id="end_hottext" class="endhottext"> |
165 | </div> | 198 | </div> |
166 | </div> | 199 | </div> |
@@ -197,4 +230,4 @@ | |||
197 | </div> | 230 | </div> |
198 | 231 | ||