aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html168
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js626
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css322
-rw-r--r--js/panels/Timeline/Layer.reel/images/eye.pngbin0 -> 1331 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-collapsed.pngbin0 -> 325 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-eye.pngbin0 -> 550 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-lock.pngbin0 -> 475 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-minus.pngbin0 -> 161 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-open.pngbin0 -> 323 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-plus.pngbin0 -> 230 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/lock_closed.pngbin0 -> 1208 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/lock_open.pngbin0 -> 1186 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.pngbin0 -> 3028 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss220
-rw-r--r--js/panels/Timeline/Layer.reel/scss/config.rb9
15 files changed, 1345 insertions, 0 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
new file mode 100644
index 00000000..dd819b2b
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -0,0 +1,168 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" type="text/css" href="css/Layer.css">
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module": "js/panels/Timeline/Layer.reel",
10 "name": "Layer",
11 "properties": {
12 "element": {"#": "layer"},
13 "styleRepetition" : {"@":"repetition1"},
14 "dynamicLayerName" : {"@":"dtext1"},
15 "slotStyle" : {"@":"slot1"}
16 }
17 },
18 "dtext1" : {
19 "module" : "montage/ui/dynamic-text.reel",
20 "name" : "DynamicText",
21 "properties" : {
22 "element" : {"#" : "layer-label-text"}
23 },
24 "bindings" : {
25 "value" : {
26 "boundObject" : {"@": "owner"},
27 "boundObjectPropertyPath" : "layerName",
28 "oneway" : false
29 }
30 }
31 },
32 "repetition1": {
33 "module": "montage/ui/repetition.reel",
34 "name": "Repetition",
35 "properties": {
36 "element": {"#": "style-container"},
37 "isSelectionEnabled" : true
38 },
39 "bindings": {
40 "objects": {
41 "boundObject": {"@": "owner"},
42 "boundObjectPropertyPath": "arrLayerStyles",
43 "oneway": false
44 }
45 }
46 },
47 "style" : {
48 "module" : "js/panels/Timeline/Style.reel",
49 "name" : "LayerStyle",
50 "properties" : {
51 "element" : {"#" : "layer-style"}
52 },
53 "bindings" : {
54 "styleID" : {
55 "boundObject" : {"@": "repetition1"},
56 "boundObjectPropertyPath" : "objectAtCurrentIteration.styleID",
57 "oneway" : false
58 },
59 "whichView" : {
60 "boundObject" : {"@": "repetition1"},
61 "boundObjectPropertyPath" : "objectAtCurrentIteration.whichView",
62 "oneway" : false
63 },
64 "editorProperty" : {
65 "boundObject" : {"@": "repetition1"},
66 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty",
67 "oneway" : false
68 },
69 "isSelected" : {
70 "boundObject" : {"@": "repetition1"},
71 "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
72 "oneway" : false
73 },
74 "isActive" : {
75 "boundObject" : {"@": "repetition1"},
76 "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive",
77 "oneway" : false
78 },
79 "editorValue" : {
80 "boundObject" : {"@": "repetition1"},
81 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
82 "oneway" : false
83 },
84 "ruleTweener" : {
85 "boundObject" : {"@": "repetition1"},
86 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
87 "oneway" : false
88 }
89 }
90 }
91 }
92 </script>
93 </head>
94 <body>
95
96 <div id="layer" class="container-layer">
97 <div class="label-layer">
98 <span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span>
99 <span class="collapsible-clicker collapsible-collapsed"></span>
100 <div class="cssbutton button-lock"></div>
101 <div class="cssbutton button-visible"></div>
102 </div>
103 <div class="collapsible-content content-layer collapsible-collapsed">
104 <div class="label-position">
105 <span class="collapsible-label">Position</span>
106 <span class="collapsible-clicker clicker-position"></span>
107 </div>
108 <div class="content-position collapsible-content">
109 <div class="layout-table">
110 <div class="layout-row">
111 <div class="layout-cell">X</div>
112 <div class="layout-cell">100px</div>
113 </div>
114 <div class="layout-row">
115 <div class="layout-cell">Y</div>
116 <div class="layout-cell">100px</div>
117 </div>
118 <div class="layout-row">
119 <div class="layout-cell">Z</div>
120 <div class="layout-cell">100px</div>
121 </div>
122 </div>
123 </div>
124 <div class="label-transform">
125 <span class="collapsible-label">Transform</span>
126 <span class="clicker-transform collapsible-clicker"></span>
127 </div>
128 <div class="content-transform collapsible-content">
129 <div class="layout-table">
130 <div class="layout-row">
131 <div class="layout-cell">Scale X</div>
132 <div class="layout-cell">100px</div>
133 </div>
134 <div class="layout-row">
135 <div class="layout-cell">Scale Y</div>
136 <div class="layout-cell">100px</div>
137 </div>
138 <div class="layout-row">
139 <div class="layout-cell">Skew X</div>
140 <div class="layout-cell">100px</div>
141 </div>
142 <div class="layout-row">
143 <div class="layout-cell">Skew Y</div>
144 <div class="layout-cell">100px</div>
145 </div>
146 <div class="layout-row">
147 <div class="layout-cell">Rotation</div>
148 <div class="layout-cell">100px</div>
149 </div>
150 </div>
151
152 </div>
153 <div class="label-style">
154 <span class="collapsible-label">Style</span>
155 <span class="clicker-style collapsible-clicker"></span>
156 <div class="cssbutton button-delete"></div>
157 <div class="cssbutton button-add"></div>
158 </div>
159 <div class="content-style collapsible-content">
160 <div class="" id="style-container">
161 <div class="style-row" id="layer-style">
162 </div>
163 </div>
164 </div>
165 </div>
166 </div>
167 </body>
168</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
new file mode 100644
index 00000000..71a1f01f
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,626 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3var Collapser = require("js/panels/Timeline/Collapser").Collapser;
4var Hintable = require("js/components/hintable.reel").Hintable;
5var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
6var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
7var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
8var nj = require("js/lib/NJUtils").NJUtils;
9
10var Layer = exports.Layer = Montage.create(Component, {
11
12 hasTemplate:{
13 value: true
14 },
15
16 /* Begin: Models */
17
18 /* Main collapser model: the main collapser for the layer */
19 _mainCollapser : {