aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-05-15 16:08:26 -0700
committerJon Reid2012-05-15 16:08:26 -0700
commit26f1524c049791cb9cd81695c57b84d952a2e7e6 (patch)
tree45547b2b6c27bc9d43166cb99373f9171c5a85a0
parent3e02135df2ee028ae43d0e2456c04e24ecee0e86 (diff)
downloadninja-26f1524c049791cb9cd81695c57b84d952a2e7e6.tar.gz
Timeline: Multiselect from the layer panel.
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js12
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css75
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js184
4 files changed, 131 insertions, 145 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b0f6d220..418d2226 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -494,10 +494,14 @@ var Layer = exports.Layer = Montage.create(Component, {
494 }, 494 },
495 draw: { 495 draw: {
496 value: function() { 496 value: function() {
497 if (this.isSelected) { 497 var boolHasClass = this.element.classList.contains("layerSelected");
498 this.element.classList.add("selected"); 498 if (this.isSelected && !boolHasClass) {
499 } else { 499 //console.log('Layer.draw, adding selection for layer ', this.layerName)
500 this.element.classList.remove("selected"); 500 this.element.classList.add("layerSelected");
501 }
502 if (!this.isSelected && boolHasClass) {
503 //console.log('Layer.draw, removing selection for layer ', this.layerName)
504 this.element.classList.remove("layerSelected");
501 } 505 }
502 } 506 }
503 }, 507 },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 3648fda5..788a786e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -71,26 +71,27 @@
71} 71}
72 72
73/******************************************/ 73/******************************************/
74/* line 77, ../scss/Layer.scss */ 74/* line 78, ../scss/Layer.scss */
75.container-layer { 75.container-layer,
76.container-layer.selected {
76 background-color: #474747; 77 background-color: #474747;
77 color: white; 78 color: white;
78 font-size: 12px; 79 font-size: 12px;
79 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 80 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
80} 81}
81 82
82/* line 83, ../scss/Layer.scss */ 83/* line 84, ../scss/Layer.scss */
83.selected .container-layer { 84.selected .container-layer {
84 background-color: #474747; 85 background-color: #474747;
85} 86}
86 87
87/* line 86, ../scss/Layer.scss */ 88/* line 87, ../scss/Layer.scss */
88.selected .container-layer .label-layer { 89.selected .container-layer .label-layer {
89 background-color: #b2b2b2; 90 background-color: #b2b2b2;
90 color: #242424; 91 color: #242424;
91} 92}
92 93
93/* line 91, ../scss/Layer.scss */ 94/* line 92, ../scss/Layer.scss */
94.userlayers .collapsible-label { 95.userlayers .collapsible-label {
95 display: block; 96 display: block;
96 height: 21px; 97 height: 21px;
@@ -103,32 +104,32 @@
103 text-overflow: ellipsis; 104 text-overflow: ellipsis;
104} 105}
105 106
106/* line 103, ../scss/Layer.scss */ 107/* line 104, ../scss/Layer.scss */
107.userlayers .layer-tag { 108.userlayers .layer-tag {
108 position: absolute; 109 position: absolute;
109 top: 3px; 110 top: 3px;
110 left: 20px; 111 left: 20px;
111} 112}
112 113
113/* line 110, ../scss/Layer.scss */ 114/* line 111, ../scss/Layer.scss */
114.layerSelected .label-layer { 115.layerSelected .label-layer {
115 background-color: #b2b2b2; 116 background-color: #b2b2b2;
116 color: #242424; 117 color: #242424;
117} 118}
118 119
119/* line 114, ../scss/Layer.scss */ 120/* line 115, ../scss/Layer.scss */
120.content-layer { 121.content-layer {
121 background-color: #474747; 122 background-color: #474747;
122 color: white; 123 color: white;
123} 124}
124 125
125/* line 118, ../scss/Layer.scss */ 126/* line 119, ../scss/Layer.scss */
126.content-layer .collapsible-label { 127.content-layer .collapsible-label {
127 background-position: 14px 5px; 128 background-position: 14px 5px;
128 border-width: 0px; 129 border-width: 0px;
129} 130}
130 131
131/* line 126, ../scss/Layer.scss */ 132/* line 127, ../scss/Layer.scss */
132.label-layer, 133.label-layer,
133.label-position, 134.label-position,
134.label-transform, 135.label-transform,
@@ -139,20 +140,20 @@
139 cursor: pointer; 140 cursor: pointer;
140} 141}
141 142
142/* line 134, ../scss/Layer.scss */ 143/* line 135, ../scss/Layer.scss */
143.content-layer .collapsible-label, 144.content-layer .collapsible-label,
144.content-layer .collapsible-content, 145.content-layer .collapsible-content,
145.content-layer .layer-tag { 146.content-layer .layer-tag {
146 font-size: 11px; 147 font-size: 11px;
147} 148}
148 149
149/* line 141, ../scss/Layer.scss */ 150/* line 142, ../scss/Layer.scss */
150.label-layer .collapsible-label br, 151.label-layer .collapsible-label br,
151.content-style .editable br { 152.content-style .editable br {
152 display: none; 153 display: none;
153} 154}
154 155
155/* line 145, ../scss/Layer.scss */ 156/* line 146, ../scss/Layer.scss */
156.collapsible-clicker { 157.collapsible-clicker {
157 position: absolute; 158 position: absolute;
158 width: 10px; 159 width: 10px;
@@ -165,23 +166,23 @@
165 background-repeat: no-repeat; 166 background-repeat: no-repeat;
166} 167}
167 168
168/* line 156, ../scss/Layer.scss */ 169/* line 157, ../scss/Layer.scss */
169.collapsible-clicker.collapsible-collapsed { 170.collapsible-clicker.collapsible-collapsed {
170 background-image: url(../images/icon-collapsed.png); 171 background-image: url(../images/icon-collapsed.png);
171} 172}
172 173
173/* line 159, ../scss/Layer.scss */ 174/* line 160, ../scss/Layer.scss */
174.collapsible-content .collapsible-clicker { 175.collapsible-content .collapsible-clicker {
175 left: 12px; 176 left: 12px;
176} 177}
177 178
178/* line 162, ../scss/Layer.scss */ 179/* line 163, ../scss/Layer.scss */
179.container-layer .collapsible-content.collapsible-collapsed { 180.container-layer .collapsible-content.collapsible-collapsed {
180 height: 0px; 181 height: 0px;
181 overflow: hidden; 182 overflow: hidden;
182} 183}
183 184
184/* line 168, ../scss/Layer.scss */ 185/* line 169, ../scss/Layer.scss */
185.label-layer .cssbutton, 186.label-layer .cssbutton,
186.label-style .cssbutton { 187.label-style .cssbutton {
187 width: 14px; 188 width: 14px;
@@ -191,21 +192,21 @@
191 background-repeat: no-repeat; 192 background-repeat: no-repeat;
192} 193}
193 194
194/* line 175, ../scss/Layer.scss */ 195/* line 176, ../scss/Layer.scss */
195.label-layer .button-lock { 196.label-layer .button-lock {
196 background-image: url(../images/icon-lock.png); 197 background-image: url(../images/icon-lock.png);
197 top: 3px; 198 top: 3px;
198 right: 27px; 199 right: 27px;
199} 200}
200 201
201/* line 180, ../scss/Layer.scss */ 202/* line 181, ../scss/Layer.scss */
202.label-layer .button-visible { 203.label-layer .button-visible {
203 background-image: url(../images/icon-eye.png); 204 background-image: url(../images/icon-eye.png);
204 top: 3px; 205 top: 3px;
205 right: 7px; 206 right: 7px;
206} 207}
207 208
208/* line 185, ../scss/Layer.scss */ 209/* line 186, ../scss/Layer.scss */
209.label-style .button-add { 210.label-style .button-add {
210 background-image: url(../images/icon-plus.png); 211 background-image: url(../images/icon-plus.png);
211 width: 15px; 212 width: 15px;
@@ -214,7 +215,7 @@
214 right: 11px; 215 right: 11px;
215} 216}
216 217
217/* line 192, ../scss/Layer.scss */ 218/* line 193, ../scss/Layer.scss */
218.label-style .button-delete { 219.label-style .button-delete {
219 background-image: url(../images/icon-minus.png); 220 background-image: url(../images/icon-minus.png);
220 width: 15px; 221 width: 15px;
@@ -223,28 +224,28 @@
223 right: 31px; 224 right: 31px;
224} 225}