remove panel-footer in userpanel, simplify preview header, fix word-wrap in preview

src/components/post_status_form/post_status_form.js

@@ -235,13 +235,13 @@ const PostStatusForm = {
         this.posting = false
       })
     },
-    previewStatus (newStatus) {
+    previewStatus () {
       if (this.emptyStatus) {
         this.preview = { error: this.$t('status.preview_empty') }
         this.previewLoading = false
         return
       }
-
+      const newStatus = this.newStatus
       this.previewLoading = true
       statusPoster.postStatus({
         status: newStatus.status,
@@ -269,18 +269,23 @@ const PostStatusForm = {
         this.previewLoading = false
       })
     },
-    debouncePreviewStatus: debounce(function (newStatus) {
-      this.previewStatus(newStatus)
-    }, 750),
+    debouncePreviewStatus: debounce(function () { this.previewStatus() }, 750),
     autoPreview () {
       if (!this.preview) return
       this.previewLoading = true
-      this.debouncePreviewStatus(this.newStatus)
+      this.debouncePreviewStatus()
     },
     closePreview () {
       this.preview = null
       this.previewLoading = false
     },
+    togglePreview () {
+      if (this.showPreview) {
+        this.closePreview()
+      } else {
+        this.previewStatus()
+      }
+    },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
     },

src/components/post_status_form/post_status_form.vue

@@ -16,30 +16,26 @@
         @drop.stop="fileDrop"
       />
       <div class="form-group">
-        <a
-          v-if="!showPreview"
-          class="preview-start"
-          @click.stop.prevent="previewStatus(newStatus)"
-        >
-          {{ $t('status.preview') }}
-        </a>
+        <div class="preview-heading faint">
+          <a
+            class="preview-toggle faint"
+            @click.stop.prevent="togglePreview"
+          >
+            {{ $t('status.preview') }}
+            <i
+              class="icon-down-open"
+              :style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
+            />
+          </a>
+          <i
+            v-show="previewLoading"
+            class="icon-spin3 animate-spin"
+          />
+        </div>
         <div
-          v-else
+          v-if="showPreview"
           class="preview-container"
         >
-          <span class="preview-heading">
-            <span class="preview-title">
-              {{ $t('status.status_preview') }}
-            </span>
-            <i
-              v-if="previewLoading"
-              class="icon-spin3 animate-spin"
-            />
-            <i
-              class="preview-close icon-cancel"
-              @click.stop.prevent="closePreview"
-            />
-          </span>
           <div
             v-if="!preview"
             class="preview-status"
@@ -369,30 +365,32 @@
     max-width: 10em;
   }
 
-  .preview-start {
-    margin-left: auto;
+  .preview-heading {
+    display: flex;
+    width: 100%;
+
+    .icon-spin3 {
+      margin-left: auto;
+    }
+  }
+
+  .preview-toggle {
+    display: flex;
     cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .icon-down-open {
+    transition: transform 0.1s;
   }
 
   .preview-container {
     margin-bottom: 1em;
   }
 
-  .preview-heading {
-    display: flex;
-    width: 100%;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-  }
-
-  .preview-title {
-    flex-grow: 1;
-  }
-
-  .preview-close {
-    padding-left: 0.5em;
-  }
-
   .preview-error {
     font-style: italic;
     color: $fallback--faint;