From c1faeacee86ee68bab2aaabe3dc814b636426242 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Thu, 21 May 2020 15:48:35 +0300
Subject: [PATCH] Set file limit in the chat posting form

---
 src/components/chat/chat.vue                    |  1 +
 src/components/media_upload/media_upload.js     |  3 ++-
 src/components/media_upload/media_upload.vue    | 17 +++++++++++++++++
 .../post_status_form/post_status_form.js        |  3 ++-
 .../post_status_form/post_status_form.vue       |  1 +
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 9db3f4b6..cd4c047a 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -70,6 +70,7 @@
               :polls-available="false"
               :auto-focus="true"
               :placeholder="formPlaceholder"
+              :file-limit="1"
               max-height="160"
               @resize="handleResize"
               @posted="onPosted"
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index f457d022..9e4bc536 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -62,7 +62,8 @@ const mediaUpload = {
     }
   },
   props: [
-    'dropFiles'
+    'dropFiles',
+    'disabled'
   ],
   watch: {
     'dropFiles': function (fileInfos) {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 0fc305ac..d1d842dc 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="media-upload"
+    :class="{ disabled: disabled }"
     @drop.prevent
     @dragover.prevent="fileDrag"
     @drop="fileDrop"
@@ -19,6 +20,7 @@
       />
       <input
         v-if="uploadReady"
+        :disabled="disabled"
         type="file"
         style="position: fixed; top: -100em"
         multiple="true"
@@ -31,7 +33,22 @@
 <script src="./media_upload.js" ></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .media-upload {
+  &.disabled {
+    .new-icon {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      i, label {
+        color: $fallback--faint;
+        color: var(--faint, $fallback--faint);
+      }
+    }
+  }
+
   .label {
     display: inline-block;
   }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index dcb6220d..e93d1733 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -40,7 +40,8 @@ const PostStatusForm = {
     'maxHeight',
     'poster',
     'preserveFocus',
-    'autoFocus'
+    'autoFocus',
+    'fileLimit'
   ],
   components: {
     MediaUpload,
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index cc82f8f4..6acfd317 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -172,6 +172,7 @@
             ref="mediaUpload"
             class="media-upload-icon"
             :drop-files="dropFiles"
+            :disabled="newStatus.files.length >= fileLimit"
             @uploading="disableSubmit"
             @uploaded="addMediaFile"
             @upload-failed="uploadFailed"