Improve caption editor usability, new 'add attachment' affordance

js/views/conversation_view.js

@@ -156,6 +156,11 @@
         'attachments-changed',
         this.toggleMicrophone
       );
+      this.listenTo(
+        this.fileInput,
+        'choose-attachment',
+        this.onChooseAttachment
+      );
 
       const getHeaderProps = () => {
         const expireTimer = this.model.get('expireTimer');
@@ -275,8 +280,10 @@
     },
 
     onChooseAttachment(e) {
-      e.stopPropagation();
-      e.preventDefault();
+      if (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
 
       this.$('input.file-input').click();
     },

js/views/file_input_view.js

@@ -86,6 +86,7 @@
 
       return {
         attachments,
+        onAddAttachment: this.onAddAttachment.bind(this),
         onClickAttachment: this.onClickAttachment.bind(this),
         onCloseAttachment: this.onCloseAttachment.bind(this),
         onClose: this.onClose.bind(this),
@@ -97,18 +98,15 @@
         url: attachment.videoUrl || attachment.url,
         caption: attachment.caption,
         attachment,
-        onChangeCaption,
+        onSave,
       });
 
-      const update = () => {
-        this.captionEditorView.update(getProps());
-      };
-
-      const onChangeCaption = caption => {
+      const onSave = caption => {
         // eslint-disable-next-line no-param-reassign
         attachment.caption = caption;
+        this.captionEditorView.remove();
+        Signal.Backbone.Views.Lightbox.hide();
         this.render();
-        update();
       };
 
       this.captionEditorView = new Whisper.ReactWrapperView({
@@ -126,6 +124,10 @@
       this.render();
     },
 
+    onAddAttachment() {
+      this.trigger('choose-attachment');
+    },
+
     onClose() {
       this.attachments = [];
       this.trigger('attachments-changed');