Merge pull request #7609 from nextcloud/enhancement/thread-message-lo…

…ading Improve thread message loading screen
nextcloud · Nov 16, 2022 · db8062c · db8062c
2 parents fd06eb1 + 78ee984
commit db8062c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
@@ -1,5 +1,5 @@
 <template>
-	<div id="mail-content">
+	<div class="html-message-body">
 		<MdnRequest :message="message" />
 		<div v-if="hasBlockedContent" id="mail-message-has-blocked-content" style="color: #000000">
 			{{ t('mail', 'The images have been blocked to protect your privacy.') }}
@@ -155,7 +155,7 @@ export default {
 
 <style lang="scss" scoped>
 // account for 8px margin on iframe body
-#mail-content {
+.html-message-body {
 	margin-left: 50px;
 	margin-top: 2px;
 	display: flex;

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
@@ -36,8 +36,8 @@
 			</div>
 			<!-- Show inner loading screen only if we have at least one message of the thread -->
 			<Loading v-if="loading && thread.length" :hint="t('mail', 'Loading messages')" />
-			<ThreadEnvelope v-else
-				v-for="env in thread"
+			<ThreadEnvelope v-for="env in thread"
+				v-else
 				:key="env.databaseId"
 				:envelope="env"
 				:mailbox-id="$route.params.mailboxId"

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
@@ -22,9 +22,9 @@
   -->
 
 <template>
-	<div class="envelope">
-		<div class="envelope--header"
-			:class="{'list-item-style' : expanded }">
+	<div class="envelope"
+		:class="{'envelope--expanded' : expanded }">
+		<div class="envelope__header">
 			<Avatar v-if="envelope.from && envelope.from[0]"
 				:email="envelope.from[0].email"
 				:display-name="envelope.from[0].label"
@@ -500,6 +500,15 @@ export default {
 			padding-bottom: 0;
 		}
 
+		&__header {
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: 10px;
+			border-radius: var(--border-radius);
+			min-height: 68px; /* prevents jumping between open/collapsed */
+		}
+
 		.subline {
 			margin-left: 8px;
 			color: var(--color-text-maxcontrast);
@@ -508,15 +517,10 @@ export default {
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
-	}
 
-	.envelope--header {
-		position: relative;
-		display: flex;
-		align-items: center;
-		padding: 10px;
-		border-radius: var(--border-radius);
-		min-height: 68px; /* prevents jumping between open/collapsed */
+		&--expanded {
+			min-height: 350px;
+		}
 	}
 	.left {
 		flex-grow: 1;
@@ -596,9 +600,6 @@ export default {
 		overflow: hidden;
 		left: 4px;
 	}
-	.envelope--header.list-item-style {
-		border-radius: 16px;
-	}
 	.junk-favorite-position-with-tag-subline {
 		margin-bottom: 14px !important;
 	}