diff options
author | greta <gretadoci@gmail.com> | 2022-05-27 15:14:12 +0300 |
---|---|---|
committer | greta <gretadoci@gmail.com> | 2022-05-30 15:55:54 +0300 |
commit | fbf2f7f92e44723e00a71f4f3c4dd6c695d5e125 (patch) | |
tree | 7a90c08234c3186cef5ed8fffe2dbd1fcef8d4e0 /src | |
parent | 7002512c416d8b74d7d426b30e1af4791af9201f (diff) |
Migrate MenuEnvelope icons
Signed-off-by: greta <gretadoci@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Envelope.vue | 39 | ||||
-rw-r--r-- | src/components/EnvelopePrimaryActions.vue | 1 | ||||
-rw-r--r-- | src/components/MenuEnvelope.vue | 41 | ||||
-rw-r--r-- | src/components/icons/ImportantIcon.vue | 38 |
4 files changed, 111 insertions, 8 deletions
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue index 063fdd2d3..b94dd936a 100644 --- a/src/components/Envelope.vue +++ b/src/components/Envelope.vue @@ -59,26 +59,43 @@ </template> <template #actions> <EnvelopePrimaryActions v-if="!moreActionsOpen"> - <ActionButton icon="icon-starred" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleFlagged"> + <template #icon> + <StarOutline v-if="showFavoriteIconVariant" + :size="20" /> + <Star v-else + :size="20" + fill-color="#f9cf3d" /> + </template> {{ data.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite') }} </ActionButton> - <ActionButton icon="icon-mail" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleSeen"> + <template #icon> + <Email v-if="showImportantIconVariant" + :size="20" /> + <EmailOutline v-else + :size="20" /> + </template> {{ data.flags.seen ? t('mail', 'Unread') : t('mail', 'Read') }} </ActionButton> - <ActionButton icon="icon-important" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleImportant"> + <template #icon> + <ImportantIcon + :size="20" /> + </template> {{ isImportant ? t('mail', 'Unimportant') : t('mail', 'Important') }} @@ -226,6 +243,11 @@ import logger from '../logger' import { matchError } from '../errors/match' import MoveModal from './MoveModal' import OpenInNewIcon from 'vue-material-design-icons/OpenInNew' +import StarOutline from 'vue-material-design-icons/StarOutline' +import Star from 'vue-material-design-icons/Star' +import EmailOutline from 'vue-material-design-icons/EmailOutline' +import Email from 'vue-material-design-icons/Email' +import ImportantIcon from './icons/ImportantIcon' import PlusIcon from 'vue-material-design-icons/Plus' import TagIcon from 'vue-material-design-icons/Tag' import TagModal from './TagModal' @@ -251,6 +273,11 @@ export default { PlusIcon, TagIcon, TagModal, + Star, + StarOutline, + EmailOutline, + Email, + ImportantIcon, }, directives: { draggableEnvelope: DraggableEnvelopeDirective, @@ -363,6 +390,12 @@ export default { return '' } }, + showFavoriteIconVariant() { + return this.data.flags.flagged + }, + showImportantIconVariant() { + return this.data.flags.seen + }, isImportant() { return this.$store.getters .getEnvelopeTags(this.data.databaseId) diff --git a/src/components/EnvelopePrimaryActions.vue b/src/components/EnvelopePrimaryActions.vue index 67847e98e..040d8c250 100644 --- a/src/components/EnvelopePrimaryActions.vue +++ b/src/components/EnvelopePrimaryActions.vue @@ -32,6 +32,7 @@ export default { .list-item-content__actions--primary .action--primary .action-button__text { font-size: 14px; + margin-top: -8px; } .list-item-content__actions--primary .action--primary .action-button__text, diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue index 07046156e..505f5fde7 100644 --- a/src/components/MenuEnvelope.vue +++ b/src/components/MenuEnvelope.vue @@ -7,26 +7,43 @@ @click.native.prevent> <template v-if="!moreActionsOpen"> <EnvelopePrimaryActions> - <ActionButton :icon="iconFavorite" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleFlagged"> + <template #icon> + <StarOutline v-if="showFavoriteIconVariant" + :size="20" /> + <Star v-else + :size="20" + fill-color="#f9cf3d" /> + </template> {{ envelope.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite') }} </ActionButton> - <ActionButton icon="icon-mail" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleSeen"> + <template #icon> + <Email v-if="showImportantIconVariant" + :size="20" /> + <EmailOutline v-else + :size="20" /> + </template> {{ envelope.flags.seen ? t('mail', 'Unread') : t('mail', 'Read') }} </ActionButton> - <ActionButton icon="icon-important" + <ActionButton class="action--primary" :close-after-click="true" @click.prevent="onToggleImportant"> + <template #icon> + <ImportantIcon + :size="20" /> + </template> {{ isImportant ? t('mail', 'Unimportant') : t('mail', 'Important') }} @@ -222,10 +239,13 @@ import ChevronLeft from 'vue-material-design-icons/ChevronLeft' import DeleteIcon from 'vue-material-design-icons/Delete' import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal' import DownloadIcon from 'vue-material-design-icons/Download' +import EmailOutline from 'vue-material-design-icons/EmailOutline' +import Email from 'vue-material-design-icons/Email' import EventModal from './EventModal' import EnvelopePrimaryActions from './EnvelopePrimaryActions' import { generateUrl } from '@nextcloud/router' import InformationIcon from 'vue-material-design-icons/Information' +import ImportantIcon from './icons/ImportantIcon' import logger from '../logger' import { matchError } from '../errors/match' import Modal from '@nextcloud/vue/dist/Components/Modal' @@ -235,6 +255,9 @@ import PlusIcon from 'vue-material-design-icons/Plus' import ReplyIcon from 'vue-material-design-icons/Reply' import ReplyAllIcon from 'vue-material-design-icons/ReplyAll' import ShareIcon from 'vue-material-design-icons/Share' +import Star from 'vue-material-design-icons/Star' +import StarOutline from 'vue-material-design-icons/StarOutline' + import TagIcon from 'vue-material-design-icons/Tag' import TagModal from './TagModal' import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError' @@ -265,6 +288,11 @@ export default { ShareIcon, TagIcon, TagModal, + Star, + StarOutline, + Email, + EmailOutline, + ImportantIcon, }, props: { envelope: { @@ -341,8 +369,11 @@ export default { threadingFileName() { return `${this.envelope.databaseId}.json` }, - iconFavorite() { - return this.envelope.flags.flagged ? 'icon-favorite' : 'icon-starred' + showFavoriteIconVariant() { + return this.envelope.flags.flagged + }, + showImportantIconVariant() { + return this.envelope.flags.seen }, isImportant() { return this.$store.getters diff --git a/src/components/icons/ImportantIcon.vue b/src/components/icons/ImportantIcon.vue new file mode 100644 index 000000000..063bcb25f --- /dev/null +++ b/src/components/icons/ImportantIcon.vue @@ -0,0 +1,38 @@ +<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> |