Show attachments inline

Signed-off-by: greta <gretadoci@gmail.com>

4 files changed, 60 insertions, 76 deletions

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 8e42c51a7..8be67c500 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -38,23 +38,13 @@
 			:body="message.body"
 			:signature="message.signature"
 			:message="message" />
-		<Popover v-if="message.attachments[0]" class="attachment-popover">
-			<Actions slot="trigger">
-				<ActionButton icon="icon-public icon-attachment">
-					{{ t('mail', 'Attachments') }}
-				</ActionButton>
-			</Actions>
-			<MessageAttachments v-close-popover="true" :attachments="message.attachments" :envelope="envelope" />
-		</Popover>
+		<MessageAttachments :attachments="message.attachments" :envelope="envelope" />
 		<div id="reply-composer" />
 	</div>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import { generateUrl } from '@nextcloud/router'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
 
 import { html, plain } from '../util/text'
 import { isPgpgMessage } from '../crypto/pgp'
@@ -67,14 +57,11 @@ import MessagePlainTextBody from './MessagePlainTextBody'
 export default {
 	name: 'Message',
 	components: {
-		Actions,
-		ActionButton,
 		Itinerary,
 		MessageAttachments,
 		MessageEncryptedBody,
 		MessageHTMLBody,
 		MessagePlainTextBody,
-		Popover,
 	},
 	props: {
 		envelope: {
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 327bd965e..420b38ba2 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -20,42 +20,53 @@
   -->
 
 <template>
-	<div class="attachment" @click="download">
+	<div class="attachment">
 		<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>
-		<button
-			v-if="isCalendarEvent"
-			class="button attachment-import calendar"
-			:class="{'icon-add': !loadingCalendars, 'icon-loading-small': loadingCalendars}"
-			:disabled="loadingCalendars"
-			:title="t('mail', 'Import into calendar')"
-			@click.stop="loadCalendars" />
-		<button class="button icon-download attachment-download" :title="t('mail', 'Download attachment')" />
-		<button
-			class="attachment-save-to-cloud"
-			:class="{'icon-folder': !savingToCloud, 'icon-loading-small': savingToCloud}"
-			:disabled="savingToCloud"
-			:title="t('mail', 'Save to Files')"
-			@click.stop="saveToCloud" />
-		<div
-			v-on-click-outside="closeCalendarPopover"
-			class="popovermenu bubble attachment-import-popover hidden"
-			:class="{open: showCalendarPopover}">
-			<PopoverMenu :menu="calendarMenuEntries" />
-		</div>
+		<Actions :boundaries-element="boundariesElement">
+			<ActionButton
+				v-if="isCalendarEvent"
+				class="attachment-import calendar"
+				:icon="{'icon-add': !loadingCalendars, 'icon-loading-small': loadingCalendars}"
+				:disabled="loadingCalendars"
+				@click.stop="loadCalendars">
+				{{ t('mail', 'Import into calendar') }}
+			</ActionButton>
+			<ActionButton icon="icon-download"
+				class="attachment-download"
+				@click="download">
+				{{ t('mail', 'Download attachment') }}
+			</ActionButton>
+			<ActionButton
+				class="attachment-save-to-cloud"
+				:icon="{'icon-folder': !savingToCloud, 'icon-loading-small': savingToCloud}"
+				:disabled="savingToCloud"
+				@click.stop="saveToCloud">
+				{{ t('mail', 'Save to Files') }}
+			</ActionButton>
+			<div
+				v-on-click-outside="closeCalendarPopover"
+				class="popovermenu bubble attachment-import-popover hidden"
+				:class="{open: showCalendarPopover}">
+				<PopoverMenu :menu="calendarMenuEntries" />
+			</div>
+		</Actions>
 	</div>
 </template>
 
 <script>
+
 import { formatFileSize } from '@nextcloud/files'
-import { mixin as onClickOutside } from 'vue-on-click-outside'
 import { translate as t } from '@nextcloud/l10n'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { mixin as onClickOutside } from 'vue-on-click-outside'
 import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
 import Logger from '../logger'
 
@@ -66,6 +77,8 @@ export default {
 	name: 'MessageAttachment',
 	components: {
 		PopoverMenu,
+		Actions,
+		ActionButton,
 	},
 	mixins: [onClickOutside],
 	props: {
@@ -133,6 +146,9 @@ export default {
 				}
 			})
 		},
+		boundariesElement() {
+			return document.querySelector('#content-vue')
+		},
 	},
 	methods: {
 		humanReadable(size) {
@@ -209,43 +225,13 @@ export default {
 	border-radius: var(--border-radius);
 	cursor: pointer;
 }
-.mail-attached-image:hover {
-	opacity: 0.8;
-}
-
-.attachment-save-to-cloud,
-.attachment-download,
-.attachment-import {
-	position: absolute;
-	padding: 21px;
-	margin: 0;
-	bottom: 6px;
-	background-color: transparent;
-	border-color: transparent;
-}
-
-.attachment-save-to-cloud {
-	right: 0;
-}
-
-.attachment-download {
-	right: 32px;
-	opacity: 0.6;
-}
-
-.attachment-import {
-	right: 64px;
-}
-
 .attachment-import-popover {
 	right: 32px;
 	top: 42px;
 }
-
-.attachment-import-popover::after {
-	right: 32px;
+.mail-attached-image:hover {
+	opacity: 0.8;
 }
-
 .attachment-name {
 	display: inline-block;
 	width: calc(100% - 72px);
@@ -253,6 +239,7 @@ export default {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	vertical-align: middle;
+	margin-bottom: 20px;
 }
 
 /* show attachment size less prominent */
@@ -264,5 +251,14 @@ export default {
 .attachment-icon {
 	vertical-align: middle;
 	text-align: left;
+	margin-bottom: 20px;
+}
+.action-item {
+	display: inline-block !important;
+	position: relative !important;
+}
+.mail-message-attachments {
+	overflow-x: auto;
+	overflow-y: auto;
 }
 </style>
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index cec355a76..d53229bf5 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -124,7 +124,9 @@ export default {
 
 <style lang="scss">
 .attachments {
-	width: 300px;
+	width: 230px;
+  position: relative;
+  display: flex;
 }
 
 /* show icon + text for Download all button
@@ -136,10 +138,13 @@ export default {
 	display: inline-block;
 	margin: 16px;
 	background-position: 16px center;
-	padding: 12px;
-	padding-left: 44px;
+  padding: 12px 12px 12px 44px;
 }
 .oc-dialog {
 	z-index: 10000000;
 }
+.mail-message-attachments {
+	overflow-x: auto;
+	overflow-y: auto;
+}
 </style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 6c1266b16..86b78e7d1 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -328,11 +328,7 @@ export default {
 }
 
 #mail-content {
-	margin: 10px 38px 50px 60px;
-
-	.mail-message-body-html & {
-		margin-bottom: -44px; // accounting for the sticky attachment button
-	}
+	margin: 10px 38px 0 60px;
 }
 
 #mail-content iframe {