From 8310ae0ff8c013b39254ee16dc0f9a79e1126a12 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Wed, 28 Sep 2022 21:47:40 +0000
Subject: [PATCH] Limit number of attachments in post editor

---
 src/App.vue                   | 5 ++++-
 src/components/PostEditor.vue | 6 ++++++
 src/styles/_mixins.scss       | 6 ++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5ee34d7..f95adbf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,6 +115,10 @@ button {
   &:hover {
     color: $link-hover-color;
   }
+
+  &[disabled] {
+    cursor: initial;
+  }
 }
 
 .btn {
@@ -139,7 +143,6 @@ button {
     background-color: $btn-disabled-background-color !important;
     box-shadow: none;
     color: $btn-disabled-text-color !important;
-    cursor: initial;
   }
 }
 
diff --git a/src/components/PostEditor.vue b/src/components/PostEditor.vue
index e5171f3..7b8e014 100644
--- a/src/components/PostEditor.vue
+++ b/src/components/PostEditor.vue
@@ -37,6 +37,7 @@
           type="button"
           class="icon"
           title="Attach image"
+          :disabled="!canAttachFile()"
           @click="selectAttachment()"
         >
           <img :src="require('@/assets/feather/paperclip.svg')">
@@ -122,6 +123,7 @@ import { renderMarkdownLite } from "@/utils/markdown"
 import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
 
 const visibilityMap = Object.entries(VISIBILITY_MAP)
+const ATTACHMENTS_MAX_NUM = 10
 
 const { currentUser, ensureAuthToken } = $(useCurrentUser())
 const { instance, getActorAddress } = $(useInstanceInfo())
@@ -173,6 +175,10 @@ onMounted(() => {
   }
 })
 
+function canAttachFile(): boolean {
+  return attachments.length < ATTACHMENTS_MAX_NUM
+}
+
 function selectAttachment() {
   if (attachmentUploadInputRef) {
     attachmentUploadInputRef.click()
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index fa33949..1c08810 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -79,6 +79,12 @@
     }
   }
 
+  button.icon[disabled] {
+    img {
+      filter: $secondary-text-colorizer;
+    }
+  }
+
   .icon-small img {
     $icon-size-small: $icon-size * 0.8;