Skip to content

Commit

Permalink
fixup! feat: make multiselect menu more discoverable
Browse files Browse the repository at this point in the history 
Signed-off-by: greta <[email protected]>
  • Loading branch information
@GretaD
GretaD committed Dec 9, 2024
1 parent ae1e330 commit fbeff7e
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 37 deletions.
11 changes: 10 additions & 1 deletion src/components/Envelope.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
74 changes: 38 additions & 36 deletions src/components/EnvelopeList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -29,38 +27,52 @@
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"
: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 :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>
Expand All @@ -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"
Expand Down Expand Up @@ -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'
Expand All @@ -159,6 +159,8 @@ import EmailUnread from 'vue-material-design-icons/Email.vue'
export default {
name: 'EnvelopeList',
components: {
UnImportantIcon,
IconUnFavorite,
EmailUnread,
EmailRead,
Actions,
Expand Down

0 comments on commit fbeff7e

Please sign in to comment.