Improve attachments rendering

Signed-off-by: Louis Chemineau <louis@chmn.me>

src/components/Composer/Composer.vue

@@ -265,9 +265,14 @@ export default {
 	computed: {
 		/** @return {boolean} */
 		canPost() {
+			if (Object.values(this.attachments).some(({ data }) => data === null)) {
+				return false
+			}
+
 			if (Object.keys(this.attachments).length > 0) {
 				return true
 			}
+
 			return this.statusContent.length !== 0 && this.statusContent !== '<br>'
 		},
 	},

src/components/PostAttachment.vue

@@ -7,7 +7,7 @@
 				@click="showModal(index)">
 				<MediaAttachment :attachment="item" />
 			</div>
-			<div v-if="attachments.length > 4" class="attachment more-attachments">
+			<div v-if="attachments.length > 4" class="attachment more-attachments" @click="showModal(3)">
 				+
 			</div>
 		</div>
@@ -83,13 +83,14 @@ export default {
 		width: 100%;
 		border-radius: var(--border-radius-large);
 		overflow: hidden;
-		height: 40vh;
+		background: var(--color-background-dark);
 
 		.attachment {
 			flex-grow: 1;
 			flex-shrink: 1;
 			flex-basis: calc(50% - 2px);
 			cursor: pointer;
+			height: 20vh;
 		}
 
 		.more-attachments {
@@ -98,6 +99,10 @@ export default {
 			justify-content: center;
 			font-size: 42px;
 			line-height: 0px;
+
+			&:hover {
+				background: var(--color-background-darker);
+			}
 		}
 	}
 }

src/components/TimelinePost.vue

@@ -26,9 +26,7 @@
 		</div>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else class="post-message" v-html="item.account.note" />
-		<div v-if="hasAttachments" class="post-attachments">
-			<PostAttachment :attachments="item.media_attachments || []" />
-		</div>
+		<PostAttachment v-if="hasAttachments" :attachments="item.media_attachments || []" />
 		<div v-if="$route && $route.params.type !== 'notifications' && !serverData.public" class="post-actions">
 			<NcButton v-tooltip="t('social', 'Reply')"
 				type="tertiary-no-background"