Improve thread scrolling

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
nextcloud · Nov 4, 2020 · 25540ec · 25540ec
1 parent ca3bf77
commit 25540ec
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 22 deletions.
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
@@ -115,9 +115,10 @@ export default {
 }
 
 #message-container {
-	flex: 1;
+	// TODO: collapse quoted text and remove inner scrollbar
 	max-height: 50vh;
-	overflow: auto;
+	overflow-y: auto;
+	flex: 1;
 }
 
 .message-frame {

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
@@ -15,13 +15,15 @@
 					</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)"
+					@move="onMove(env.databaseId)"
+					@toggleExpand="toggleExpand(env.databaseId)" />
+			</div>
 		</template>
 	</AppContentDetails>
 </template>
@@ -163,7 +165,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 +187,26 @@ 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%;
+	border-bottom: 1px solid var(--color-border);
 
 	z-index: 100;
-	position: fixed; // ie fallback
+	position: relative; // 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));
+	top: 0;
 }
 
 #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
@@ -467,11 +467,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%;