From 102fc087583e89faebe654d22ce48a9811ca1bd5 Mon Sep 17 00:00:00 2001
From: Jonas Sulzer <jonas@violoncello.ch>
Date: Thu, 7 Nov 2019 19:10:37 +0100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20message=20iframe=20ve?=
 =?UTF-8?q?rtically=20doesn't=20fit=20the=20container=20/=20available=20sp?=
 =?UTF-8?q?ace?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>
---
 css/mobile.scss                    |  1 -
 src/components/Message.vue         |  1 +
 src/components/MessageHTMLBody.vue | 12 ++++--------
 src/views/Home.vue                 |  2 ++
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/css/mobile.scss b/css/mobile.scss
index f7b82916c7..ca0b0bdbde 100644
--- a/css/mobile.scss
+++ b/css/mobile.scss
@@ -19,7 +19,6 @@
 		background: #fff;
 		width: 100%;
 		left: 0;
-		height: 100%;
 		top: 0;
 	}
 
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 0eb1e92b6d..408a93e4b7 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -286,6 +286,7 @@ export default {
 }
 
 .mail-message-body {
+	flex-grow: 1;
 	margin-bottom: 100px;
 }
 
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index ce08ae2431..5b0b1c1758 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -83,23 +83,19 @@ export default {
 #mail-content {
 	margin-left: 30px;
 	margin-top: 2px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 }
 #mail-message-has-blocked-content {
 	margin-left: 8px;
 }
 
 #message-container {
-	position: relative;
-	width: 100%;
-	height: 0;
-	padding-bottom: 56.25%;
+	flex-grow: 1;
 }
 
 #message-frame {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
 	height: 100%;
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e47e8caab8..129efdfb5a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -103,5 +103,7 @@ export default {
 ::v-deep #app-content #app-content-wrapper .app-content-details {
 	margin: 0 auto;
 	max-width: 900px;
+	display: flex;
+	flex-direction: column;
 }
 </style>

From 1e41543257663b0dae01c11c01680dc2f9cce57b Mon Sep 17 00:00:00 2001
From: Jonas Sulzer <jonas@violoncello.ch>
Date: Thu, 19 Mar 2020 11:52:02 +0100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20floating=20attachment?=
 =?UTF-8?q?=20button=20with=20popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>
---
 css/mobile.scss                       |  5 -----
 src/components/Message.vue            | 28 ++++++++++++++++++++-------
 src/components/MessageAttachment.vue  | 24 ++++-------------------
 src/components/MessageAttachments.vue |  6 ++++--
 4 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/css/mobile.scss b/css/mobile.scss
index ca0b0bdbde..5699a9916f 100644
--- a/css/mobile.scss
+++ b/css/mobile.scss
@@ -49,11 +49,6 @@
 		padding-right: 12px;
 	}
 
-	#mail-content,
-	.mail-message-attachments {
-		margin: 0 10px 50px 30px;
-	}
-
 	/* reply-forward actions align to the far right */
 	#mail-message-header #mail-message-actions {
 		margin-right: 5px;
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 408a93e4b7..5226401c43 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -67,7 +67,12 @@
 				</div>
 				<MessageHTMLBody v-if="message.hasHtmlBody" :url="htmlUrl" />
 				<MessagePlainTextBody v-else :body="message.body" :signature="message.signature" />
-				<MessageAttachments :attachments="message.attachments" />
+				<Popover v-if="message.attachments[0]" class="attachment-popover">
+					<Actions slot="trigger">
+						<ActionButton icon="icon-public icon-attachment">Attachments</ActionButton>
+					</Actions>
+					<MessageAttachments :attachments="message.attachments" />
+				</Popover>
 				<div id="reply-composer"></div>
 			</div>
 		</template>
@@ -77,6 +82,7 @@
 <script>
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Popover from '@nextcloud/vue/dist/Components/Popover'
 import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
 import axios from '@nextcloud/axios'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
@@ -107,6 +113,7 @@ export default {
 		MessageHTMLBody,
 		MessagePlainTextBody,
 		Modal,
+		Popover,
 	},
 	data() {
 		return {
@@ -287,7 +294,8 @@ export default {
 
 .mail-message-body {
 	flex-grow: 1;
-	margin-bottom: 100px;
+	margin-bottom: 20px;
+	position: relative;
 }
 
 #mail-message-header {
@@ -327,13 +335,19 @@ export default {
 	}
 }
 
-#mail-content,
-.mail-message-attachments {
-	margin: 10px 38px 50px 38px;
+.v-popover > .trigger > .action-item {
+	border-radius: 22px;
+	background-color: rgba(127, 127, 127, 0.25) !important;
+}
+
+.attachment-popover {
+	position: absolute;
+	bottom: 0;
+	right: 20px;
 }
 
-.mail-message-attachments {
-	margin-top: 10px;
+.tooltip-inner {
+	text-align: left;
 }
 
 #mail-content iframe {
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 216e6f3fd1..2f0e76f394 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -197,9 +197,10 @@ export default {
 .attachment {
 	position: relative;
 	display: inline-block;
+	width: 200px;
 	border: 1px solid var(--color-border);
 	border-radius: 3px;
-	margin: 0 10px 10px 0;
+	margin: 0 0 5px 0;
 	padding: 5px;
 }
 
@@ -209,24 +210,6 @@ export default {
 	cursor: pointer;
 }
 
-@media only screen and (max-width: 768px) {
-	.attachment {
-		width: calc(100% - 5px);
-	}
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1400px) {
-	.attachment {
-		width: calc(50% - 10px);
-	}
-}
-
-@media only screen and (min-width: 1401px) {
-	.attachment {
-		width: calc(33% - 12px);
-	}
-}
-
 .mail-attached-image {
 	display: block;
 	max-width: 100%;
@@ -273,7 +256,7 @@ export default {
 
 .attachment-name {
 	display: inline-block;
-	width: calc(100% - 108px);
+	width: calc(100% - 72px);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -288,5 +271,6 @@ export default {
 
 .attachment-icon {
 	vertical-align: middle;
+	text-align: left;
 }
 </style>
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index c75261c7b1..f265aafb8b 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -107,13 +107,15 @@ export default {
 </script>
 
 <style>
-.mail-message-attachments {
-	margin-bottom: 20px;
+.attachments {
+	width: 210px;
 }
 
 /* show icon + text for Download all button
 		as well as when there is only one attachment */
 .attachments-save-to-cloud {
+	display: block;
+	margin: 3px auto 0 auto;
 	background-position: 9px center;
 	padding-left: 32px;
 }

From 10044f53888fa05e5f1f8c630e27214043d64269 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 31 Mar 2020 19:09:00 +0200
Subject: [PATCH 3/3] Fix design issues with iFrame and floating attachment
 button

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Message.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 5226401c43..0f351d89d3 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -61,7 +61,7 @@
 					</Modal>
 				</div>
 			</div>
-			<div class="mail-message-body">
+			<div :class="[message.hasHtmlBody ? 'mail-message-body mail-message-body-html' : 'mail-message-body']">
 				<div v-if="message.itineraries.length > 0" class="message-itinerary">
 					<Itinerary :entries="message.itineraries" :message-id="message.messageId" />
 				</div>
@@ -294,7 +294,7 @@ export default {
 
 .mail-message-body {
 	flex-grow: 1;
-	margin-bottom: 20px;
+	margin-bottom: 10px;
 	position: relative;
 }
 
@@ -337,19 +337,27 @@ export default {
 
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
-	background-color: rgba(127, 127, 127, 0.25) !important;
+	background-color: var(--color-background-darker);
 }
 
 .attachment-popover {
-	position: absolute;
-	bottom: 0;
-	right: 20px;
+	position: sticky;
+	bottom: 12px;
+	text-align: center;
 }
 
 .tooltip-inner {
 	text-align: left;
 }
 
+#mail-content {
+	margin: 10px 38px 50px 38px;
+
+	.mail-message-body-html & {
+		margin-bottom: -44px; // accounting for the sticky attachment button
+	}
+}
+
 #mail-content iframe {
 	width: 100%;
 }