finish up attachment setting (right now only for admin section only)

1 files changed, 37 insertions, 16 deletions

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 3a933511..cc2278b0 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -20,6 +20,23 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
+      <div>{{ $t('settings.url') }}</div>
+      <div class="controls">
+        <input
+          :id="path"
+          class="string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+      <div>{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -30,27 +47,15 @@
         @naturalSizeLoad="onNaturalSizeLoad"
       />
       <div class="controls">
-        <media-upload
-          normal-button
+        <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
           :drop-files="dropFiles"
           @uploaded="setMediaFile"
           @upload-failed="uploadFailed"
+          normal-button
+          :accept-types="acceptTypes"
         />
-        <input
-          :id="path"
-          class="string-input"
-          :disabled="shouldBeDisabled"
-          :value="realDraftMode ? draft : state"
-          @change="update"
-        >
-        {{ ' ' }}
-        <ModifiedIndicator
-          :changed="isChanged"
-          :onclick="reset"
-        />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
     </div>
     <DraftButtons />
@@ -63,8 +68,24 @@
 .AttachmentSetting {
   .attachment {
     display: block;
-    width: 20em;
+    width: 100%;
     height: 15em;
+    margin-bottom: 0.5em;
+  }
+
+  .attachment-input {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    width: 20em;
+  }
+
+  .controls {
+    margin-bottom: 0.5em;
+
+    input, button {
+      width: 100%;
+    }
   }
 }
 </style>