change placeholders to use descriptions, use icons with placeholders, change uploads to use attachment component

src/components/post_status_form/post_status_form.js

@@ -3,6 +3,7 @@ import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
+import Attachment from '../attachment/attachment.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { reject, map, uniqBy } from 'lodash'
@@ -38,7 +39,8 @@ const PostStatusForm = {
     EmojiInput,
     PollForm,
     ScopeSelector,
-    Checkbox
+    Checkbox,
+    Attachment
   },
   mounted () {
     this.resize(this.$refs.textarea)

src/components/post_status_form/post_status_form.vue

@@ -245,31 +245,17 @@
             class="fa button-icon icon-cancel"
             @click="removeMediaFile(file)"
           />
-          <div class="media-upload-container attachment">
-            <img
-              v-if="type(file) === 'image'"
-              class="thumbnail media-upload"
-              :src="file.url"
-            >
-            <video
-              v-if="type(file) === 'video'"
-              :src="file.url"
-              controls
-            />
-            <audio
-              v-if="type(file) === 'audio'"
-              :src="file.url"
-              controls
-            />
-            <a
-              v-if="type(file) === 'unknown'"
-              :href="file.url"
-            >{{ file.url }}</a>
-          </div>
+          <attachment
+            :attachment="file"
+            :set-media="() => $store.dispatch('setMedia', newStatus.files)"
+            size="small"
+            allow-play="false"
+          />
           <input
             v-model="newStatus.mediaDescriptions[file.id]"
             type="text"
             :placeholder="$t('post_status.media_description')"
+            @keydown.prevent.enter=""
           >
         </div>
       </div>
@@ -386,11 +372,9 @@
   }
 
   .media-upload-wrapper {
-    flex: 0 0 auto;
-    max-width: 100%;
-    min-width: 50px;
     margin-right: .2em;
     margin-bottom: .5em;
+    width: 260px;
 
     .icon-cancel {
       display: inline-block;
@@ -405,9 +389,18 @@
       border-bottom-right-radius: 0;
     }
 
+    img, video {
+      object-fit: contain;
+      max-height: 140px;
+    }
+
+    .video {
+      max-height: 140px;
+    }
+
     input {
-      min-width: 300px;
       flex: 1;
+      width: 100%;
     }
   }
 
@@ -423,23 +416,8 @@
 
     .attachment {
       margin: 0;
+      padding: 0;
       position: relative;
-      flex: 0 0 auto;
-      border: 1px solid $fallback--border;
-      border: 1px solid var(--border, $fallback--border);
-      text-align: center;
-
-      audio {
-        min-width: 300px;
-        flex: 1 0 auto;
-      }
-
-      a {
-        display: block;
-        text-align: left;
-        line-height: 1.2;
-        padding: .5em;
-      }
     }
 
     i {