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.html158
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js511
-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, 1220 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..add6cb38
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -0,0 +1,158 @@
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 "editorValue" : {
70 "boundObject" : {"@": "repetition1"},
71 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
72 "oneway" : false
73 },
74 "ruleTweener" : {
75 "boundObject" : {"@": "repetition1"},
76 "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
77 "oneway" : false
78 }
79 }
80 }
81 }
82 </script>
83 </head>
84 <body>
85
86 <div id="layer" class="container-layer">
87 <div class="label-layer">
88 <span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span>
89 <span class="collapsible-clicker collapsible-collapsed"></span>
90 <div class="cssbutton button-lock"></div>
91 <div class="cssbutton button-visible"></div>
92 </div>
93 <div class="collapsible-content content-layer collapsible-collapsed">
94 <div class="label-position">
95 <span class="collapsible-label">Position</span>
96 <span class="collapsible-clicker clicker-position"></span>
97 </div>
98 <div class="content-position collapsible-content">
99 <div class="layout-table">
100 <div class="layout-row">
101 <div class="layout-cell">X</div>
102 <div class="layout-cell">100px</div>
103 </div>
104 <div class="layout-row">
105 <div class="layout-cell">Y</div>
106 <div class="layout-cell">100px</div>
107 </div>
108 <div class="layout-row">
109 <div class="layout-cell">Z</div>
110 <div class="layout-cell">100px</div>
111 </div>
112 </div>
113 </div>
114 <div class="label-transform">
115 <span class="collapsible-label">Transform</span>
116 <span class="clicker-transform collapsible-clicker"></span>
117 </div>
118 <div class="content-transform collapsible-content">
119 <div class="layout-table">
120 <div class="layout-row">
121 <div class="layout-cell">Scale X</div>
122 <div class="layout-cell">100px</div>
123 </div>
124 <div class="layout-row">
125 <div class="layout-cell">Scale Y</div>
126 <div class="layout-cell">100px</div>
127 </div>
128 <div class="layout-row">
129 <div class="layout-cell">Skew X</div>
130 <div class="layout-cell">100px</div>
131 </div>
132 <div class="layout-row">
133 <div class="layout-cell">Skew Y</div>
134 <div class="layout-cell">100px</div>
135 </div>
136 <div class="layout-row">
137 <div class="layout-cell">Rotation</div>
138 <div class="layout-cell">100px</div>
139 </div>
140 </div>
141
142 </div>
143 <div class="label-style">
144 <span class="collapsible-label">Style</span>
145 <span class="clicker-style collapsible-clicker"></span>
146 <div class="cssbutton button-delete"></div>
147 <div class="cssbutton button-add"></div>
148 </div>
149 <div class="content-style collapsible-content">
150 <div class="" id="style-container">
151 <div class="style-row" id="layer-style">
152 </div>
153 </div>
154 </div>
155 </div>
156 </div>
157 </body>
158</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..29171272
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,511 @@
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;
8
9var Layer = exports.Layer = Montage.create(Component, {
10
11 hasTemplate:{
12 value: true
13 },
14
15 /* Begin: Models */
16
17 /* Main collapser model: the main collapser for the layer */
18 _mainCollapser : {
19 value: false
20 },
21 mainCollapser: {
22 get: function() {
23 return this._mainCollapser;
24 },
25 set: function(newVal) {
26 this._mainCollapser = newVal;
27 }
28 },
29
30 /* Style models: the array of styles, and the repetition that uses them */