fixup! feat: make multiselect menu more discoverable

Signed-off-by: greta <[email protected]>
nextcloud · Dec 10, 2024 · c37d26a · c37d26a
1 parent a999ed9
commit c37d26a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 30 deletions.
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
@@ -43,7 +43,8 @@
 				:class="{ 'one-line': oneLineLayout, 'junk-icon-style': !oneLineLayout }"
 				:data-starred="data.flags.$junk ? 'true' : 'false'"
 				@click.prevent="hasWriteAcl ? onToggleJunk() : false" />
-			<div class="app-content-list-item-icon"
+			<div class="hovering-status"
+				:class="{ 'hover-active': hoveringAvatar && !selected }"
 				@mouseenter="hoveringAvatar = true"
 				@mouseleave="hoveringAvatar = false"
 				@click.stop.prevent="toggleSelected">
@@ -1123,13 +1124,18 @@ export default {
 	background-color: var(--color-primary-element);
 	color: var(--color-primary-light);
 	border-radius: 32px;
+	&:hover {
+		background-color: var(--color-primary-element);
+		color: var(--color-primary-light);
+		border-radius: 32px;
+	}
 }
-.check-icon {
-	color: var(--color-primary-light);
+.hover-active {
 	&:hover {
 		color: var(--color-primary-hover);
 		background-color: var(--color-primary-light-hover);
 		border-radius: 32px;
 	}
 }
+
 </style>
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
@@ -7,13 +7,18 @@
 		<transition name="multiselect-header">
 			<div v-if="selectMode" key="multiselect-header" class="multiselect-header">
 				<div class="action-buttons">
-					<NcButton type="tertiary"
-						:title="areAllSelectedRead ? n('mail', 'Mark {number} unread', 'Mark {number} unread', selection.length, { number: selection.length }) : n('mail', 'Mark {number} read', 'Mark {number} read', selection.length, { number: selection.length })"
-						@click.prevent="markSelectedSeenOrUnseen">
-						<EmailUnread v-if="areAllSelectedRead"
-							:size="16" />
-						<EmailRead v-else
-							:size="16" />
+					<NcButton v-if="isAtLeastOneSelectedUnread"
+						type="tertiary"
+						:title="n('mail', 'Mark {number} read', 'Mark {number} read', selection.length, { number: selection.length })"
+						@click.prevent="markSelectedRead">
+						<EmailRead :size="16" />
+					</NcButton>
+
+					<NcButton v-if="isAtLeastOneSelectedRead"
+						type="tertiary"
+						:title="n('mail', 'Mark {number} unread', 'Mark {number} unread', selection.length, { number: selection.length })"
+						@click.prevent="markSelectedUnread">
+						<EmailUnread :size="16" />
 					</NcButton>
 
 					<NcButton v-if="isAtLeastOneSelectedUnimportant"
@@ -30,13 +35,18 @@
 						<UnImportantIcon :size="16" />
 					</NcButton>
 
-					<NcButton type="tertiary"
-						:title="areAllSelectedFavorite
-							? n('mail', 'Unfavorite {number}', 'Unfavorite {number}', selection.length, { number: selection.length })
-							: n('mail', 'Favorite {number}', 'Favorite {number}', selection.length, { number: selection.length })"
-						@click.prevent="favoriteOrUnfavoriteAll">
-						<IconFavorite v-if="areAllSelectedFavorite" :size="16" />
-						<IconUnFavorite v-else :size="16" />
+					<NcButton v-if="isAtLeastOneSelectedFavorite"
+						type="tertiary"
+						:title="n('mail', 'Unfavorite {number}', 'Unfavorite {number}', selection.length, { number: selection.length })"
+						@click.prevent="favoriteAll">
+						<IconFavorite :size="16" />
+					</NcButton>
+
+					<NcButton v-if="isAtLeastOneSelectedUnFavorite"
+						type="tertiary"
+						:title="n('mail', 'Favorite {number}', 'Favorite {number}', selection.length, { number: selection.length })"
+						@click.prevent="unFavoriteAll">
+						<IconUnFavorite :size="16" />
 					</NcButton>
 
 					<NcButton type="tertiary"
@@ -238,9 +248,11 @@ export default {
 			// returns true when in selection mode (where the user selects several emails at once)
 			return this.selection.length > 0
 		},
-		areAllSelectedRead() {
-			// returns false if at least one selected message has not been read yet
-			return this.selectedEnvelopes.every((env) => env.flags.seen === true)
+		isAtLeastOneSelectedRead() {
+			return this.selectedEnvelopes.some((env) => env.flags.seen === true)
+		},
+		isAtLeastOneSelectedUnread() {
+			return this.selectedEnvelopes.some((env) => env.flags.seen === false)
 		},
 		isAtLeastOneSelectedImportant() {
 			// returns true if at least one selected message is marked as important
@@ -270,9 +282,11 @@ export default {
 				return !env.flags.$junk
 			})
 		},
-		areAllSelectedFavorite() {
-			// returns false if at least one selected message has not been favorited yet
-			return this.selectedEnvelopes.every((env) => env.flags.flagged === true)
+		isAtLeastOneSelectedFavorite() {
+			return this.selectedEnvelopes.some((env) => env.flags.flagged)
+		},
+		isAtLeastOneSelectedUnFavorite() {
+			return this.selectedEnvelopes.some((env) => !env.flags.flagged)
 		},
 		selectedEnvelopes() {
 			return this.sortedEnvelops.filter((env) => this.selection.includes(env.databaseId))
@@ -307,12 +321,20 @@ export default {
 
 			return this.selection.includes(idx)
 		},
-		markSelectedSeenOrUnseen() {
-			const seen = !this.areAllSelectedRead
+		markSelectedRead() {
 			this.selectedEnvelopes.forEach((envelope) => {
 				this.$store.dispatch('toggleEnvelopeSeen', {
 					envelope,
-					seen,
+					seen: true,
+				})
+			})
+			this.unselectAll()
+		},
+		markSelectedUnread() {
+			this.selectedEnvelopes.forEach((envelope) => {
+				this.$store.dispatch('toggleEnvelopeSeen', {
+					envelope,
+					seen: false,
 				})
 			})
 			this.unselectAll()
@@ -357,8 +379,18 @@ export default {
 			}
 			this.unselectAll()
 		},
-		favoriteOrUnfavoriteAll() {
-			const favFlag = !this.areAllSelectedFavorite
+		favoriteAll() {
+			const favFlag = !this.isAtLeastOneSelectedFavorite
+			this.selectedEnvelopes.forEach((envelope) => {
+				this.$store.dispatch('markEnvelopeFavoriteOrUnfavorite', {
+					envelope,
+					favFlag,
+				})
+			})
+			this.unselectAll()
+		},
+		unFavoriteAll() {
+			const favFlag = !this.isAtLeastOneSelectedUnFavorite
 			this.selectedEnvelopes.forEach((envelope) => {
 				this.$store.dispatch('markEnvelopeFavoriteOrUnfavorite', {
 					envelope,
@@ -529,6 +561,9 @@ div {
 	top: 0px;
 	height: 48px;
 	z-index: 100;
+	.action-buttons {
+		display: flex;
+	}
 }
 
 #load-more-mail-messages {
@@ -568,7 +603,7 @@ div {
 		display: block;
 	}
 }
-.action-buttons {
-	display: flex;
+:deep(.button-vue--text-only) {
+	padding: 0 !important;
 }
 </style>