diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2023-05-02 15:27:11 +0200 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2023-05-12 18:17:18 +0200 |
commit | e979c741f1617ec3ea29b6e0213313a10e23109f (patch) | |
tree | e5537c8d3487330a0fc34a8fc0b304fbac7f7d20 | |
parent | b25ad42a6397aefa870fa57fec96cd4c25a325aa (diff) |
extract attachments actions
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
-rw-r--r-- | src/components/NewMessageForm/NewMessageForm.vue | 90 | ||||
-rw-r--r-- | src/components/NewMessageForm/NewMessageFormAttachments.vue | 179 |
2 files changed, 202 insertions, 67 deletions
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 947965776..a1c1d3d6f 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -35,57 +35,24 @@ aria-hidden="true" class="hidden-visually" @change="handleFileInput"> + <div class="new-message"> <form class="new-message-form" @submit.prevent> <!-- Attachments menu --> - <div v-if="showAttachmentsMenu" - class="new-message-form__upload-menu"> - <NcActions ref="attachmentsMenu" - :container="container" - :boundaries-element="containerElement" - :disabled="disabled" - :aria-label="t('spreed', 'Share files to the conversation')" - :aria-haspopup="true"> - <template #icon> - <Paperclip :size="16" /> - </template> + <NewMessageFormAttachments v-if="showAttachmentsMenu" + :token="token" + :container="container" + :boundaries-element="containerElement" + :disabled="disabled" + :can-upload-files="canUploadFiles" + :can-share-files="canShareFiles" + :can-create-poll="canCreatePoll" + @open-file-upload="openFileUploadWindow" + @handle-file-share="handleFileShare" + @toggle-poll-editor="togglePollEditor" + @update-text-file-dialog="updateTextFileDialog" /> - <NcActionButton v-if="canUploadFiles" - :close-after-click="true" - @click.prevent="clickImportInput"> - <template #icon> - <Upload :size="20" /> - </template> - {{ t('spreed', 'Upload from device') }} - </NcActionButton> - <NcActionButton v-if="canShareFiles" - :close-after-click="true" - @click.prevent="handleFileShare"> - <template #icon> - <Folder :size="20" /> - </template> - {{ shareFromNextcloudLabel }} - </NcActionButton> - <template v-if="canShareFiles"> - <NcActionButton v-for="(provider, i) in fileTemplateOptions" - :key="i" - :close-after-click="true" - :icon="provider.iconClass" - @click.prevent="showTextFileDialog = i"> - {{ provider.label }} - </NcActionButton> - </template> - <NcActionButton v-if="canCreatePoll" - :close-after-click="true" - @click.prevent="toggleSimplePollsEditor(true)"> - <template #icon> - <Poll :size="20" /> - </template> - {{ t('spreed', 'Create new poll') }} - </NcActionButton> - </NcActions> - </div> <!-- Input area --> <div class="new-message-form__input"> <div class="new-message-form__emoji-picker"> @@ -235,11 +202,7 @@ <script> import BellOff from 'vue-material-design-icons/BellOff.vue' import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue' -import Folder from 'vue-material-design-icons/Folder.vue' -import Paperclip from 'vue-material-design-icons/Paperclip.vue' -import Poll from 'vue-material-design-icons/Poll.vue' import Send from 'vue-material-design-icons/Send.vue' -import Upload from 'vue-material-design-icons/Upload.vue' import { getCapabilities } from '@nextcloud/capabilities' import { getFilePickerBuilder, showError } from '@nextcloud/dialogs' @@ -254,6 +217,7 @@ import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContente import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' import Quote from '../Quote.vue' +import NewMessageFormAttachments from './NewMessageFormAttachments.vue' import NewMessageFormAudioRecorder from './NewMessageFormAudioRecorder.vue' import NewMessageFormPollEditor from './NewMessageFormPollEditor.vue' import NewMessageFormTemplatePreview from './NewMessageFormTemplatePreview.vue' @@ -294,6 +258,7 @@ export default { NcModal, NcRichContenteditable, NcTextField, + NewMessageFormAttachments, NewMessageFormAudioRecorder, NewMessageFormPollEditor, NewMessageFormTemplatePreview, @@ -303,11 +268,7 @@ export default { // Icons BellOff, EmoticonOutline, - Folder, - Paperclip, - Poll, Send, - Upload, }, props: { @@ -420,9 +381,8 @@ export default { }, canUploadFiles() { - const allowed = getCapabilities()?.spreed?.config?.attachments?.allowed - return allowed - && this.attachmentFolderFreeSpace !== 0 + return getCapabilities()?.spreed?.config?.attachments?.allowed + && this.$store.getters.getAttachmentFolderFreeSpace() !== 0 && this.canShareFiles }, @@ -430,10 +390,6 @@ export default { return !this.isOneToOne && !this.noChatPermission }, - attachmentFolderFreeSpace() { - return this.$store.getters.getAttachmentFolderFreeSpace() - }, - currentConversationIsJoined() { return this.$store.getters.currentConversationIsJoined }, @@ -459,10 +415,6 @@ export default { } }, - shareFromNextcloudLabel() { - return t('spreed', 'Share from {nextcloud}', { nextcloud: OC.theme.productName }) - }, - fileTemplateOptions() { return this.$store.getters.getFileTemplates() }, @@ -496,7 +448,7 @@ export default { }, showAttachmentsMenu() { - return (this.canUploadFiles || this.canShareFiles) && !this.broadcast + return this.canShareFiles && !this.broadcast }, showAudioRecorder() { @@ -713,10 +665,14 @@ export default { * Clicks the hidden file input when clicking the correspondent NcActionButton, * thus opening the file-picker */ - clickImportInput() { + openFileUploadWindow() { this.$refs.fileUploadInput.click() }, + updateTextFileDialog(value) { + this.showTextFileDialog = value + }, + handleFileInput(event) { const files = Object.values(event.target.files) diff --git a/src/components/NewMessageForm/NewMessageFormAttachments.vue b/src/components/NewMessageForm/NewMessageFormAttachments.vue new file mode 100644 index 000000000..3ebe00cec --- /dev/null +++ b/src/components/NewMessageForm/NewMessageFormAttachments.vue @@ -0,0 +1,179 @@ +<!-- + - @copyright Copyright (c) 2022, Marco Ambrosini <marcoambrosini@icloud.com> + - + - @author Marco Ambrosini <marcoambrosini@icloud.com> + - @author Maksim Sukharev <antreesy.web@gmail.com> + - + - @license AGPL-3.0-or-later + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <NcActions ref="attachmentsMenu" + :container="container" + :boundaries-element="boundariesElement" + :disabled="disabled" + :aria-label="t('spreed', 'Share files to the conversation')" + :aria-haspopup="true"> + <template #icon> + <Paperclip :size="16" /> + </template> + + <NcActionButton v-if="canUploadFiles" + close-after-click + @click.prevent="$emit('open-file-upload')"> + <template #icon> + <Upload :size="20" /> + </template> + {{ t('spreed', 'Upload from device') }} + </NcActionButton> + + <template v-if="canShareFiles"> + <NcActionButton close-after-click + @click.prevent="handleFileShare"> + <template #icon> + <Folder :size="20" /> + </template> + {{ shareFromNextcloudLabel }} + </NcActionButton> + + <NcActionButton v-for="(provider, index) in fileTemplateOptions" + :key="index" + close-after-click + :icon="provider.iconClass" + @click.prevent="$emit('update-text-file-dialog', index)"> + {{ provider.label }} + </NcActionButton> + </template> + + <NcActionButton v-if="canCreatePoll" + close-after-click + @click.prevent="$emit('toggle-poll-editor')"> + <template #icon> + <Poll :size="20" /> + </template> + {{ t('spreed', 'Create new poll') }} + </NcActionButton> + </NcActions> +</template> + +<script> +import Folder from 'vue-material-design-icons/Folder.vue' +import Paperclip from 'vue-material-design-icons/Paperclip.vue' +import Poll from 'vue-material-design-icons/Poll.vue' +import Upload from 'vue-material-design-icons/Upload.vue' + +import { getFilePickerBuilder } from '@nextcloud/dialogs' + +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' + +import { shareFile } from '../../services/filesSharingServices.js' + +const picker = getFilePickerBuilder(t('spreed', 'File to share')) + .setMultiSelect(false) + .setModal(true) + .setType(1) + .allowDirectories() + .build() + +export default { + name: 'NewMessageFormAttachments', + + components: { + NcActionButton, + NcActions, + // Icons + Folder, + Paperclip, + Poll, + Upload, + }, + + props: { + token: { + type: String, + required: true, + }, + + container: { + type: String, + required: true, + }, + + boundariesElement: { + type: Element, + required: true, + }, + + disabled: { + type: Boolean, + required: true, + }, + + canShareFiles: { + type: Boolean, + required: true, + }, + + canUploadFiles: { + type: Boolean, + required: true, + }, + + canCreatePoll: { + type: Boolean, + required: true, + }, + }, + + computed: { + fileTemplateOptions() { + return this.$store.getters.getFileTemplates() + }, + + shareFromNextcloudLabel() { + return t('spreed', 'Share from {nextcloud}', { nextcloud: OC.theme.productName }) + }, + }, + + methods: { + handleFileShare() { + picker.pick() + .then((path) => { + console.debug(`path ${path} selected for sharing`) + if (!path.startsWith('/')) { + throw new Error(t('files', 'Invalid path selected')) + } + return shareFile(path, this.token) + }) + + // FIXME Remove this hack once it is possible to set the parent + // element of the file picker. + // By default, the file picker is a sibling of the fullscreen + // element, so it is not visible when in fullscreen mode. It is not + // possible to specify the parent nor to know when the file picker + // was actually opened, so for the time being it is moved if + // needed shortly after calling it. + setTimeout(() => { + if (this.$store.getters.isFullscreen()) { + document.getElementById('content-vue').appendChild(document.querySelector('.oc-dialog')) + } + }, 1000) + }, + }, +} +</script> |