QR filename editing tweaks

LICENSE

@@ -1,5 +1,5 @@
 /*
-* 4chan X - Version 1.2.32 - 2013-08-17
+* 4chan X - Version 1.2.32 - 2013-08-18
 *
 * Licensed under the MIT license.
 * https://github.com/seaweedchan/4chan-x/blob/master/LICENSE

src/General/css/style.css

@@ -774,8 +774,13 @@ input.field.tripped:not(:hover):not(:focus) {
 /* Fake File Input */
 input#qr-filename {
   border: none !important;
-  width: 65%;
+  width: 80%;
   padding: 0px 4px;
+  position: relative;
+  bottom: 1px;
+}
+input#qr-filename:not(.edit) {
+  pointer-events: none;
 }
 #qr-filename,
 #qr-filesize,
@@ -786,6 +791,7 @@ input#qr-filename {
 .has-file #qr-filename,
 .has-file #qr-filesize {
   display: inline-block;
+  background: none;
   margin: 0 0 2px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -793,6 +799,7 @@ input#qr-filename {
 }
 #qr-no-file {
   color: #AAA;
+  padding: 1px 4px;
 }
 #qr-filename-container {
   -moz-box-sizing: border-box;

src/General/html/Features/QuickReply.html

@@ -26,7 +26,6 @@
     <span id=qr-filename-container class=field tabindex=60>
       <span id=qr-no-file>No selected file</span>
       <input id="qr-filename" data-name="filename" spellcheck="false">
-      <span id=qr-filesize></span>
       <span id=qr-extras-container>
         <a id=qr-filerm href=javascript:; title='Remove file'>×</a>
         <a id=dump-button title='Dump list'>+</a>

src/Posting/QuickReply.coffee

@@ -466,6 +466,10 @@ QR =
     e.stopPropagation()
     if e.shiftKey and e.type is 'click'
       return QR.selected.rmFile()
+    if e.ctrlKey and e.type is 'click'
+      $.addClass QR.nodes.filename, 'edit'
+      QR.nodes.filename.focus()
+      return $.on QR.nodes.filename, 'blur', -> $.rmClass QR.nodes.filename, 'edit'
     return if e.target.nodeName is 'INPUT' or (e.keyCode and not [32, 13].contains e.keyCode) or e.ctrlKey
     e.preventDefault()
     QR.nodes.fileInput.click()
@@ -709,22 +713,22 @@ QR =
       delete @filename
       delete @filesize
       @nodes.el.title = null
+      QR.nodes.fileContainer.title = ''
       @nodes.el.style.backgroundImage = null
       @nodes.label.hidden = true if QR.spoiler
       @showFileData()
       URL.revokeObjectURL @URL
 
     updateFilename: ->
-      long = "#{@filename} (#{@filesize})"
+      long = "#{@filename} (#{@filesize}) - Ctrl+click to edit filename"
       @nodes.el.title = long
       return unless @ is QR.selected
-      QR.nodes.filename.title = long
+      QR.nodes.fileContainer.title = long
 
     showFileData: ->
       if @file
         @updateFilename()
         QR.nodes.filename.value       = @filename
-        QR.nodes.filesize.textContent = @filesize
         QR.nodes.spoiler.checked      = @spoiler
         $.addClass QR.nodes.fileSubmit, 'has-file'
       else
@@ -912,7 +916,7 @@ QR =
       charCount:  '#char-count'
       fileSubmit: '#file-n-submit'
       filename:   '#qr-filename'
-      filesize:   '#qr-filesize'
+      fileContainer: '#qr-filename-container'
       fileRM:     '#qr-filerm'
       fileExtras: '#qr-extras-container'
       spoiler:    '#qr-file-spoiler'