Improve thread scrolling

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
nextcloud · Nov 5, 2020 · 2058279 · 2058279
1 parent 87879f6
commit 2058279
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -24,7 +24,7 @@
 		<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" />
+		<MessageHTMLBody v-if="message.hasHtmlBody" :url="htmlUrl" :full-height="fullHeight" />
 		<MessageEncryptedBody v-else-if="isEncrypted" :body="message.body" :from="from" />
 		<MessagePlainTextBody v-else :body="message.body" :signature="message.signature" />
 		<Popover v-if="message.attachments[0]" class="attachment-popover">
@@ -74,6 +74,11 @@ export default {
 			required: true,
 			type: Object,
 		},
+		fullHeight: {
+			required: false,
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		from() {

diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
@@ -7,7 +7,7 @@
 			</button>
 		</div>
 		<div v-if="loading" class="icon-loading" />
-		<div id="message-container" :class="{hidden: loading}">
+		<div id="message-container" :class="{hidden: loading, scroll: !fullHeight}">
 			<iframe ref="iframe"
 				class="message-frame"
 				:title="t('mail', 'Message frame')"
@@ -32,6 +32,11 @@ export default {
 			type: String,
 			required: true,
 		},
+		fullHeight: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -116,8 +121,12 @@ export default {
 
 #message-container {
 	flex: 1;
-	max-height: 50vh;
-	overflow: auto;
+
+	// TODO: collapse quoted text and remove inner scrollbar
+	&.scroll {
+		max-height: 50vh;
+		overflow-y: auto;
+	}
 }
 
 .message-frame {

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
@@ -15,13 +15,16 @@
 					</div>
 				</div>
 			</div>
-			<ThreadEnvelope v-for="env in thread"
-				:key="env.databaseId"
-				:envelope="env"
-				:mailbox-id="$route.params.mailboxId"
-				:expanded="expandedThreads.includes(env.databaseId)"
-				@move="onMove(env.databaseId)"
-				@toggleExpand="toggleExpand(env.databaseId)" />
+			<div class="mail-thread-envelopes">
+				<ThreadEnvelope v-for="env in thread"
+					:key="env.databaseId"
+					:envelope="env"
+					:mailbox-id="$route.params.mailboxId"
+					:expanded="expandedThreads.includes(env.databaseId)"
+					:full-height="thread.length === 1"
+					@move="onMove(env.databaseId)"
+					@toggleExpand="toggleExpand(env.databaseId)" />
+			</div>
 		</template>
 	</AppContentDetails>
 </template>
@@ -163,7 +166,15 @@ export default {
 
 <style lang="scss">
 #mail-message {
-	flex-grow: 1;
+	height: calc(100vh - var(--header-height));
+}
+
+.mail-thread-envelopes {
+	width: 100%;
+	height: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+	overflow-y: auto;
 }
 
 .mail-message-body {
@@ -177,28 +188,20 @@ export default {
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	padding: 30px 0;
+	padding: 5px 0;
 	// somehow ios doesn't care about this !important rule
 	// so we have to manually set left/right padding to chidren
 	// for 100% to be used
 	box-sizing: content-box !important;
-	height: 44px;
 	width: 100%;
-
-	z-index: 100;
-	position: fixed; // ie fallback
-	position: -webkit-sticky; // ios/safari fallback
-	position: sticky;
-	top: var(--header-height);
-	background: -webkit-linear-gradient(var(--color-main-background), var(--color-main-background) 80%, rgba(255,255,255,0));
-	background: -o-linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
-	background: -moz-linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
-	background: linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
+	border-bottom: 1px solid var(--color-border);
 }
 
 #mail-thread-header-fields {
 	// initial width
 	width: 0;
+	max-width: 900px;
+	margin: 0 auto;
 	padding-left: 60px;
 	// grow and try to fill 100%
 	flex: 1 1 auto;

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
@@ -141,7 +141,10 @@
 			</div>
 		</div>
 		<Loading v-if="loading" />
-		<Message v-else-if="message" :envelope="envelope" :message="message" />
+		<Message v-else-if="message"
+			:envelope="envelope"
+			:message="message"
+			:full-height="fullHeight" />
 		<Error v-else-if="error"
 			:error="error && error.message ? error.message : t('mail', 'Not found')"
 			:message="errorMessage"
@@ -202,6 +205,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		fullHeight: {
+			required: false,
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -467,11 +475,11 @@ export default {
 
 		&.app-content-list-item-star {
 			background-image: none;
-			position: absolute;
 			opacity: 1;
-			width: 16px;
+			width: 40px;
 			height: 16px;
-			margin-left: -1px;
+			margin-left: -41px;
+			z-index: 50;
 			display: flex;
 
 			&:hover,

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -101,7 +101,6 @@ export default {
 <style lang="scss" scoped>
 ::v-deep .app-content #app-content-wrapper .app-content-details {
 	margin: 0 auto;
-	max-width: 900px;
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 100%;