From e55bc6fd6b9bcf7f39e2804db07cdb1cdb1dc962 Mon Sep 17 00:00:00 2001
From: Mikhail Sazanov <m@sazanof.ru>
Date: Mon, 5 Sep 2022 12:25:55 +0300
Subject: [PATCH] Modify attachements view at thread envelope

Signed-off-by: Mikhail Sazanov <m@sazanof.ru>
---
 src/components/MessageAttachment.vue  |  73 +++++++---
 src/components/MessageAttachments.vue | 188 ++++++++++++++++++++------
 src/components/Thread.vue             |   7 +
 3 files changed, 211 insertions(+), 57 deletions(-)

diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 16beebb3a5..b09206a3cd 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -21,14 +21,18 @@
 
 <template>
 	<div class="attachment" :class="{'message-attachment--can-preview': canPreview }" @click="$emit('click', $event)">
-		<img v-if="isImage"
-			class="mail-attached-image"
-			:src="url">
-		<img class="attachment-icon" :src="mimeUrl">
-		<span class="attachment-name"
-			:title="label">{{ name }}
-			<span class="attachment-size">({{ humanReadable(size) }})</span>
-		</span>
+		<div class="mail-attachment-img--wrapper">
+			<img v-if="isImage"
+				class="mail-attached-image"
+				:src="url">
+			<img v-else class="attachment-icon" :src="mimeUrl">
+		</div>
+		<div class="mail-attached--content">
+			<span class="attachment-name"
+				:title="label">{{ name }}
+			</span>
+			<span class="attachment-size">{{ humanReadable(size) }}</span>
+		</div>
 		<Actions :boundaries-element="boundariesElement">
 			<ActionButton
 				v-if="isCalendarEvent"
@@ -233,11 +237,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .attachment {
-	position: relative;
-	display: inline-block;
-	width: calc(100% - 32px);
-	padding: 16px;
+	height: auto;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: calc(33.3334% - 4px);
+    margin: 2px;
+	padding: 5px;
+    position: relative;
+    align-items: center;
+
+	&:hover {
+		border-radius: 6px;
+	}
 }
 
 .attachment:hover,
@@ -249,6 +263,33 @@ export default {
 	}
 }
 
+.mail-attachment-img--wrapper {
+	height: 44px;
+	width: 44px;
+	overflow: hidden;
+	display:flex;
+	justify-content: center;
+	position: relative;
+	border-radius: 6px;
+
+	img {
+		transition: 0.3s;
+		opacity: 1;
+		width: 44px;
+		height: 44px;
+	}
+
+	.mail-attached-image {
+		width: 100px;
+	}
+}
+
+.mail-attached--content {
+	width: calc(100% - 100px);
+	display: flex;
+    flex-direction: column;
+}
+
 .mail-attached-image {
 	display: block;
 	max-width: 100%;
@@ -263,18 +304,19 @@ export default {
 }
 .attachment-name {
 	display: inline-block;
-	width: calc(100% - 72px);
+	width: 100%;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	vertical-align: middle;
-	margin-bottom: 20px;
 }
 
 /* show attachment size less prominent */
 .attachment-size {
 	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
 	opacity: 0.5;
+	font-size: 12px;
+	line-height: 14px;
 }
 
 .attachment-icon {
@@ -283,8 +325,7 @@ export default {
 	margin-bottom: 20px;
 }
 .action-item {
-	display: inline-block !important;
-	position: relative !important;
+	transition: 0.4s;
 }
 .mail-message-attachments {
 	overflow-x: auto;
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 4bce68dc08..8a15ed4f6d 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -20,52 +20,57 @@
   -->
 
 <template>
-	<div class="mail-message-attachments">
-		<div class="attachments">
-			<MessageAttachment
-				v-for="(attachment, idx) in attachments"
-				:id="attachment.id"
-				:key="attachment.id"
-				:file-name="attachment.fileName"
-				:size="attachment.size"
-				:url="attachment.downloadUrl"
-				:is-image="attachment.isImage"
-				:is-calendar-event="attachment.isCalendarEvent"
-				:mime="attachment.mime"
-				:mime-url="attachment.mimeUrl"
-				:can-preview="canPreview(fileInfos[idx])"
-				@click="showViewer(fileInfos[idx])" />
+	<div v-if="attachments.length > 0" class="mail-message-attachments" :class="hasNextLine ? 'has-next-line' : ''">
+		<div class="mail-message-attachments--wrapper" :class="(hasNextLine === true && isToggled === true) ? 'hide' : ''">
+			<div class="attachments">
+				<MessageAttachment
+					v-for="(attachment, idx) in attachments"
+					:id="attachment.id"
+					ref="attachments"
+					:key="attachment.id"
+					:file-name="attachment.fileName"
+					:size="attachment.size"
+					:url="attachment.downloadUrl"
+					:is-image="attachment.isImage"
+					:is-calendar-event="attachment.isCalendarEvent"
+					:mime="attachment.mime"
+					:mime-url="attachment.mimeUrl"
+					:can-preview="canPreview(fileInfos[idx])"
+					@click="showViewer(fileInfos[idx])" />
+			</div>
+		</div>
+		<div v-if="hasNextLine"
+			class="show-more-attachments"
+			@click="isToggled = !isToggled">
+			<ChevronDown v-if="isToggled" :size="24" />
+			<ChevronUp v-if="!isToggled" :size="24" />
+			<span v-if="isToggled">
+				{{ n('mail', 'View {count} more attachment', 'View {count} more attachments', (attachments.length - visible), { count: attachments.length - visible }) }}
+			</span>
+			<span v-else>
+				{{ t('mail', 'View fewer attachments') }}
+			</span>
 		</div>
 		<p v-if="moreThanOne" class="attachments-button-wrapper">
-			<ButtonVue
-				type="secondary"
-				class="attachments-save-to-cloud"
+			<span class="attachment-link"
 				:disabled="savingToCloud"
 				@click="saveAll">
-				<template #icon>
-					<IconLoading v-if="savingToCloud" :size="20" />
-					<IconFolder v-else-if="!savingToCloud" :size="20" />
-				</template>
+				<CloudDownload v-if="!savingToCloud" :size="18" />
+				<IconLoading v-else class="spin" :size="18" />
 				{{ t('mail', 'Save all to Files') }}
-			</ButtonVue>
-			<ButtonVue
-				type="secondary"
-				class="attachments-save-to-cloud"
+			</span>
+			<span class="attachment-link"
 				@click="downloadZip">
-				<template #icon>
-					<IconFolder :size="20" />
-				</template>
+				<Download :size="18" />
 				{{ t('mail', 'Download Zip') }}
-			</ButtonVue>
+			</span>
 		</p>
 	</div>
 </template>
 
 <script>
 import { basename } from '@nextcloud/paths'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
 import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import IconFolder from 'vue-material-design-icons/Folder'
 import { generateUrl } from '@nextcloud/router'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { saveAttachmentsToFiles } from '../service/AttachmentService'
@@ -73,13 +78,20 @@ import { saveAttachmentsToFiles } from '../service/AttachmentService'
 import MessageAttachment from './MessageAttachment'
 import Logger from '../logger'
 
+import Download from 'vue-material-design-icons/Download'
+import CloudDownload from 'vue-material-design-icons/CloudDownload'
+import ChevronDown from 'vue-material-design-icons/ChevronDown'
+import ChevronUp from 'vue-material-design-icons/ChevronUp'
+
 export default {
 	name: 'MessageAttachments',
 	components: {
 		MessageAttachment,
-		ButtonVue,
 		IconLoading,
-		IconFolder,
+		Download,
+		CloudDownload,
+		ChevronDown,
+		ChevronUp,
 	},
 	props: {
 		envelope: {
@@ -93,8 +105,12 @@ export default {
 	},
 	data() {
 		return {
+			visible: 0,
 			savingToCloud: false,
 			showPreview: false,
+			attachmentImageURL: '',
+			hasNextLine: false,
+			isToggled: false,
 		}
 	},
 	computed: {
@@ -125,6 +141,27 @@ export default {
 			})
 		},
 	},
+	mounted() {
+		let prevTop = null
+		this.visible = 0
+		this.$nextTick(function() {
+			if (this.$refs.attachments) {
+				this.$refs.attachments.some((attachment, i) => {
+					const top = attachment.$el.getBoundingClientRect().top
+					if (prevTop !== null && prevTop !== top) {
+						this.isToggled = true
+						this.hasNextLine = true
+						return true
+					} else {
+						prevTop = top
+						this.visible++
+					}
+					return false
+				})
+			}
+		})
+
+	},
 	methods: {
 		canPreview(fileInfo) {
 			return this.previewableFileInfos.includes(fileInfo)
@@ -175,23 +212,92 @@ export default {
 
 <style lang="scss">
 .attachments {
-	width: 230px;
-	position: relative;
-	display: flex;
+	width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 10px 0;
 }
 
 /* show icon + text for Download all button
 		as well as when there is only one attachment */
 .attachments-button-wrapper {
-	gap: 4px;
+	text-align: center;
+	display: flex;
+	align-items: center;
+}
+
+.show-more-attachments {
 	display: flex;
-	justify-content: center;
+    align-items: center;
+	cursor: pointer;
+	padding: 2px 0;
+	color: var(--color-text-lighter);
+
+	span {
+		cursor: pointer;
+	}
+
+	&:hover {
+		color: var(--color-main-text);
+	}
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+.attachment-link {
+	cursor: pointer;
+	display:flex;
+	align-items: center;
+	color: var(--color-text-lighter);
+
+	&:hover {
+		color: var(--color-main-text);
+	}
+
+	span {
+		margin: 0 4px 0 16px;
+	}
+}
+
 .oc-dialog {
 	z-index: 10000000;
 }
 .mail-message-attachments {
-	overflow-x: auto;
-	overflow-y: auto;
+	display:flex;
+	flex-wrap: wrap;
+	padding: 10px 6px 10px 46px;
+	margin-top: 4px;
+	margin-bottom: -40px;
+	position:sticky;
+	bottom:0;
+	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
+}
+.mail-message-attachments--wrapper {
+	display:flex;
+	width:100%;
+	height:auto;
+	overflow: hidden;
+	max-height: none;
+}
+
+.mail-message-attachments--wrapper.hide {
+	display:flex;
+	max-height: 70px;
 }
 </style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index c86c2a7211..d81a968591 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -258,6 +258,13 @@ export default {
 <style lang="scss">
 #mail-message {
 	flex-grow: 1;
+	max-height: calc(100vh - 50px);
+
+	.icon-loading {
+		&:only-child:after {
+			margin-top: 20px;
+		}
+	}
 }
 
 .mail-message-body {