@@ -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" />
-
-
+ @mouseleave="hoveringAvatar = 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', []))