diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Envelope.vue | 150 | ||||
-rw-r--r-- | src/components/EnvelopePrimaryActions.vue | 41 | ||||
-rw-r--r-- | src/components/MenuEnvelope.vue | 215 |
3 files changed, 252 insertions, 154 deletions
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue index 4650ba01b..2ebc9ff2c 100644 --- a/src/components/Envelope.vue +++ b/src/components/Envelope.vue @@ -57,67 +57,90 @@ {{ data.subject }} </template> <template #actions> - <ActionButton icon="icon-important" - :close-after-click="true" - @click.prevent="onToggleImportant"> - {{ - isImportant ? t('mail', 'Mark unimportant') : t('mail', 'Mark important') - }} - </ActionButton> - <ActionButton icon="icon-starred" - :close-after-click="true" - @click.prevent="onToggleFlagged"> - {{ - data.flags.flagged ? t('mail', 'Mark unfavorite') : t('mail', 'Mark favorite') - }} - </ActionButton> - <ActionButton icon="icon-mail" - :close-after-click="true" - @click.prevent="onToggleSeen"> - {{ - data.flags.seen ? t('mail', 'Mark unread') : t('mail', 'Mark read') - }} - </ActionButton> - <ActionButton icon="icon-junk" - :close-after-click="true" - @click.prevent="onToggleJunk"> - {{ - data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') - }} - </ActionButton> - <ActionButton icon="icon-checkmark" - :close-after-click="true" - @click.prevent="toggleSelected"> - {{ - selected ? t('mail', 'Unselect') : t('mail', 'Select') - }} - </ActionButton> - <ActionButton - icon="icon-tag" - :close-after-click="true" - @click.prevent="onOpenTagModal"> - {{ t('mail', 'Edit tags') }} - </ActionButton> - <ActionButton icon="icon-external" - :close-after-click="true" - @click.prevent="onOpenMoveModal"> - {{ t('mail', 'Move thread') }} - </ActionButton> - <ActionButton icon="icon-calendar-dark" - :close-after-click="true" - @click.prevent="showEventModal = true"> - {{ t('mail', 'Create event') }} - </ActionButton> - <ActionButton icon="icon-add" - :close-after-click="true" - @click.prevent="onOpenEditAsNew"> - {{ t('mail', 'Edit as new message') }} - </ActionButton> - <ActionButton icon="icon-delete" - :close-after-click="true" - @click.prevent="onDelete"> - {{ t('mail', 'Delete thread') }} - </ActionButton> + <EnvelopePrimaryActions v-if="!moreActionsOpen"> + <ActionButton icon="icon-starred" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleFlagged"> + {{ + data.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite') + }} + </ActionButton> + <ActionButton icon="icon-mail" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleSeen"> + {{ + data.flags.seen ? t('mail', 'Unread') : t('mail', 'Read') + }} + </ActionButton> + <ActionButton icon="icon-important" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleImportant"> + {{ + isImportant ? t('mail', 'Unimportant') : t('mail', 'Important') + }} + </ActionButton> + </EnvelopePrimaryActions> + <template v-if="!moreActionsOpen"> + <ActionButton icon="icon-junk" + :close-after-click="true" + @click.prevent="onToggleJunk"> + {{ + data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') + }} + </ActionButton> + <ActionButton icon="icon-checkmark" + :close-after-click="true" + @click.prevent="toggleSelected"> + {{ + selected ? t('mail', 'Unselect') : t('mail', 'Select') + }} + </ActionButton> + <ActionButton + icon="icon-tag" + :close-after-click="true" + @click.prevent="onOpenTagModal"> + {{ t('mail', 'Edit tags') }} + </ActionButton> + <ActionButton icon="icon-external" + :close-after-click="true" + @click.prevent="onOpenMoveModal"> + {{ t('mail', 'Move thread') }} + </ActionButton> + <ActionButton icon="icon-more" + :close-after-click="false" + @click="moreActionsOpen=true"> + {{ t('mail', 'More actions') }} + </ActionButton> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click.prevent="onDelete"> + {{ t('mail', 'Delete thread') }} + </ActionButton> + </template> + <template v-if="moreActionsOpen"> + <ActionButton :close-after-click="false" + @click="moreActionsOpen=false"> + <template #icon> + <ChevronLeft + :title="t('mail', 'More actions')" + :size="20" /> + {{ t('mail', 'More actions') }} + </template> + </ActionButton> + <ActionButton icon="icon-add" + :close-after-click="true" + @click.prevent="onOpenEditAsNew"> + {{ t('mail', 'Edit as new message') }} + </ActionButton> + <ActionButton icon="icon-calendar-dark" + :close-after-click="true" + @click.prevent="showEventModal = true"> + {{ t('mail', 'Create event') }} + </ActionButton> + </template> </template> <template #extra> <div @@ -157,6 +180,7 @@ import ListItem from '@nextcloud/vue/dist/Components/ListItem' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import Avatar from './Avatar' import { calculateAccountColor } from '../util/AccountColor' +import ChevronLeft from 'vue-material-design-icons/ChevronLeft' import moment from '@nextcloud/moment' import importantSvg from '../../img/important.svg' import { DraggableEnvelopeDirective } from '../directives/drag-and-drop/draggable-envelope' @@ -169,15 +193,18 @@ import { matchError } from '../errors/match' import MoveModal from './MoveModal' import TagModal from './TagModal' import EventModal from './EventModal' +import EnvelopePrimaryActions from './EnvelopePrimaryActions' import NewMessageModal from './NewMessageModal' export default { name: 'Envelope', components: { + EnvelopePrimaryActions, EventModal, ListItem, Avatar, ActionButton, + ChevronLeft, MoveModal, TagModal, NewMessageModal, @@ -221,6 +248,7 @@ export default { showEventModal: false, showTagModal: false, showNewMessage: false, + moreActionsOpen: false, } }, computed: { diff --git a/src/components/EnvelopePrimaryActions.vue b/src/components/EnvelopePrimaryActions.vue new file mode 100644 index 000000000..67847e98e --- /dev/null +++ b/src/components/EnvelopePrimaryActions.vue @@ -0,0 +1,41 @@ +<template> + <ul class="list-item-content__actions--primary"> + <slot /> + </ul> +</template> + +<script> +export default { + name: 'EnvelopePrimaryActions', +} +</script> + +<style> +.list-item-content__actions--primary { + display: flex; + justify-content: space-between; +} + +.list-item-content__actions--primary .action--primary:first-child { + padding-left: 5px; +} + +.list-item-content__actions--primary .action--primary:last-child { + padding-right: 5px; +} + +.list-item-content__actions--primary .action--primary .action-button { + align-items: center; + flex-direction: column; + padding: 10px 10px 0 10px; +} + +.list-item-content__actions--primary .action--primary .action-button__text { + font-size: 14px; +} + +.list-item-content__actions--primary .action--primary .action-button__text, +.list-item-content__actions--primary .action--primary .action-button__icon { + height: auto; +} +</style> diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue index 80bf79c98..265f18fcc 100644 --- a/src/components/MenuEnvelope.vue +++ b/src/components/MenuEnvelope.vue @@ -5,99 +5,122 @@ menu-align="right" event="" @click.native.prevent> - <ActionRouter v-if="withReply" - :icon="hasMultipleRecipients ? 'icon-reply-all' : 'icon-reply'" - :close-after-click="true" - :to="hasMultipleRecipients ? replyAllLink : replyOneLink"> - {{ t('mail', 'Reply') }} - </ActionRouter> - <ActionRouter v-if="hasMultipleRecipients" - icon="icon-reply" - :close-after-click="true" - :to="replyOneLink"> - {{ t('mail', 'Reply to sender only') }} - </ActionRouter> - <ActionRouter icon="icon-forward" - :close-after-click="true" - :to="forwardLink"> - {{ t('mail', 'Forward') }} - </ActionRouter> - <ActionButton icon="icon-important" - :close-after-click="true" - @click.prevent="onToggleImportant"> - {{ - isImportant ? t('mail', 'Mark unimportant') : t('mail', 'Mark important') - }} - </ActionButton> - <ActionButton :icon="iconFavorite" - :close-after-click="true" - @click.prevent="onToggleFlagged"> - {{ - envelope.flags.flagged ? t('mail', 'Mark unfavorite') : t('mail', 'Mark favorite') - }} - </ActionButton> - <ActionButton icon="icon-mail" - :close-after-click="true" - @click.prevent="onToggleSeen"> - {{ - envelope.flags.seen ? t('mail', 'Mark unread') : t('mail', 'Mark read') - }} - </ActionButton> - <ActionButton icon="icon-junk" - :close-after-click="true" - @click.prevent="onToggleJunk"> - {{ - envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') - }} - </ActionButton> - <ActionButton - icon="icon-tag" - :close-after-click="true" - @click.prevent="onOpenTagModal"> - {{ t('mail', 'Edit tags') }} - </ActionButton> - <ActionButton v-if="withSelect" - icon="icon-checkmark" - :close-after-click="true" - @click.prevent="toggleSelected"> - {{ - isSelected ? t('mail', 'Unselect') : t('mail', 'Select') - }} - </ActionButton> - <ActionButton icon="icon-external" - :close-after-click="true" - @click.prevent="onOpenMoveModal"> - {{ t('mail', 'Move message') }} - </ActionButton> - <ActionButton icon="icon-calendar-dark" - :close-after-click="true" - @click.prevent="showEventModal = true"> - {{ t('mail', 'Create event') }} - </ActionButton> - <ActionButton icon="icon-add" - :close-after-click="true" - @click="onOpenEditAsNew"> - {{ t('mail', 'Edit as new message') }} - </ActionButton> - <ActionButton v-if="withShowSource" - :icon="sourceLoading ? 'icon-loading-small' : 'icon-details'" - :disabled="sourceLoading" - :close-after-click="true" - @click.prevent="onShowSourceModal"> - {{ t('mail', 'View source') }} - </ActionButton> - <ActionLink v-if="debug" - icon="icon-download" - :download="threadingFileName" - :href="threadingFile" - :close-after-click="true"> - {{ t('mail', 'Download thread data for debugging') }} - </ActionLink> - <ActionButton icon="icon-delete" - :close-after-click="true" - @click.prevent="onDelete"> - {{ t('mail', 'Delete message') }} - </ActionButton> + <template v-if="!moreActionsOpen"> + <EnvelopePrimaryActions> + <ActionButton :icon="iconFavorite" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleFlagged"> + {{ + envelope.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite') + }} + </ActionButton> + <ActionButton icon="icon-mail" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleSeen"> + {{ + envelope.flags.seen ? t('mail', 'Unread') : t('mail', 'Read') + }} + </ActionButton> + <ActionButton icon="icon-important" + class="action--primary" + :close-after-click="true" + @click.prevent="onToggleImportant"> + {{ + isImportant ? t('mail', 'Unimportant') : t('mail', 'Important') + }} + </ActionButton> + </EnvelopePrimaryActions> + <ActionRouter v-if="withReply" + :icon="hasMultipleRecipients ? 'icon-reply-all' : 'icon-reply'" + :close-after-click="true" + :to="hasMultipleRecipients ? replyAllLink : replyOneLink"> + {{ t('mail', 'Reply') }} + </ActionRouter> + <ActionRouter v-if="hasMultipleRecipients" + icon="icon-reply" + :close-after-click="true" + :to="replyOneLink"> + {{ t('mail', 'Reply to sender only') }} + </ActionRouter> + <ActionRouter icon="icon-forward" + :close-after-click="true" + :to="forwardLink"> + {{ t('mail', 'Forward') }} + </ActionRouter> + <ActionButton icon="icon-junk" + :close-after-click="true" + @click.prevent="onToggleJunk"> + {{ + envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam') + }} + </ActionButton> + <ActionButton + icon="icon-tag" + :close-after-click="true" + @click.prevent="onOpenTagModal"> + {{ t('mail', 'Edit tags') }} + </ActionButton> + <ActionButton v-if="withSelect" + icon="icon-checkmark" + :close-after-click="true" + @click.prevent="toggleSelected"> + {{ + isSelected ? t('mail', 'Unselect') : t('mail', 'Select') + }} + </ActionButton> + <ActionButton icon="icon-external" + :close-after-click="true" + @click.prevent="onOpenMoveModal"> + {{ t('mail', 'Move message') }} + </ActionButton> + <ActionButton icon="icon-more" + :close-after-click="false" + @click="moreActionsOpen=true"> + {{ t('mail', 'More actions') }} + </ActionButton> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click.prevent="onDelete"> + {{ t('mail', 'Delete message') }} + </ActionButton> + </template> + <template v-if="moreActionsOpen"> + <ActionButton :close-after-click="false" + @click="moreActionsOpen=false"> + <template #icon> + <ChevronLeft + :title="t('mail', 'More actions')" + :size="20" /> + {{ t('mail', 'More actions') }} + </template> + </ActionButton> + <ActionButton icon="icon-add" + :close-after-click="true" + @click="onOpenEditAsNew"> + {{ t('mail', 'Edit as new message') }} + </ActionButton> + <ActionButton icon="icon-calendar-dark" + :close-after-click="true" + @click.prevent="showEventModal = true"> + {{ 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"> + {{ t('mail', 'View source') }} + </ActionButton> + <ActionLink v-if="debug" + icon="icon-download" + :download="threadingFileName" + :href="threadingFile" + :close-after-click="true"> + {{ t('mail', 'Download thread data for debugging') }} + </ActionLink> + </template> </Actions> <Modal v-if="showSourceModal" class="source-modal" @close="onCloseSourceModal"> <div class="source-modal-content"> @@ -133,8 +156,10 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import ActionLink from '@nextcloud/vue/dist/Components/ActionLink' import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter' import { Base64 } from 'js-base64' +import ChevronLeft from 'vue-material-design-icons/ChevronLeft' import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder' import EventModal from './EventModal' +import EnvelopePrimaryActions from './EnvelopePrimaryActions' import { generateUrl } from '@nextcloud/router' import logger from '../logger' import { matchError } from '../errors/match' @@ -152,11 +177,13 @@ export default { ActionButton, ActionLink, ActionRouter, + ChevronLeft, EventModal, Modal, MoveModal, TagModal, NewMessageModal, + EnvelopePrimaryActions, }, props: { envelope: { @@ -202,6 +229,7 @@ export default { showEventModal: false, showTagModal: false, showNewMessage: false, + moreActionsOpen: false, } }, computed: { @@ -379,4 +407,5 @@ export default { overflow-y: scroll !important; } } + </style> |