Merge pull request #2222 from nextcloud/fix/2110/html-iframe-vertical…

…ly-fit-ccontainer 🐛 FIX: message iframe vertically doesn't fit the container / available space
nextcloud · Mar 31, 2020 · 78ff17c · 78ff17c
2 parents 7fb51f5 + 10044f5
commit 78ff17c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 44 deletions.
diff --git a/css/mobile.scss b/css/mobile.scss
@@ -19,7 +19,6 @@
 		background: #fff;
 		width: 100%;
 		left: 0;
-		height: 100%;
 		top: 0;
 	}
 
@@ -50,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
@@ -61,13 +61,18 @@
 					</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>
 				<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 {
@@ -286,7 +293,9 @@ export default {
 }
 
 .mail-message-body {
-	margin-bottom: 100px;
+	flex-grow: 1;
+	margin-bottom: 10px;
+	position: relative;
 }
 
 #mail-message-header {
@@ -326,13 +335,27 @@ export default {
 	}
 }
 
-#mail-content,
-.mail-message-attachments {
-	margin: 10px 38px 50px 38px;
+.v-popover > .trigger > .action-item {
+	border-radius: 22px;
+	background-color: var(--color-background-darker);
+}
+
+.attachment-popover {
+	position: sticky;
+	bottom: 12px;
+	text-align: center;
 }
 
-.mail-message-attachments {
-	margin-top: 10px;
+.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 {

diff --git 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
@@ -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;
 }

diff --git 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
@@ -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>