diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2023-07-11 12:19:53 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-07-11 21:15:35 +0000 |
commit | 161de260ec13474e60824f9a4bc14308ac55cd9c (patch) | |
tree | 46e5402581070f0814e635cd510ae333b8705ca1 /src | |
parent | 424d5e12bcac9a0ebad4e9ced1018dba01a0aec5 (diff) |
Fixing Focus
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
Diffstat (limited to 'src')
3 files changed, 70 insertions, 126 deletions
diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue deleted file mode 100644 index 7ae37981e..000000000 --- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue +++ /dev/null @@ -1,115 +0,0 @@ -<!-- - - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com> - - - - @author Marco Ambrosini <marcoambrosini@icloud.com> - - - - @license GNU AGPL version 3 or any later version - - - - 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> - <div class="confirmation"> - <template v-if="isLoading && !error"> - <template v-if="!success"> - <div class="icon-loading confirmation__icon" /> - <p class="confirmation__warning"> - {{ t('spreed', 'Creating your conversation') }} - </p> - </template> - <template v-if="success && isPublic"> - <div class="icon-checkmark confirmation__icon" /> - <p class="confirmation__warning"> - {{ t('spreed', 'All set') }} - </p> - <NcButton id="copy-link" - type="secondary" - class="confirmation__copy-link" - @click="onClickCopyLink"> - {{ t('spreed', 'Copy conversation link') }} - </NcButton> - </template> - </template> - <template v-else> - <div class="icon-error confirmation__icon" /> - <p class="confirmation__warning"> - {{ t('spreed', 'Error while creating the conversation') }} - </p> - </template> - </div> -</template> - -<script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' - -import { copyConversationLinkToClipboard } from '../../../../services/urlService.js' - -export default { - name: 'Confirmation', - components: { - NcButton, - }, - props: { - token: { - type: String, - required: true, - }, - conversationName: { - type: String, - required: true, - }, - isLoading: { - type: Boolean, - required: true, - }, - success: { - type: Boolean, - required: true, - }, - error: { - type: Boolean, - required: true, - }, - isPublic: { - type: Boolean, - required: true, - }, - }, - - methods: { - onClickCopyLink() { - copyConversationLinkToClipboard(this.token) - }, - }, - -} - -</script> - -<style lang="scss" scoped> -.confirmation { - &__icon { - padding-top: 80px; - } - - &__warning { - margin-top: 10px; - text-align: center; - } - - &__copy-link { - margin: 50px auto 0 auto; - } -} -</style> diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index aaaa04945..6701a5533 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -94,14 +94,35 @@ :conversation-name="conversationNameTrimmed" /> <!-- Third page --> - <Confirmation v-else-if="page === 2" - class="new-group-conversation__content" - :token="newConversation.token" - :conversation-name="conversationNameTrimmed" - :error="error" - :is-loading="isLoading" - :success="success" - :is-public="isPublic" /> + <div v-else-if="page === 2" class="new-group-conversation__content"> + <template v-if="isLoading && !error"> + <template v-if="!success"> + <div class="icon-loading confirmation__icon" /> + <p class="confirmation__warning"> + {{ t('spreed', 'Creating your conversation') }} + </p> + </template> + <template v-if="success && isPublic"> + <div class="icon-checkmark confirmation__icon" /> + <p class="confirmation__warning"> + {{ t('spreed', 'All set') }} + </p> + <NcButton id="copy-link" + ref="copyLink" + type="secondary" + class="confirmation__copy-link" + @click="onClickCopyLink"> + {{ t('spreed', 'Copy conversation link') }} + </NcButton> + </template> + </template> + <template v-else> + <div class="icon-error confirmation__icon" /> + <p class="confirmation__warning"> + {{ t('spreed', 'Error while creating the conversation') }} + </p> + </template> + </div> </div> <!-- Navigation: different buttons with different actions and @@ -135,6 +156,7 @@ </NcButton> <!-- Third page --> <NcButton v-if="page===2 && (error || isPublic)" + ref="closeButton" type="primary" class="new-group-conversation__button" @click="closeModal"> @@ -160,7 +182,6 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue' import ListableSettings from '../../ConversationSettings/ListableSettings.vue' -import Confirmation from './Confirmation/Confirmation.vue' import SetContacts from './SetContacts/SetContacts.vue' import { useIsInCall } from '../../../composables/useIsInCall.js' @@ -173,6 +194,7 @@ import { } from '../../../services/conversationsService.js' import { EventBus } from '../../../services/EventBus.js' import { addParticipant } from '../../../services/participantsService.js' +import { copyConversationLinkToClipboard } from '../../../services/urlService.js' const NEW_CONVERSATION = { token: '', @@ -191,7 +213,6 @@ export default { components: { ConversationAvatarEditor, - Confirmation, ListableSettings, NcButton, NcCheckboxRadioSwitch, @@ -266,6 +287,24 @@ export default { this.passwordProtect = false } }, + + success(value) { + if (!value) { + return + } + this.$nextTick(() => { + this.$refs.copyLink.$el.focus() + }) + }, + + error(value) { + if (!value) { + return + } + this.$nextTick(() => { + this.$refs.closeButton.$el.focus() + }) + }, }, mounted() { @@ -437,6 +476,10 @@ export default { this.page = 1 } }, + + onClickCopyLink() { + copyConversationLinkToClipboard(this.newConversation.token) + }, }, } @@ -444,6 +487,21 @@ export default { </script> <style lang="scss" scoped> + +.confirmation { + &__icon { + padding-top: 80px; + } + + &__warning { + margin-top: 10px; + text-align: center; + } + + &__copy-link { + margin: 50px auto 0 auto; + } +} .toggle { height: 44px; width: 44px; diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue index ce3577b61..e9127f8c7 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue @@ -192,7 +192,8 @@ export default { } }, focusInput() { - this.$refs.setContacts.$el.focus() + // TODO : revert this to call this.$refs.setContacts.$el.focus() after the release + this.$refs.setContacts.$refs.inputField.$refs.input.focus() }, }, } |