More Mayhem-like file selector. #250, #288

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-filename {
-.has-file #qr-filesize {
+  -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;

src/General/html/Features/QuickReply.html

@@ -23,16 +23,13 @@
     <a id=add-post href=javascript:; title="Add a post">+</a>
   </div>
   <div id=file-n-submit>
-    <span id=qr-filename-container class=field tabindex=0>
+    <input type="button" id="qr-file-button" value="Choose files">
-      <span id=qr-no-file>No selected file</span>
+    <span id="qr-no-file">No selected file</span>
-      <input id="qr-filename" data-name="filename" spellcheck="false">
+    <input id="qr-filename" data-name="filename" spellcheck="false">
-      <span id="qr-extras-container">
+    <a href="javascript:;" id="qr-filerm" title="Remove file"><i class="fa fa-times-circle"></i></a>
-        <a href="javascript:;" id="qr-filerm" title="Remove file"><i class="fa fa-times-circle"></i></a>
+    <a href="javascript:;" id="url-button" title="Post from url"><i class="fa fa-link"></i></a>
-        <a href="javascript:;" id="url-button" title="Post from url"><i class="fa fa-link"></i></a>
+    <a href="javascript:;" id="custom-cooldown-button" title="Toggle custom cooldown" class="disabled"><i class="fa fa-clock-o"></i></a>
-        <a href="javascript:;" id="custom-cooldown-button" title="Toggle custom cooldown" class="disabled"><i class="fa fa-clock-o"></i></a>
+    <a href="javascript:;" id="dump-button" title="Dump list"><i class="fa fa-plus-square"></i></a>
-        <a href="javascript:;" id="dump-button" title="Dump list"><i class="fa fa-plus-square"></i></a>
-      </span>
-    </span>
     <label id=qr-spoiler-label>
       <input type=checkbox id=qr-file-spoiler title='Spoiler image'>
     </label>

src/Posting/QR.coffee

@@ -426,15 +426,7 @@ QR =
     else
       cb true, null
 
-  openFileInput: (e) ->
+  openFileInput: ->
-    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()
     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

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