feat: compact view for mail layouts

Signed-off-by: greta <[email protected]>

Author: GretaD

lib/Controller/PageController.php

@@ -224,6 +224,7 @@ public function index(): TemplateResponse {
 			'start-mailbox-id' => $this->preferences->getPreference($this->currentUserId, 'start-mailbox-id'),
 			'follow-up-reminders' => $this->preferences->getPreference($this->currentUserId, 'follow-up-reminders', 'true'),
 			'sort-favorites' => $this->preferences->getPreference($this->currentUserId, 'sort-favorites', 'false'),
+			'compact-mode' => $this->preferences->getPreference($this->currentUserId, 'compact-mode', 'false'),
 		]);
 		$this->initialStateService->provideInitialState(
 			'prefill_displayName',

src/components/AppSettingsMenu.vue

@@ -79,6 +79,13 @@
 					</NcRadioGroupButton>
 				</NcRadioGroup>
 
+				<NcFormBox>
+					<NcFormBoxSwitch
+						v-model="compactMode"
+						:label="t('mail', 'Set compact mode')"
+						@update:modelValue="compactMode = $event" />
+				</NcFormBox>
+
 				<NcRadioGroup :model-value="sortOrder" :label="t('mail', 'Sorting')" @update:modelValue="onSortByDate">
 					<NcRadioGroupButton :label="t('mail', 'Newest first')" value="newest" />
 					<NcRadioGroupButton :label="t('mail', 'Oldest first')" value="oldest" />
@@ -462,6 +469,16 @@ export default {
 			},
 		},
 
+		compactMode: {
+			get() {
+				return this.mainStore.getPreference('compact-mode', 'false') === 'true'
+			},
+
+			set(value) {
+				this.setCompactMode(value)
+			},
+		},
+
 		layoutMessageView: {
 			get() {
 				const preference = this.mainStore.getPreference('layout-message-view')
@@ -526,6 +543,17 @@ export default {
 			}
 		},
 
+		async setCompactMode(value) {
+			try {
+				await this.mainStore.savePreference({
+					key: 'compact-mode',
+					value: value ? 'true' : 'false',
+				})
+			} catch (error) {
+				Logger.error('Could not save preferences', { error })
+			}
+		},
+
 		async setLayoutMessageView(value) {
 			try {
 				await this.mainStore.savePreference({

src/components/Envelope.vue

@@ -20,6 +20,7 @@
 		:name="addresses"
 		:details="formatted()"
 		:one-line="oneLineLayout"
+		:compact="compactMode"
 		:is-read="showImportantIconVariant"
 		:is-important="isImportant"
 		@click.exact="onClick"
@@ -53,20 +54,41 @@
 				@click.prevent="hasWriteAcl ? onToggleJunk() : false" />
 			<div
 				class="hovering-status"
-				:class="{ 'hover-active': hoveringAvatar && !selected }"
+				:class="{ 'hover-active': hoveringAvatar && !selected && !compactMode }"
 				@mouseenter="hoveringAvatar = true"
-				@mouseleave="hoveringAvatar = false"
-				@click.stop.exact.prevent="toggleSelected"
-				@click.shift.exact.prevent="onSelectMultiple">
-				<template v-if="hoveringAvatar || selected">
-					<CheckIcon :size="28" class="check-icon" :class="{ 'app-content-list-item-avatar-selected': selected }" />
+				@mouseleave="hoveringAvatar = false">
+				<template v-if="compactMode">
+					<div
+						class="compact-checkbox-wrapper"
+						@mousedown.stop.prevent
+						@click.stop.prevent>
+						<NcCheckboxRadioSwitch
+							type="checkbox"
+							class="compact-checkbox"
+							:checked="selected"
+							@update:checked="toggleSelected" />
+					</div>
 				</template>
+
 				<template v-else>
-					<Avatar
-						:display-name="addresses"
-						:email="avatarEmail"
-						:fetch-avatar="data.fetchAvatarFromClient"
-						:avatar="data.avatar" />
+					<div
+						@click.stop.exact.prevent="toggleSelected"
+						@click.shift.exact.prevent="onSelectMultiple">
+						<template v-if="hoveringAvatar || selected">
+							<CheckIcon
+								:size="28"
+								class="check-icon"
+								:class="{ 'app-content-list-item-avatar-selected': selected }" />
+						</template>
+
+						<template v-else>
+							<Avatar
+								:display-name="addresses"
+								:email="avatarEmail"
+								:fetch-avatar="data.fetchAvatarFromClient"
+								:avatar="data.avatar" />
+						</template>
+					</div>
 				</template>
 			</div>
 		</template>
@@ -91,7 +113,7 @@
 					</span>
 				</div>
 				<div
-					v-if="data.encrypted || data.previewText"
+					v-if="!compactMode && (data.encrypted || data.previewText)"
 					class="envelope__preview-text"
 					:title="data.summary ? t('mail', 'This summary was AI generated') : null">
 					<NcAssistantIcon v-if="data.summary" :size="15" class="envelope__preview-text__icon" />
@@ -433,7 +455,7 @@ import {
 	NcActionLink as ActionLink,
 	NcActionText as ActionText,
 	NcActionInput,
-	NcActionSeparator, NcAssistantIcon,
+	NcActionSeparator, NcAssistantIcon, NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'
 import escapeHtml from 'escape-html'
 import { mapState, mapStores } from 'pinia'
@@ -506,6 +528,7 @@ export default {
 		EnvelopeSkeleton,
 		JunkIcon,
 		ActionButton,
+		NcCheckboxRadioSwitch,
 		MoveModal,
 		OpenInNewIcon,
 		PlusIcon,
@@ -614,6 +637,10 @@ export default {
 			return this.mainStore.getPreference('layout-message-view', 'threaded') === 'threaded'
 		},
 
+		compactMode() {
+			return this.mainStore.getPreference('compact-mode', 'false') === 'true'
+		},
+
 		hasMultipleRecipients() {
 			if (!this.account) {
 				console.error('account is undefined', {
@@ -871,6 +898,14 @@ export default {
 		},
 	},
 
+	watch: {
+		compactMode(enabled) {
+			if (enabled) {
+				this.hoveringAvatar = false
+			}
+		},
+	},
+
 	mounted() {
 		this.onWindowResize()
 		window.addEventListener('resize', this.onWindowResize)

src/components/EnvelopeList.vue

@@ -132,6 +132,7 @@
 				:select-mode="selectMode"
 				:has-multiple-accounts="hasMultipleAccounts"
 				:selected-envelopes="selectedEnvelopes"
+				:compact-mode="compactMode"
 				@delete="$emit('delete', env.databaseId)"
 				@update:selected="onEnvelopeSelectToggle(env, index, $event)"
 				@select-multiple="onEnvelopeSelectMultiple(env, index)"
@@ -257,6 +258,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		compactMode: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {

src/components/EnvelopeSkeleton.vue

@@ -616,14 +616,22 @@ export default {
 			flex-direction: row;
 			align-content: center;
 			align-items: center;
+			min-width: 0;
 
 			&__name {
+				flex: 0 0 auto;
+				min-width: 0;
+				max-width: 40%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 				align-self: center;
-				min-width: 300px;
 				padding-inline-end: calc(var(--default-grid-baseline) * 2);
 			}
 
 			&__inner {
+				flex: 1 1 auto;
+				min-width: 0;
 				overflow-y: hidden;
 			}
 

src/init.js

@@ -89,6 +89,10 @@ export default function initAfterAppCreation() {
 		key: 'smime-sign-aliases',
 		value: loadState('mail', 'smime-sign-aliases', []),
 	})
+	mainStore.savePreferenceMutation({
+		key: 'compact-mode',
+		value: preferences['compact-mode'],
+	})
 
 	mainStore.setQuickActions(loadState('mail', 'quick-actions', []))