Sensible visual feedback when hovering over the delete button; simpler resetFileInput, fix it for Firefox; moz prefixed box-sizing.

This commit is contained in:
Nicolas Stepien 2012-01-18 21:34:04 +01:00
parent 49ff1e29a7
commit 8b780c9f94
2 changed files with 14 additions and 11 deletions

View File

@ -1320,11 +1320,7 @@
if (this.multiple) return qr.resetFileInput();
},
resetFileInput: function() {
var clone, el;
el = $('[type=file]', qr.el);
clone = el.cloneNode();
$.on(clone, 'change', qr.fileInput);
return $.replace(el, clone);
return $('[type=file]', qr.el).value = null;
},
replies: [],
reply: (function() {
@ -1337,7 +1333,7 @@
this.el = $.el('a', {
className: 'preview',
href: 'javascript:;',
innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
innerHTML: '<a class=remove>x</a><label hidden><input type=checkbox></label><span></span>'
});
$.on(this.el, 'click', function() {
return _this.select();
@ -3116,6 +3112,7 @@ a[href="javascript:;"] {\
min-width: 300px;\
overflow: hidden;\
box-sizing: border-box;\
-moz-box-sizing: border-box;\
padding: 0 2px;\
}\
#qr > .move > span {\
@ -3171,6 +3168,7 @@ a[href="javascript:;"] {\
background-size: cover;\
border: 1px solid #666;\
box-sizing: border-box;\
-moz-box-sizing: border-box;\
display: inline-block;\
height: 90px; width: 90px;\
margin: 5px; padding: 2px;\
@ -3197,6 +3195,9 @@ a[href="javascript:;"] {\
font-weight: 700;\
padding: 3px;\
}\
.remove:hover::after {\
content: " Remove";\
}\
#addReply {\
color: #333;\
font-size: 3.5em;\

View File

@ -976,10 +976,7 @@ qr =
$.addClass qr.el, 'dump'
qr.resetFileInput() if @multiple # reset input
resetFileInput: ->
el = $ '[type=file]', qr.el
clone = el.cloneNode()
$.on clone, 'change', qr.fileInput
$.replace el, clone
$('[type=file]', qr.el).value = null
replies: []
@ -1003,7 +1000,7 @@ qr =
@el = $.el 'a',
className: 'preview'
href: 'javascript:;'
innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
innerHTML: '<a class=remove>x</a><label hidden><input type=checkbox></label><span></span>'
$.on @el, 'click', => @select()
$.on $('.remove', @el), 'click', (e) =>
e.stopPropagation()
@ -2460,6 +2457,7 @@ a[href="javascript:;"] {
min-width: 300px;
overflow: hidden;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 2px;
}
#qr > .move > span {
@ -2515,6 +2513,7 @@ a[href="javascript:;"] {
background-size: cover;
border: 1px solid #666;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: inline-block;
height: 90px; width: 90px;
margin: 5px; padding: 2px;
@ -2541,6 +2540,9 @@ a[href="javascript:;"] {
font-weight: 700;
padding: 3px;
}
.remove:hover::after {
content: " Remove";
}
#addReply {
color: #333;
font-size: 3.5em;