diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php index 0d099c0800..e167e60af3 100644 --- a/lib/Controller/PageController.php +++ b/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', diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue index eb4d9610d3..724af148b5 100755 --- a/src/components/AppSettingsMenu.vue +++ b/src/components/AppSettingsMenu.vue @@ -79,6 +79,13 @@ + + + + @@ -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({ diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue index 60ae0a6343..b9d16502f0 100644 --- a/src/components/Envelope.vue +++ b/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" @@ -35,14 +36,14 @@ fill-color="#f9cf3d" :size="18" class="app-content-list-item-star favorite-icon-style" - :class="{ 'one-line': oneLineLayout, 'favorite-icon-style': !oneLineLayout }" + :class="{ 'one-line': oneLineLayout, 'favorite-icon-style': !oneLineLayout, 'favorite-icon-style--compact': compactMode }" :data-starred="data.flags.flagged ? 'true' : 'false'" @click.prevent="hasWriteAcl ? onToggleFlagged() : false" />
- @@ -91,7 +113,7 @@
@@ -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) @@ -1603,4 +1638,13 @@ export default { justify-content: center; } +.icon-important--compact { + margin-inline-start: 30px; + top: 7px !important; +} + +.favorite-icon-style--compact { + margin-top: 25px; +} + diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue index b83f742ad9..b74ba06021 100644 --- a/src/components/EnvelopeList.vue +++ b/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() { diff --git a/src/components/EnvelopeSkeleton.vue b/src/components/EnvelopeSkeleton.vue index 1b1dd2e163..b5e2608cfe 100644 --- a/src/components/EnvelopeSkeleton.vue +++ b/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; } diff --git a/src/init.js b/src/init.js index 6240254c9e..08830e8db4 100644 --- a/src/init.js +++ b/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', []))