make line sizes match for errors/loading and statuses, make X hitbox bigger, remove attachments, add shorter custom message for empty status preview. fix auto update triggering

src/components/post_status_form/post_status_form.js

@@ -170,6 +170,9 @@ const PostStatusForm = {
     showPreview () {
       return !!this.preview || this.previewLoading
     },
+    emptyStatus () {
+      return this.newStatus.status === '' && this.newStatus.files.length === 0
+    },
     ...mapGetters(['mergedConfig'])
   },
   watch: {
@@ -185,12 +188,9 @@ const PostStatusForm = {
     postStatus (newStatus) {
       if (this.posting) { return }
       if (this.submitDisabled) { return }
-
+      if (this.emptyStatus) {
-      if (this.newStatus.status === '') {
+        this.error = 'Cannot post an empty status with no files'
-        if (this.newStatus.files.length === 0) {
+        return
-          this.error = 'Cannot post an empty status with no files'
-          return
-        }
       }
 
       const poll = this.pollFormVisible ? this.newStatus.poll : {}
@@ -236,13 +236,19 @@ const PostStatusForm = {
       })
     },
     previewStatus (newStatus) {
+      if (this.emptyStatus) {
+        this.preview = { error: this.$t('status.preview_empty') }
+        this.previewLoading = false
+        return
+      }
+
       this.previewLoading = true
       statusPoster.postStatus({
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
-        media: newStatus.files,
+        media: [],
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType,
@@ -267,6 +273,7 @@ const PostStatusForm = {
       this.previewStatus(newStatus)
     }, 750),
     autoPreview () {
+      if (!this.preview) return
       this.previewLoading = true
       this.debouncePreviewStatus(this.newStatus)
     },
@@ -276,12 +283,10 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
-      this.autoPreview()
     },
     removeMediaFile (fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
       this.newStatus.files.splice(index, 1)
-      this.autoPreview()
     },
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}

src/components/post_status_form/post_status_form.vue

@@ -35,12 +35,10 @@
               v-if="previewLoading"
               class="icon-spin3 animate-spin"
             />
-            <a
+            <i
-              class="preview-close"
+              class="preview-close icon-cancel"
               @click.stop.prevent="closePreview"
-            >
+            />
-              <i class="icon-cancel" />
-            </a>
           </span>
           <div
             v-if="!preview"
@@ -392,11 +390,7 @@
   }
 
   .preview-close {
-    margin-left: 0.5em;
+    padding-left: 0.5em;
-  }
-
-  .preview-update {
-    cursor: pointer;
   }
 
   .preview-error {
@@ -411,6 +405,8 @@
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.5em;
+    margin: 0;
+    line-height: 1.4em;
   }
 
   .text-format {

src/i18n/en.json

@@ -639,7 +639,7 @@
     "thread_muted_and_words": ", has words:",
     "preview": "Preview",
     "status_preview": "Status preview",
-    "preview_update": "Update"
+    "preview_empty": "Empty"
   },
   "user_card": {
     "approve": "Approve",