diff options
author | Christoph Wurst <christoph@winzerhof-wurst.at> | 2022-05-19 15:48:20 +0300 |
---|---|---|
committer | Christoph Wurst <christoph@winzerhof-wurst.at> | 2022-05-19 15:48:20 +0300 |
commit | 1b7cb06080df081b1d94cb3244a331f0f327975e (patch) | |
tree | c10e79d0c62ab1e9c8684e0eb601adedbb5a6c67 /src | |
parent | d957e7273e6368823afada70b8574edac930e717 (diff) |
Migrate secondary message/envelope actions to material iconsenhancement/material-icons-envelope-message-secondary-actions
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Envelope.vue | 85 | ||||
-rw-r--r-- | src/components/MenuEnvelope.vue | 161 |
2 files changed, 184 insertions, 62 deletions
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue index 9d9be8030..05eb46dba 100644 --- a/src/components/Envelope.vue +++ b/src/components/Envelope.vue @@ -85,39 +85,62 @@ </ActionButton> </EnvelopePrimaryActions> <template v-if="!moreActionsOpen"> - <ActionButton icon="icon-junk" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onToggleJunk"> + <template #icon> + <AlertOctagonIcon + :title="data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')" + :size="20" /> + </template> {{ data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') }} </ActionButton> - <ActionButton icon="icon-checkmark" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="toggleSelected"> + <template #icon> + <CheckIcon + :title="selected ? t('mail', 'Unselect') : t('mail', 'Select')" + :size="20" /> + </template> {{ selected ? t('mail', 'Unselect') : t('mail', 'Select') }} </ActionButton> - <ActionButton - icon="icon-tag" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onOpenTagModal"> + <template #icon> + <TagIcon + :title="t('mail', 'Edit tags')" + :size="20" /> + </template> {{ t('mail', 'Edit tags') }} </ActionButton> - <ActionButton icon="icon-external" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onOpenMoveModal"> + <template #icon> + <OpenInNewIcon + :title="t('mail', 'Move')" + :size="20" /> + </template> {{ t('mail', 'Move thread') }} </ActionButton> - <ActionButton icon="icon-more" - :close-after-click="false" + <ActionButton :close-after-click="false" @click="moreActionsOpen=true"> + <template #icon> + <DotsHorizontalIcon + :title="t('mail', 'More actions')" + :size="20" /> + </template> {{ t('mail', 'More actions') }} </ActionButton> - <ActionButton icon="icon-delete" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onDelete"> + <template #icon> + <DeleteIcon + :title="t('mail', 'Delete thread')" + :size="20" /> + </template> {{ t('mail', 'Delete thread') }} </ActionButton> </template> @@ -128,17 +151,25 @@ <ChevronLeft :title="t('mail', 'More actions')" :size="20" /> - {{ t('mail', 'More actions') }} </template> + {{ t('mail', 'More actions') }} </ActionButton> - <ActionButton icon="icon-add" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onOpenEditAsNew"> + <template #icon> + <PlusIcon + :title="t('mail', 'Edit as new message')" + :size="20" /> + </template> {{ t('mail', 'Edit as new message') }} </ActionButton> - <ActionButton icon="icon-calendar-dark" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="showEventModal = true"> + <template #icon> + <CalendarBlankIcon + :title="t('mail', 'Create event')" + :size="20" /> + </template> {{ t('mail', 'Create event') }} </ActionButton> </template> @@ -176,9 +207,14 @@ <script> import ListItem from '@nextcloud/vue/dist/Components/ListItem' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon' import Avatar from './Avatar' import { calculateAccountColor } from '../util/AccountColor' +import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank' +import CheckIcon from 'vue-material-design-icons/Check' 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 moment from '@nextcloud/moment' import importantSvg from '../../img/important.svg' import { DraggableEnvelopeDirective } from '../directives/drag-and-drop/draggable-envelope' @@ -189,6 +225,9 @@ import NoTrashMailboxConfiguredError import logger from '../logger' import { matchError } from '../errors/match' import MoveModal from './MoveModal' +import OpenInNewIcon from 'vue-material-design-icons/OpenInNew' +import PlusIcon from 'vue-material-design-icons/Plus' +import TagIcon from 'vue-material-design-icons/Tag' import TagModal from './TagModal' import EventModal from './EventModal' import EnvelopePrimaryActions from './EnvelopePrimaryActions' @@ -196,13 +235,21 @@ import EnvelopePrimaryActions from './EnvelopePrimaryActions' export default { name: 'Envelope', components: { + AlertOctagonIcon, + CalendarBlankIcon, + CheckIcon, + ChevronLeft, + DeleteIcon, + DotsHorizontalIcon, EnvelopePrimaryActions, EventModal, ListItem, Avatar, ActionButton, - ChevronLeft, MoveModal, + OpenInNewIcon, + PlusIcon, + TagIcon, TagModal, }, directives: { diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue index a36bdb1eb..07046156e 100644 --- a/src/components/MenuEnvelope.vue +++ b/src/components/MenuEnvelope.vue @@ -33,56 +33,94 @@ </ActionButton> </EnvelopePrimaryActions> <ActionButton v-if="withReply" - :icon="hasMultipleRecipients ? 'icon-reply-all' : 'icon-reply'" :close-after-click="true" @click="onReply"> + <template #icon> + <ReplyAllIcon v-if="hasMultipleRecipients" + :title="t('mail', 'Reply')" + :size="20" /> + <ReplyIcon v-else + :title="t('mail', 'Reply')" + :size="20" /> + </template> {{ t('mail', 'Reply') }} </ActionButton> <ActionButton v-if="hasMultipleRecipients" - icon="icon-reply" :close-after-click="true" @click="onReply"> + <template #icon> + <ReplyIcon + :title="t('mail', 'Reply to sender only')" + :size="20" /> + </template> {{ t('mail', 'Reply to sender only') }} </ActionButton> - <ActionButton icon="icon-forward" - :close-after-click="true" + <ActionButton :close-after-click="true" @click="onForward"> + <template #icon> + <ShareIcon + :title="t('mail', 'Forward')" + :size="20" /> + </template> {{ t('mail', 'Forward') }} </ActionButton> - <ActionButton icon="icon-junk" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onToggleJunk"> + <template #icon> + <AlertOctagonIcon + :title="envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')" + :size="20" /> + </template> {{ envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') }} </ActionButton> - <ActionButton - icon="icon-tag" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onOpenTagModal"> + <template #icon> + <TagIcon + :title="t('mail', 'Edit tags')" + :size="20" /> + </template> {{ t('mail', 'Edit tags') }} </ActionButton> <ActionButton v-if="withSelect" - icon="icon-checkmark" :close-after-click="true" @click.prevent="toggleSelected"> + <template #icon> + <CheckIcon + :title="isSelected ? t('mail', 'Unselect') : t('mail', 'Select')" + :size="20" /> + </template> {{ isSelected ? t('mail', 'Unselect') : t('mail', 'Select') }} </ActionButton> - <ActionButton icon="icon-external" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onOpenMoveModal"> + <template #icon> + <OpenInNewIcon + :title="t('mail', 'Move message')" + :size="20" /> + </template> {{ t('mail', 'Move message') }} </ActionButton> - <ActionButton icon="icon-more" - :close-after-click="false" + <ActionButton :close-after-click="false" @click="moreActionsOpen=true"> + <template #icon> + <DotsHorizontalIcon + :title="t('mail', 'More actions')" + :size="20" /> + </template> {{ t('mail', 'More actions') }} </ActionButton> - <ActionButton icon="icon-delete" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="onDelete"> + <template #icon> + <DeleteIcon + :title="t('mail', 'Delete message')" + :size="20" /> + </template> {{ t('mail', 'Delete message') }} </ActionButton> </template> @@ -96,34 +134,52 @@ {{ t('mail', 'More actions') }} </template> </ActionButton> - <ActionButton - icon="icon-forward" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="forwardSelectedAsAttachment"> + <template #icon> + <ShareIcon + :title="t('mail', 'Forward message as attachment')" + :size="20" /> + </template> {{ t('mail', 'Forward message as attachment') }} </ActionButton> - <ActionButton icon="icon-add" - :close-after-click="true" + <ActionButton :close-after-click="true" @click="onOpenEditAsNew"> + <template #icon> + <PlusIcon + :title="t('mail', 'Edit as new message')" + :size="20" /> + </template> {{ t('mail', 'Edit as new message') }} </ActionButton> - <ActionButton icon="icon-calendar-dark" - :close-after-click="true" + <ActionButton :close-after-click="true" @click.prevent="showEventModal = true"> + <template #icon> + <CalendarBlankIcon + :title="t('mail', 'Create event')" + :size="20" /> + </template> {{ t('mail', 'Create event') }} </ActionButton> <ActionButton v-if="withShowSource" - :icon="sourceLoading ? 'icon-loading-small' : 'icon-details'" - :disabled="sourceLoading" :close-after-click="true" @click.prevent="onShowSourceModal"> + <template #icon> + <InformationIcon + :title="t('mail', 'View source')" + :size="20" /> + </template> {{ t('mail', 'View source') }} </ActionButton> <ActionLink v-if="debug" - icon="icon-download" :download="threadingFileName" :href="threadingFile" :close-after-click="true"> + <template #icon> + <DownloadIcon + :title="t('mail', 'Download thread data for debugging')" + :size="20" /> + </template> {{ t('mail', 'Download thread data for debugging') }} </ActionLink> </template> @@ -157,17 +213,30 @@ import axios from '@nextcloud/axios' import Actions from '@nextcloud/vue/dist/Components/Actions' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import ActionLink from '@nextcloud/vue/dist/Components/ActionLink' +import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon' import { Base64 } from 'js-base64' -import ChevronLeft from 'vue-material-design-icons/ChevronLeft' import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder' +import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank' +import CheckIcon from 'vue-material-design-icons/Check' +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 EventModal from './EventModal' import EnvelopePrimaryActions from './EnvelopePrimaryActions' import { generateUrl } from '@nextcloud/router' +import InformationIcon from 'vue-material-design-icons/Information' import logger from '../logger' import { matchError } from '../errors/match' import Modal from '@nextcloud/vue/dist/Components/Modal' -import TagModal from './TagModal' import MoveModal from './MoveModal' +import OpenInNewIcon from 'vue-material-design-icons/OpenInNew' +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 TagIcon from 'vue-material-design-icons/Tag' +import TagModal from './TagModal' import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError' import { showError } from '@nextcloud/dialogs' @@ -177,12 +246,25 @@ export default { Actions, ActionButton, ActionLink, + AlertOctagonIcon, + CalendarBlankIcon, ChevronLeft, + CheckIcon, + DeleteIcon, + DotsHorizontalIcon, + DownloadIcon, + EnvelopePrimaryActions, EventModal, + InformationIcon, Modal, MoveModal, + OpenInNewIcon, + PlusIcon, + ReplyIcon, + ReplyAllIcon, + ShareIcon, + TagIcon, TagModal, - EnvelopePrimaryActions, }, props: { envelope: { @@ -222,7 +304,6 @@ export default { return { debug: window?.OC?.debug || false, rawMessage: '', // Will hold the raw source of the message when requested - sourceLoading: false, showSourceModal: false, showMoveModal: false, showEventModal: false, @@ -327,20 +408,14 @@ export default { }) }, async onShowSourceModal() { - this.sourceLoading = true - - try { - const resp = await axios.get( - generateUrl('/apps/mail/api/messages/{id}/source', { - id: this.envelope.databaseId, - }) - ) + const resp = await axios.get( + generateUrl('/apps/mail/api/messages/{id}/source', { + id: this.envelope.databaseId, + }) + ) - this.rawMessage = resp.data.source - this.showSourceModal = true - } finally { - this.sourceLoading = false - } + this.rawMessage = resp.data.source + this.showSourceModal = true }, onCloseSourceModal() { this.showSourceModal = false |