Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
4chan_x.user.js
View File

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

12
script.coffee
View File

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