diff --git a/src/General/css/style.css b/src/General/css/style.css index ababa55fa..01dc2ba9d 100755 --- a/src/General/css/style.css +++ b/src/General/css/style.css @@ -1173,17 +1173,6 @@ input[name="Default Volume"] { -webkit-flex-direction: row; flex-direction: row; } -#url-button, #custom-cooldown-button, #dump-button { - width: 10%; - margin: 0; - margin-right: 4px; - font: 13px sans-serif; - padding: 1px 0px 2px; - opacity: 0.6; -} -#custom-cooldown-button.disabled { - opacity: 0.27; -} .persona .field { -webkit-flex: 1; flex: 1; @@ -1208,6 +1197,7 @@ input.field.tripped:not(:hover):not(:focus) { #qr textarea { resize: both; } + /* Noscript Recaptcha */ .captcha-img { margin: 0px; @@ -1227,6 +1217,7 @@ input.field.tripped:not(:hover):not(:focus) { #qr-captcha-iframe { display: none; } + /* Recaptcha v2 */ #qr .captcha-root { position: relative; @@ -1259,81 +1250,59 @@ input.field.tripped:not(:hover):not(:focus) { #qr textarea { min-width: 100%; } -#qr [type="submit"] { - width: 25%; - vertical-align: top; -} -:root.webkit #qr [type="submit"] { - height: 24px; -} #qr label input[type="checkbox"] { position: relative; top: 2px; } + /* Fake File Input */ +#file-n-submit { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; +} input#qr-filename { border: none !important; - width: 80%; - padding: 0px 4px; - position: relative; - bottom: 1px; background: none !important; } -input#qr-filename:not(.edit) { - pointer-events: none; -} #qr-filename, -#qr-filesize, .has-file #qr-no-file { display: none; } #qr-no-file, -.has-file #qr-filename, -.has-file #qr-filesize { +.has-file #qr-filename { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; display: inline-block; - margin: 0 0 2px; + padding: 0px 4px; overflow: hidden; text-overflow: ellipsis; - vertical-align: top; } #qr-no-file { color: #AAA; - padding: 1px 4px; -} -#qr-filename-container { - -moz-box-sizing: border-box; - display: inline-block; - position: relative; - width: 100px; - min-width: 74.6%; - max-width: 74.6%; - margin-right: 0.4%; - margin-top: 1px; - overflow: hidden; - padding: 2px 1px 0; - height: 22px; -} -#qr-filename-container:hover { - cursor: text; -} -#qr-extras-container { - position: absolute; - right: 0px; -} -#qr-filerm { - margin-right: 3px; - z-index: 2; -} -#file-n-submit { - height: 23px; -} -#file-n-submit:not(.custom-cooldown) #custom-cooldown-button { - display: none; } #qr input[type="file"] { visibility: hidden; position: absolute; } + +/* QR Icons */ +#file-n-submit > a { + margin: 0; + margin-right: 4px; + font: 13px sans-serif; +} +#url-button, #custom-cooldown-button, #dump-button { + opacity: 0.6; +} +#custom-cooldown-button.disabled { + opacity: 0.27; +} +#file-n-submit:not(.custom-cooldown) #custom-cooldown-button { + display: none; +} + /* Thread Select / Spoiler Label */ #qr select[data-name="thread"] { float: right; @@ -1349,14 +1318,11 @@ input#qr-filename:not(.edit) { #qr.has-spoiler #file-n-submit:not(.has-file) #qr-spoiler-label { display: none; } -#qr.has-spoiler .has-file #qr-filename-container { - max-width: 67.9%; - min-width: 67.9%; -} #qr-spoiler-label input { position: relative; top: 3px; } + /* Dumping UI */ .dump #dump-list-container { display: block; diff --git a/src/General/html/Features/QuickReply.html b/src/General/html/Features/QuickReply.html index 4872e8676..696dd87e5 100755 --- a/src/General/html/Features/QuickReply.html +++ b/src/General/html/Features/QuickReply.html @@ -23,16 +23,13 @@ +
- - No selected file - - - - - - - - + + No selected file + + + + + diff --git a/src/Posting/QR.coffee b/src/Posting/QR.coffee index a16d9972b..b301abe69 100644 --- a/src/Posting/QR.coffee +++ b/src/Posting/QR.coffee @@ -426,15 +426,7 @@ QR = else cb true, null - openFileInput: (e) -> - e.stopPropagation() - if e.shiftKey and e.type is 'click' - return QR.selected.rmFile() - if (e.ctrlKey or e.metaKey) and e.type is 'click' - $.addClass QR.nodes.filename, 'edit' - QR.nodes.filename.focus() - return if e.target.nodeName is 'INPUT' or (e.keyCode and e.keyCode not in [32, 13]) or e.ctrlKey - e.preventDefault() + openFileInput: -> QR.nodes.fileInput.click() generatePostableThreadsList: -> @@ -481,10 +473,9 @@ QR = setNode 'addPost', '#add-post' setNode 'charCount', '#char-count' setNode 'fileSubmit', '#file-n-submit' + setNode 'fileButton', '#qr-file-button' setNode 'filename', '#qr-filename' - setNode 'fileContainer', '#qr-filename-container' setNode 'fileRM', '#qr-filerm' - setNode 'fileExtras', '#qr-extras-container' setNode 'spoiler', '#qr-file-spoiler' setNode 'spoilerPar', '#qr-spoiler-label' setNode 'status', '[type=submit]' @@ -550,17 +541,14 @@ QR = nodes.flashTag.dataset.default = '4' $.add nodes.form, nodes.flashTag - $.on nodes.filename.parentNode, 'click keydown', QR.openFileInput - + $.on nodes.fileButton, 'click', QR.openFileInput $.on nodes.autohide, 'change', QR.toggleHide $.on nodes.close, 'click', QR.close $.on nodes.dumpButton, 'click', -> nodes.el.classList.toggle 'dump' $.on nodes.urlButton, 'click', QR.handleUrl $.on nodes.addPost, 'click', -> new QR.post true $.on nodes.form, 'submit', QR.submit - $.on nodes.filename, 'blur', -> $.rmClass @, 'edit' $.on nodes.fileRM, 'click', -> QR.selected.rmFile() - $.on nodes.fileExtras, 'click', (e) -> e.stopPropagation() $.on nodes.spoiler, 'change', -> QR.selected.nodes.spoiler.click() $.on nodes.fileInput, 'change', QR.handleFiles $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown diff --git a/src/Posting/QR.post.coffee b/src/Posting/QR.post.coffee index f13209bd1..d32b72adc 100644 --- a/src/Posting/QR.post.coffee +++ b/src/Posting/QR.post.coffee @@ -206,17 +206,17 @@ QR.post = class delete @filename delete @filesize @nodes.el.title = null - QR.nodes.fileContainer.title = '' + QR.nodes.filename.title = '' @nodes.el.style.backgroundImage = null @nodes.label.hidden = true if QR.spoiler @showFileData() URL.revokeObjectURL @URL updateFilename: -> - long = "#{@filename} (#{@filesize})\nCtrl/\u2318+click to edit filename. Shift+click to clear." + long = "#{@filename} (#{@filesize})" @nodes.el.title = long return unless @ is QR.selected - QR.nodes.fileContainer.title = long + QR.nodes.filename.title = long showFileData: -> if @file