VladPolskiy/nextcloud-mail
1
0
Fork 0
mirror of https://github.com/nextcloud/mail.git synced 2025-07-20 18:19:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11398 from nextcloud/fix/ui/important-unimportant-icon-variants

Browse Source 
fix(ui): use filled/outline icon for the important flag
This commit is contained in:
Christoph Wurst
2025-07-18 11:43:34 +02:00
committed by GitHub
parent 6f395ae841 20c57d9cc2
commit dde9e3a823
5 changed files with 25 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Envelope.vue
View File

@ -31,12 +31,12 @@
:class="{ 'one-line': oneLineLayout, 'favorite-icon-style': !oneLineLayout }"
:data-starred="data.flags.flagged ? 'true' : 'false'"
@click.prevent="hasWriteAcl ? onToggleFlagged() : false" />
<div v-if="isImportant"
class="app-content-list-item-star svg icon-important"
<ImportantIcon v-if="isImportant"
:size="18"
class="app-content-list-item-star icon-important"
:class="{ 'important-one-line': oneLineLayout, 'icon-important': !oneLineLayout }"
:data-starred="isImportant ? 'true' : 'false'"
@click.prevent="hasWriteAcl ? onToggleImportant() : false"
v-html="importantSvg" />
data-starred="true"
@click.prevent="hasWriteAcl ? onToggleImportant() : false" />
<JunkIcon v-if="data.flags.$junk"
:size="18"
class="app-content-list-item-star junk-icon-style"
@ -127,7 +127,8 @@
:close-after-click="true"
@click.prevent="onToggleImportant">
<template #icon>
<ImportantIcon :size="24" />
<ImportantIcon v-if="isImportant" :size="24" />
<ImportantOutlineIcon v-else :size="24" />
</template>
{{
isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
@ -360,7 +361,8 @@ import DeleteIcon from 'vue-material-design-icons/DeleteOutline.vue'
import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
import TaskIcon from 'vue-material-design-icons/CheckboxMarkedCirclePlusOutline.vue'
import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
import importantSvg from '../../img/important.svg'
import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
import ImportantOutlineIcon from 'vue-material-design-icons/LabelVariantOutline.vue'
import { DraggableEnvelopeDirective } from '../directives/drag-and-drop/draggable-envelope/index.js'
import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder.js'
import { shortRelativeDatetime, messageDateTime } from '../util/shortRelativeDatetime.js'
@ -377,7 +379,6 @@ import Reply from 'vue-material-design-icons/ReplyOutline.vue'
import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
import IconAttachment from 'vue-material-design-icons/Paperclip.vue'
import ImportantIcon from './icons/ImportantIcon.vue'
import IconBullet from 'vue-material-design-icons/CheckboxBlankCircle.vue'
import JunkIcon from './icons/JunkIcon.vue'
import PlusIcon from 'vue-material-design-icons/Plus.vue'
@ -414,9 +415,10 @@ export default {
DotsHorizontalIcon,
EnvelopePrimaryActions,
EventModal,
ImportantIcon,
ImportantOutlineIcon,
TaskModal,
EnvelopeSkeleton,
ImportantIcon,
JunkIcon,
ActionButton,
MoveModal,
@ -479,7 +481,6 @@ export default {
},
data() {
return {
importantSvg,
showMoveModal: false,
showEventModal: false,
showTaskModal: false,
@ -1014,6 +1015,7 @@ export default {
:deep(path) {
fill: #ffcc00;
stroke: var(--color-main-background);
stroke-width: 2;
}
.list-item:hover &,
.list-item:focus &,
@ -1120,8 +1122,10 @@ export default {
.icon-important.app-content-list-item-star:deep() {
position: absolute;
top: 5px;
top: 3px;
z-index: 1;
stroke: var(--color-main-background);
stroke-width: 2;
}
.app-content-list-item-star.favorite-icon-style {
@ -1143,11 +1147,6 @@ export default {
inset-inline-start: 31px;
}
:deep(.svg svg) {
height: 16px;
width: 16px;
}
.seen-icon-style,
.attachment-icon-style {
opacity: .6;

8
src/components/EnvelopeList.vue
View File

@ -32,7 +32,7 @@
type="tertiary"
:title="n('mail', 'Mark {number} as unimportant', 'Mark {number} as unimportant', selection.length, { number: selection.length })"
@click.prevent="markSelectionUnimportant">
<UnImportantIcon :size="16" />
<ImportantOutlineIcon :size="16" />
</NcButton>
<NcButton v-if="isAtLeastOneSelectedFavorite"
@ -145,8 +145,8 @@ import { NcActions as Actions, NcActionButton as ActionButton, NcButton } from '
import { showError } from '@nextcloud/dialogs'
import Envelope from './Envelope.vue'
import IconDelete from 'vue-material-design-icons/DeleteOutline.vue'
import ImportantIcon from './icons/ImportantIcon.vue'
import UnImportantIcon from 'vue-material-design-icons/LabelVariantOutline.vue'
import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
import ImportantOutlineIcon 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'
@ -171,7 +171,6 @@ import { mapStores } from 'pinia'
export default {
name: 'EnvelopeList',
components: {
UnImportantIcon,
IconUnFavorite,
EmailUnread,
EmailRead,
@ -182,6 +181,7 @@ export default {
Envelope,
IconDelete,
ImportantIcon,
ImportantOutlineIcon,
IconFavorite,
IconSelect,
MoveModal,

7
src/components/MenuEnvelope.vue
View File

@ -11,7 +11,8 @@
:close-after-click="true"
@click.prevent="onToggleImportant">
<template #icon>
<ImportantIcon :size="16" />
<ImportantIcon v-if="isImportant" :size="16" />
<ImportantOutlineIcon v-else :size="16" />
</template>
{{
isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
@ -236,7 +237,8 @@ import TranslationIcon from 'vue-material-design-icons/Translate.vue'
import { mailboxHasRights } from '../util/acl.js'
import { generateUrl } from '@nextcloud/router'
import InformationIcon from 'vue-material-design-icons/InformationOutline.vue'
import ImportantIcon from './icons/ImportantIcon.vue'
import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
import ImportantOutlineIcon from 'vue-material-design-icons/LabelVariantOutline.vue'
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
import PlusIcon from 'vue-material-design-icons/Plus.vue'
import TaskIcon from 'vue-material-design-icons/CheckboxMarkedCirclePlusOutline.vue'
@ -275,6 +277,7 @@ export default {
ShareIcon,
TagIcon,
ImportantIcon,
ImportantOutlineIcon,
TaskIcon,
AlarmIcon,
PrinterIcon,

2
src/components/NavigationMailbox.vue
View File

@ -202,7 +202,7 @@ import IconInbox from 'vue-material-design-icons/HomeOutline.vue'
import IconJunk from 'vue-material-design-icons/Fire.vue'
import IconAllInboxes from 'vue-material-design-icons/InboxMultipleOutline.vue'
import EraserIcon from 'vue-material-design-icons/Eraser.vue'
import ImportantIcon from './icons/ImportantIcon.vue'
import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
import IconSend from 'vue-material-design-icons/SendOutline.vue'
import IconWrench from 'vue-material-design-icons/Wrench.vue'
import MoveMailboxModal from './MoveMailboxModal.vue'

42
src/components/icons/ImportantIcon.vue
View File

@ -1,42 +0,0 @@
<!--
- SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template functional>
<span :aria-hidden="!props.title"
:aria-label="props.title"
:class="[data.class, data.staticClass]"
class="material-design-icon important-icon"
role="img"
v-bind="data.attrs"
v-on="listeners">
<svg :fill="props.fillColor"
class="material-design-icon__svg"
:width="props.size"
:height="props.size"
viewBox="0 0 16 16">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M2 13h7.8a1.4 1.4 0 001.1-.6L14 8l-3.1-4.4A1.4 1.4 0 009.8 3H2l3.4 5z" />
</svg>
</span>
</template>
<script>
export default {
name: 'ImportantIcon',
props: {
title: {
type: String,
default: '',
},
size: {
type: Number,
default: 20,
},
fillColor: {
type: String,
default: 'currentColor',
},
},
}
</script>