From fbeff7e50d6075886516ee121e2a3afb3b7723ff Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Mon, 9 Dec 2024 14:47:58 +0100
Subject: [PATCH] fixup! feat: make multiselect menu more discoverable

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Envelope.vue     | 11 ++++-
 src/components/EnvelopeList.vue | 74 +++++++++++++++++----------------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index ab025bd532..62c7902ac6 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -48,7 +48,7 @@
 				@mouseleave="hoveringAvatar = false"
 				@click.stop.prevent="toggleSelected">
 				<template v-if="hoveringAvatar || selected">
-					<CheckIcon :size="40" :class="{ 'app-content-list-item-avatar-selected': selected }" />
+					<CheckIcon :size="40" class="check-icon" :class="{ 'app-content-list-item-avatar-selected': selected }" />
 				</template>
 				<template v-else>
 					<Avatar :display-name="addresses" :email="avatarEmail" />
@@ -1130,6 +1130,15 @@ export default {
 }
 .app-content-list-item-avatar-selected {
 	background-color: var(--color-primary-element);
+	color: var(--color-primary-light);
 	border-radius: 32px;
 }
+.check-icon {
+	color: var(--color-primary-light);
+	&: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
index 79a0e4831b..474eb07c41 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -10,12 +10,10 @@
 					<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">
-						<template #icon>
-							<EmailUnread v-if="showImportantIconVariant"
-								:size="16" />
-							<EmailRead v-else
-								:size="16" />
-						</template>
+						<EmailUnread v-if="areAllSelectedRead"
+							:size="16" />
+						<EmailRead v-else
+							:size="16" />
 					</NcButton>
 
 					<NcButton v-if="isAtLeastOneSelectedUnimportant"
@@ -29,7 +27,7 @@
 						type="tertiary"
 						:title="n('mail', 'Mark {number} as unimportant', 'Mark {number} as unimportant', selection.length, { number: selection.length })"
 						@click.prevent="markSelectionUnimportant">
-						<ImportantIcon :size="16" />
+						<UnImportantIcon :size="16" />
 					</NcButton>
 
 					<NcButton type="tertiary"
@@ -37,30 +35,44 @@
 							? 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 :size="16" />
+						<IconFavorite v-if="areAllSelectedFavorite" :size="16" />
+						<IconUnFavorite v-else :size="16" />
 					</NcButton>
 
-					<NcButton v-if="isAtLeastOneSelectedNotJunk"
-						type="tertiary"
-						:title="n('mail', 'Mark {number} as spam', 'Mark {number} as spam', selection.length, { number: selection.length })"
-						@click.prevent="markSelectionJunk">
-						<AlertOctagonIcon :size="16" />
+					<NcButton type="tertiary"
+						:title="n('mail', 'Unselect {number}', 'Unselect {number}', selection.length, { number: selection.length })"
+						:close-after-click="true"
+						@click.prevent="unselectAll">
+						<IconSelect :size="16" />
 					</NcButton>
-
-					<NcButton v-if="isAtLeastOneSelectedJunk"
-						type="tertiary"
-						:title="n('mail', 'Mark {number} as not spam', 'Mark {number} as not spam', selection.length, { number: selection.length })"
-						@click.prevent="markSelectionNotJunk">
-						<AlertOctagonIcon :size="16" />
+					<NcButton type="tertiary"
+						:title="n(
+							'mail',
+							'Delete {number} thread',
+							'Delete {number} threads',
+							selection.length,
+							{ number: selection.length }
+						)"
+						:close-after-click="true"
+						@click.prevent="deleteAllSelected">
+						<IconDelete :size="16" />
 					</NcButton>
 				</div>
 
 				<Actions class="app-content-list-item-menu" menu-align="right">
-					<ActionButton :close-after-click="true" @click.prevent="unselectAll">
+					<ActionButton v-if="isAtLeastOneSelectedNotJunk"
+						@click.prevent="markSelectionJunk">
 						<template #icon>
-							<IconSelect :size="16" />
+							<AlertOctagonIcon :size="16" />
 						</template>
-						{{ n('mail', 'Unselect {number}', 'Unselect {number}', selection.length, { number: selection.length }) }}
+						{{ n('mail', 'Mark {number} as spam', 'Mark {number} as spam', selection.length, { number: selection.length }) }}
+					</ActionButton>
+					<ActionButton v-if="isAtLeastOneSelectedJunk"
+						@click.prevent="markSelectionNotJunk">
+						<template #icon>
+							<AlertOctagonIcon :size="16" />
+						</template>
+						{{ n('mail', 'Mark {number} as not spam', 'Mark {number} as not spam', selection.length, { number: selection.length }) }}
 					</ActionButton>
 					<ActionButton :close-after-click="true" @click.prevent="onOpenTagModal">
 						<template #icon>
@@ -80,20 +92,6 @@
 						</template>
 						{{ n('mail', 'Forward {number} as attachment', 'Forward {number} as attachment', selection.length, { number: selection.length }) }}
 					</ActionButton>
-					<ActionButton :close-after-click="true" @click.prevent="deleteAllSelected">
-						<template #icon>
-							<IconDelete :size="16" />
-						</template>
-						{{
-							n(
-								'mail',
-								'Delete {number} thread',
-								'Delete {number} threads',
-								selection.length,
-								{ number: selection.length }
-							)
-						}}
-					</ActionButton>
 				</Actions>
 				<MoveModal v-if="showMoveModal"
 					:account="account"
@@ -138,6 +136,8 @@ import { showError } from '@nextcloud/dialogs'
 import Envelope from './Envelope.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import ImportantIcon from './icons/ImportantIcon.vue'
+import UnImportantIcon from 'vue-material-design-icons/LabelVariantOutline.vue'
+import IconUnFavorite from 'vue-material-design-icons/StarOutline.vue'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import AddIcon from 'vue-material-design-icons/Plus.vue'
 import IconFavorite from 'vue-material-design-icons/Star.vue'
@@ -159,6 +159,8 @@ import EmailUnread from 'vue-material-design-icons/Email.vue'
 export default {
 	name: 'EnvelopeList',
 	components: {
+		UnImportantIcon,
+		IconUnFavorite,
 		EmailUnread,
 		EmailRead,
 		Actions,