Add an X icon to clear error message from post status form, hack to allow posting empty statuses if they have attachments

2 files changed, 15 insertions, 0 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index af5b81d4..d028b9ec 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -88,6 +88,16 @@ const PostStatusForm = {
     },
     postStatus (newStatus) {
       if (this.posting) { return }
+
+      if (this.newStatus.status === '') {
+        if (this.newStatus.files.length > 0) {
+          this.newStatus.status = '\u200b' // hack
+        } else {
+          this.error = 'Cannot post an empty status with no files'
+          return;
+        }
+      }
+
       this.posting = true
       statusPoster.postStatus({
         status: newStatus.status,
@@ -142,6 +152,9 @@ const PostStatusForm = {
       if (e.target.value === '') {
         e.target.style.height = '16px'
       }
+    },
+    clearError () {
+      this.error = null
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e775c45e..ec479215 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -22,6 +22,7 @@
       </div>
       <div class='error' v-if="error">
         Error: {{ error }}
+        <i class="icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -71,6 +72,7 @@
        background-color: rgba(255, 48, 16, 0.65);
        padding: 0.25em;
        margin: 0.35em;
+       display: flex;
      }
 
      .attachments {