NEW: floating attachment button with popover

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

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;

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 {

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>

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;
 }