diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 12 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 75 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 184 |
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 |