Merge pull request #3098 from nextcloud/feature/collapsible-priority-inbox-sections

Make priority inbox sections collapsible

src/components/EnvelopeList.vue

@@ -3,12 +3,21 @@
 		<transition-group name="list">
 			<div id="list-refreshing" key="loading" class="icon-loading-small" :class="{refreshing: refreshing}" />
 			<Envelope
-				v-for="env in envelopes"
+				v-for="env in envelopesToShow"
 				:key="env.uid"
 				:data="env"
 				:folder="folder"
 				@delete="$emit('delete', env.uid)"
 			/>
+			<div
+				v-if="collapsible && envelopes.length > collapseThreshold"
+				:key="'list-collapse-' + this.searchQuery"
+				class="collapse-expand"
+				@click="collapsed = !collapsed"
+			>
+				<template v-if="collapsed">{{ t('mail', 'Show all {nr} messages', {nr: envelopes.length}) }}</template>
+				<template v-else>{{ t('mail', 'Collapse messages') }}</template>
+			</div>
 			<div id="load-more-mail-messages" key="loadingMore" :class="{'icon-loading-small': loadingMore}" />
 		</transition-group>
 	</div>
@@ -35,6 +44,11 @@ export default {
 			type: Array,
 			required: true,
 		},
+		searchQuery: {
+			type: String,
+			required: false,
+			default: undefined,
+		},
 		refreshing: {
 			type: Boolean,
 			required: true,
@@ -43,6 +57,29 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		collapsible: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			collapseThreshold: 5,
+		}
+	},
+	computed: {
+		envelopesToShow() {
+			if (this.collapsible && this.collapsed) {
+				return this.envelopes.slice(0, this.collapseThreshold)
+			}
+			return this.envelopes
+		},
 	},
 }
 </script>
@@ -53,6 +90,13 @@ div {
 	position: relative;
 }
 
+.collapse-expand {
+	text-align: center;
+	margin-top: 10px;
+	cursor: pointer;
+	color: var(--color-text-maxcontrast);
+}
+
 #load-more-mail-messages {
 	margin: 10px auto;
 	padding: 10px;

src/components/Mailbox.vue

@@ -33,9 +33,12 @@
 		v-else
 		:account="account"
 		:folder="folder"
+		:search-query="searchQuery"
 		:envelopes="envelopes"
 		:refreshing="refreshing"
 		:loading-more="loadingMore"
+		:collapsible="collapsible"
+		:collapsed.sync="collapsed"
 		@delete="onDelete"
 	/>
 </template>
@@ -96,9 +99,15 @@ export default {
 			required: false,
 			default: false,
 		},
+		collapsible: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			collapsed: this.collapsible, // collapse by default
 			error: false,
 			refreshing: false,
 			loadingMore: false,

src/components/MailboxMessage.vue

@@ -27,6 +27,7 @@
 						:paginate="false"
 						:search-query="appendToSearch('is:important not:starred')"
 						:is-priority-inbox="true"
+						:collapsible="true"
 						:bus="bus"
 					/>
 					<SectionTitle class="app-content-list-item starred" :name="t('mail', 'Favorites')" />
@@ -37,6 +38,7 @@
 						:paginate="false"
 						:search-query="appendToSearch('is:starred not:important')"
 						:is-priority-inbox="true"
+						:collapsible="true"
 						:bus="bus"
 					/>
 					<SectionTitle class="app-content-list-item other" :name="t('mail', 'Other')" />