From 20c57d9cc273b52b8d0242327f8cab1cab8a96ff Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Thu, 17 Jul 2025 16:07:35 +0200 Subject: [PATCH] fix(ui): use filled/outline icon for the important flag Signed-off-by: Christoph Wurst --- src/components/Envelope.vue | 31 +++++++++---------- src/components/EnvelopeList.vue | 8 ++--- src/components/MenuEnvelope.vue | 7 +++-- src/components/NavigationMailbox.vue | 2 +- src/components/icons/ImportantIcon.vue | 42 -------------------------- 5 files changed, 25 insertions(+), 65 deletions(-) delete mode 100644 src/components/icons/ImportantIcon.vue diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue index b95a60194..0c3d2605e 100644 --- a/src/components/Envelope.vue +++ b/src/components/Envelope.vue @@ -31,12 +31,12 @@ :class="{ 'one-line': oneLineLayout, 'favorite-icon-style': !oneLineLayout }" :data-starred="data.flags.flagged ? 'true' : 'false'" @click.prevent="hasWriteAcl ? onToggleFlagged() : false" /> -
+ data-starred="true" + @click.prevent="hasWriteAcl ? onToggleImportant() : false" /> {{ 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; diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue index 670116871..8a02eccf8 100644 --- a/src/components/EnvelopeList.vue +++ b/src/components/EnvelopeList.vue @@ -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"> - + {{ 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, diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue index 750261066..5c585efd4 100644 --- a/src/components/NavigationMailbox.vue +++ b/src/components/NavigationMailbox.vue @@ -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' diff --git a/src/components/icons/ImportantIcon.vue b/src/components/icons/ImportantIcon.vue deleted file mode 100644 index 19d70dc52..000000000 --- a/src/components/icons/ImportantIcon.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - -