diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/hintable.reel/hintable.js | 8 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 47 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 3 |
3 files changed, 34 insertions, 24 deletions
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index cbfe2d9b..6e3b2aaf 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -157,6 +157,14 @@ exports.Hintable = Montage.create(Editable, { | |||
157 | 157 | ||
158 | this._super(arguments); | 158 | this._super(arguments); |
159 | 159 | ||
160 | /// Remove the phantom "<BR>" element that is generated when | ||
161 | /// content editable element is empty | ||
162 | this._children(this._element, function(item) { | ||
163 | return item.nodeName === 'BR'; | ||
164 | }).forEach(function(item) { | ||
165 | this._element.removeChild(item); | ||
166 | }, this); | ||
167 | |||
160 | if(k === 39) { | 168 | if(k === 39) { |
161 | selection = window.getSelection(); | 169 | selection = window.getSelection(); |
162 | text = selection.baseNode.textContent; | 170 | text = selection.baseNode.textContent; |
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 1aae8d67..2ea1e0f6 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css | |||
@@ -139,12 +139,13 @@ | |||
139 | font-size: 11px; | 139 | font-size: 11px; |
140 | } | 140 | } |
141 | 141 | ||
142 | /* line 132, ../scss/Layer.scss */ | 142 | /* line 133, ../scss/Layer.scss */ |
143 | .label-layer .collapsible-label br { | 143 | .label-layer .collapsible-label br, |
144 | .content-style .editable br { | ||
144 | display: none; | 145 | display: none; |
145 | } | 146 | } |
146 | 147 | ||
147 | /* line 136, ../scss/Layer.scss */ | 148 | /* line 137, ../scss/Layer.scss */ |
148 | .collapsible-clicker { | 149 | .collapsible-clicker { |
149 | position: absolute; | 150 | position: absolute; |
150 | width: 10px; | 151 | width: 10px; |
@@ -157,23 +158,23 @@ | |||
157 | background-repeat: no-repeat; | 158 | background-repeat: no-repeat; |
158 | } | 159 | } |
159 | 160 | ||
160 | /* line 147, ../scss/Layer.scss */ | 161 | /* line 148, ../scss/Layer.scss */ |
161 | .collapsible-clicker.collapsible-collapsed { | 162 | .collapsible-clicker.collapsible-collapsed { |
162 | background-image: url(../images/icon-collapsed.png); | 163 | background-image: url(../images/icon-collapsed.png); |
163 | } | 164 | } |
164 | 165 | ||
165 | /* line 150, ../scss/Layer.scss */ | 166 | /* line 151, ../scss/Layer.scss */ |
166 | .collapsible-content .collapsible-clicker { | 167 | .collapsible-content .collapsible-clicker { |
167 | left: 12px; | 168 | left: 12px; |
168 | } | 169 | } |
169 | 170 | ||
170 | /* line 153, ../scss/Layer.scss */ | 171 | /* line 154, ../scss/Layer.scss */ |
171 | .container-layer .collapsible-content.collapsible-collapsed { | 172 | .container-layer .collapsible-content.collapsible-collapsed { |
172 | height: 0px; | 173 | height: 0px; |
173 | overflow: hidden; | 174 | overflow: hidden; |
174 | } | 175 | } |
175 | 176 | ||
176 | /* line 159, ../scss/Layer.scss */ | 177 | /* line 160, ../scss/Layer.scss */ |
177 | .label-layer .cssbutton, | 178 | .label-layer .cssbutton, |
178 | .label-style .cssbutton { | 179 | .label-style .cssbutton { |
179 | width: 14px; | 180 | width: 14px; |
@@ -183,21 +184,21 @@ | |||
183 | background-repeat: no-repeat; | 184 | background-repeat: no-repeat; |
184 | } | 185 | } |
185 | 186 | ||
186 | /* line 166, ../scss/Layer.scss */ | 187 | /* line 167, ../scss/Layer.scss */ |
187 | .label-layer .button-lock { | 188 | .label-layer .button-lock { |
188 | background-image: url(../images/icon-lock.png); | 189 | background-image: url(../images/icon-lock.png); |
189 | top: 3px; | 190 | top: 3px; |
190 | right: 27px; | 191 | right: 27px; |
191 | } | 192 | } |
192 | 193 | ||
193 | /* line 171, ../scss/Layer.scss */ | 194 | /* line 172, ../scss/Layer.scss */ |
194 | .label-layer .button-visible { | 195 | .label-layer .button-visible { |
195 | background-image: url(../images/icon-eye.png); | 196 | background-image: url(../images/icon-eye.png); |
196 | top: 3px; | 197 | top: 3px; |
197 | right: 7px; | 198 | right: 7px; |
198 | } | 199 | } |
199 | 200 | ||
200 | /* line 176, ../scss/Layer.scss */ | 201 | /* line 177, ../scss/Layer.scss */ |
201 | .label-style .button-add { | 202 | .label-style .button-add { |
202 | background-image: url(../images/icon-plus.png); | 203 | background-image: url(../images/icon-plus.png); |
203 | width: 15px; | 204 | width: 15px; |
@@ -206,7 +207,7 @@ | |||
206 | right: 11px; | 207 | right: 11px; |
207 | } | 208 | } |
208 | 209 | ||
209 | /* line 183, ../scss/Layer.scss */ | 210 | /* line 184, ../scss/Layer.scss */ |
210 | .label-style .button-delete { | 211 | .label-style .button-delete { |
211 | background-image: url(../images/icon-minus.png); | 212 | background-image: url(../images/icon-minus.png); |
212 | width: 15px; | 213 | width: 15px; |
@@ -215,17 +216,17 @@ | |||
215 | right: 31px; | 216 | right: 31px; |
216 | } | 217 | } |
217 | 218 | ||
218 | /* line 190, ../scss/Layer.scss */ | 219 | /* line 191, ../scss/Layer.scss */ |
219 | .collapsible-content .layout-table { | 220 | .collapsible-content .layout-table { |
220 | width: 99.9%; | 221 | width: 99.9%; |
221 | } | 222 | } |
222 | 223 | ||
223 | /* line 193, ../scss/Layer.scss */ | 224 | /* line 194, ../scss/Layer.scss */ |
224 | .content-layer .collapsible-content { | 225 | .content-layer .collapsible-content { |
225 | padding-left: 30px; | 226 | padding-left: 30px; |
226 | } | 227 | } |
227 | 228 | ||
228 | /* line 196, ../scss/Layer.scss */ | 229 | /* line 197, ../scss/Layer.scss */ |
229 | .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { | 230 | .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { |
230 | width: 40%; | 231 | width: 40%; |
231 | height: 20px; | 232 | height: 20px; |
@@ -234,24 +235,24 @@ | |||
234 | text-align: left; | 235 | text-align: left; |
235 | } | 236 | } |
236 | 237 | ||
237 | /* line 203, ../scss/Layer.scss */ | 238 | /* line 204, ../scss/Layer.scss */ |
238 | .collapsible-content .layout-table:first-child { | 239 | .collapsible-content .layout-table:first-child { |
239 | border-top: 1px solid #505050; | 240 | border-top: 1px solid #505050; |
240 | } | 241 | } |
241 | 242 | ||
242 | /* line 207, ../scss/Layer.scss */ | 243 | /* line 208, ../scss/Layer.scss */ |
243 | .collapsible-content .hottextunit { | 244 | .collapsible-content .hottextunit { |
244 | width: auto; | 245 | width: auto; |
245 | } | 246 | } |
246 | 247 | ||
247 | /* line 210, ../scss/Layer.scss */ | 248 | /* line 211, ../scss/Layer.scss */ |
248 | .collapsible-transition { | 249 | .collapsible-transition { |
249 | -webkit-transition-property: height; | 250 | -webkit-transition-property: height; |
250 | -webkit-transition-duration: 200ms; | 251 | -webkit-transition-duration: 200ms; |
251 | -webkit-transition-timing-function: ease-in; | 252 | -webkit-transition-timing-function: ease-in; |
252 | } | 253 | } |
253 | 254 | ||
254 | /* line 218, ../scss/Layer.scss */ | 255 | /* line 219, ../scss/Layer.scss */ |
255 | .editable2 { | 256 | .editable2 { |
256 | height: 20px; | 257 | height: 20px; |
257 | background-color: #242424 !important; | 258 | background-color: #242424 !important; |
@@ -263,29 +264,29 @@ | |||
263 | text-overflow: clip; | 264 | text-overflow: clip; |
264 | } | 265 | } |
265 | 266 | ||
266 | /* line 228, ../scss/Layer.scss */ | 267 | /* line 229, ../scss/Layer.scss */ |
267 | .editable2 br { | 268 | .editable2 br { |
268 | display: inline; | 269 | display: inline; |
269 | } | 270 | } |
270 | 271 | ||
271 | /* line 232, ../scss/Layer.scss */ | 272 | /* line 233, ../scss/Layer.scss */ |
272 | .label-style .disabled { | 273 | .label-style .disabled { |
273 | cursor: default; | 274 | cursor: default; |
274 | } | 275 | } |
275 | 276 | ||
276 | /* styles elements */ | 277 | /* styles elements */ |
277 | /* line 237, ../scss/Layer.scss */ | 278 | /* line 238, ../scss/Layer.scss */ |
278 | .content-style .item-template { | 279 | .content-style .item-template { |
279 | display: none; | 280 | display: none; |
280 | } | 281 | } |
281 | 282 | ||
282 | /* line 240, ../scss/Layer.scss */ | 283 | /* line 241, ../scss/Layer.scss */ |
283 | .content-style .layout-row.selected .layout-cell { | 284 | .content-style .layout-row.selected .layout-cell { |
284 | background-color: #b2b2b2; | 285 | background-color: #b2b2b2; |
285 | color: #242424; | 286 | color: #242424; |
286 | } | 287 | } |
287 | 288 | ||
288 | /* line 244, ../scss/Layer.scss */ | 289 | /* line 245, ../scss/Layer.scss */ |
289 | .style-row { | 290 | .style-row { |
290 | height: 20px; | 291 | height: 20px; |
291 | } | 292 | } |
diff --git a/js/panels/Timeline/Layer.re |