diff options
author | Marco <marcoambrosini@icloud.com> | 2022-11-29 14:03:07 +0100 |
---|---|---|
committer | Marco <marcoambrosini@icloud.com> | 2023-01-24 15:10:55 +0000 |
commit | 85ad68ba7b558b2668046f9c0324256e0a44a174 (patch) | |
tree | 72c7b6bdc2d42e634932bdd66e5ae68218f9deb6 | |
parent | 50f4c6ba8edf7cb50790cd4b1f06cbac98c89010 (diff) |
Initialise BreakoutRoomsSettings
Signed-off-by: Marco <marcoambrosini@icloud.com>
-rw-r--r-- | src/components/ConversationSettings/BreakoutRoomsSettings.vue | 96 | ||||
-rw-r--r-- | src/components/ConversationSettings/ConversationSettingsDialog.vue | 183 |
2 files changed, 176 insertions, 103 deletions
diff --git a/src/components/ConversationSettings/BreakoutRoomsSettings.vue b/src/components/ConversationSettings/BreakoutRoomsSettings.vue new file mode 100644 index 000000000..754ba6333 --- /dev/null +++ b/src/components/ConversationSettings/BreakoutRoomsSettings.vue @@ -0,0 +1,96 @@ +<!-- + - @copyright Copyright (c) 2022 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> + <Fragment> + <div class="breakout-rooms-settings"> + <p class="breakout-rooms-settings__hint"> + {{ hintText }} + </p> + <NcButton type="secondary" + @click="openBreakoutRoomsEditor"> + <template #icon> + <DotsCircle :size="20" /> + </template> + {{ t('spreed', 'Setup breakout rooms for this conversation') }} + </NcButton> + </div> + <!-- Breakout rooms editor --> + <BreakoutRoomsEditor v-if="showBreakoutRoomsEditor" + @close="showBreakoutRoomsEditor = false" /> + </Fragment> +</template> + +<script> +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue' +import { Fragment } from 'vue-frag' +import DotsCircle from 'vue-material-design-icons/DotsCircle.vue' + +export default { + name: 'BreakoutRoomsSettings', + + components: { + NcButton, + BreakoutRoomsEditor, + Fragment, + DotsCircle, + }, + + props: { + /** + * The conversation's token + */ + token: { + type: String, + required: true, + }, + }, + + data() { + return { + showBreakoutRoomsEditor: false, + } + }, + + computed: { + hintText() { + return t('spreed', 'Breakout rooms are blah blah blah blah blah blah blah blah blah blah blah blah blah blah') + }, + }, + + methods: { + openBreakoutRoomsEditor() { + this.showBreakoutRoomsEditor = true + }, + }, +} +</script> + +<style lang="scss" scoped> +.breakout-rooms-settings { + &__hint{ + margin-bottom: calc(var(--default-grid-baseline) * 2); + color: var(--color-text-lighter); + } +} + +</style> diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue index 5dd68dbee..cdd5bf186 100644 --- a/src/components/ConversationSettings/ConversationSettingsDialog.vue +++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue @@ -20,96 +20,84 @@ --> <template> - <Fragment> - <NcAppSettingsDialog role="dialog" - :aria-label="t('spreed', 'Conversation settings')" - :title="t('spreed', 'Conversation settings')" - :open.sync="showSettings" - :show-navigation="true" - :container="container"> - <!-- description --> - <NcAppSettingsSection v-if="showDescription" - id="description" - :title="t('spreed', 'Description')"> - <!-- Rename to "Basic info" when Name is moved over --> - <Description :editable="canFullModerate" - :description="description" - :editing="isEditingDescription" - :loading="isDescriptionLoading" - :placeholder="t('spreed', 'Enter a description for this conversation')" - @submit-description="handleUpdateDescription" - @update:editing="handleEditDescription" /> - </NcAppSettingsSection> - - <!-- Notifications settings and devices preview screen --> - <NcAppSettingsSection id="notifications" - :title="t('spreed', 'Personal')"> - <NcCheckboxRadioSwitch :checked.sync="showDeviceChecker" - type="switch"> - {{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }} - </NcCheckboxRadioSwitch> - - <NotificationsSettings :conversation="conversation" /> - </NcAppSettingsSection> - - <NcAppSettingsSection id="conversation-settings" - :title="t('spreed', 'Moderation')"> - <ListableSettings v-if="canFullModerate" - :token="token" /> - <LinkShareSettings v-if="canFullModerate" - ref="linkShareSettings" /> - <ExpirationSettings :token="token" /> - </NcAppSettingsSection> - - <NcAppSettingsSection v-if="canFullModerate" - id="meeting" - :title="t('spreed', 'Meeting')"> - <LobbySettings :token="token" /> - <SipSettings v-if="canUserEnableSIP" /> - </NcAppSettingsSection> - - <!-- Conversation permissions --> - <NcAppSettingsSection v-if="canFullModerate" - id="permissions" - :title="t('spreed', 'Permissions')"> - <ConversationPermissionsSettings :token="token" /> - </NcAppSettingsSection> - - <!-- Breakout rooms --> - <NcAppSettingsSection v-if="canFullModerate" - id="breakout-rooms" - :title="t('spreed', 'Breakout Rooms')"> - Put an explanatory paragraph here and create a dedicated component for this - <NcButton type="secondary" - @click="openBreakoutRoomsEditor"> - <template #icon> - <DotsCircle :size="20" /> - </template> - {{ t('spreed', 'Setup breakout rooms') }} - </NcButton> - </NcAppSettingsSection> - - <!-- Matterbridge settings --> - <NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled" - id="matterbridge" - :title="t('spreed', 'Matterbridge')"> - <MatterbridgeSettings /> - </NcAppSettingsSection> - - <!-- Destructive actions --> - <NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation" - id="dangerzone" - :title="t('spreed', 'Danger zone')"> - <LockingSettings :token="token" /> - <DangerZone :conversation="conversation" - :can-leave-conversation="canLeaveConversation" - :can-delete-conversation="canDeleteConversation" /> - </NcAppSettingsSection> - </NcAppSettingsDialog> - - <!-- Breakout rooms editor --> - <BreakoutRoomsEditor v-if="showBreakoutRoomsEditor" @close="showBreakoutRoomsEditor = false" /> - </Fragment> + <NcAppSettingsDialog role="dialog" + :aria-label="t('spreed', 'Conversation settings')" + :title="t('spreed', 'Conversation settings')" + :open.sync="showSettings" + :show-navigation="true" + :container="container"> + <!-- description --> + <NcAppSettingsSection v-if="showDescription" + id="description" + :title="t('spreed', 'Description')"> + <!-- Rename to "Basic info" when Name is moved over --> + <Description :editable="canFullModerate" + :description="description" + :editing="isEditingDescription" + :loading="isDescriptionLoading" + :placeholder="t('spreed', 'Enter a description for this conversation')" + @submit-description="handleUpdateDescription" + @update:editing="handleEditDescription" /> + </NcAppSettingsSection> + + <!-- Notifications settings and devices preview screen --> + <NcAppSettingsSection id="notifications" + :title="t('spreed', 'Personal')"> + <NcCheckboxRadioSwitch :checked.sync="showDeviceChecker" + type="switch"> + {{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }} + </NcCheckboxRadioSwitch> + + <NotificationsSettings :conversation="conversation" /> + </NcAppSettingsSection> + + <NcAppSettingsSection id="conversation-settings" + :title="t('spreed', 'Moderation')"> + <ListableSettings v-if="canFullModerate" + :token="token" /> + <LinkShareSettings v-if="canFullModerate" + ref="linkShareSettings" /> + <ExpirationSettings :token="token" /> + </NcAppSettingsSection> + + <NcAppSettingsSection v-if="canFullModerate" + id="meeting" + :title="t('spreed', 'Meeting')"> + <LobbySettings :token="token" /> + <SipSettings v-if="canUserEnableSIP" /> + </NcAppSettingsSection> + + <!-- Conversation permissions --> + <NcAppSettingsSection v-if="canFullModerate" + id="permissions" + :title="t('spreed', 'Permissions')"> + <ConversationPermissionsSettings :token="token" /> + </NcAppSettingsSection> + + <!-- Breakout rooms --> + <NcAppSettingsSection v-if="canFullModerate" + id="breakout-rooms" + :title="t('spreed', 'Breakout Rooms')"> + <BreakoutRoomsSettings :token="token" /> + </NcAppSettingsSection> + + <!-- Matterbridge settings --> + <NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled" + id="matterbridge" + :title="t('spreed', 'Matterbridge')"> + <MatterbridgeSettings /> + </NcAppSettingsSection> + + <!-- Destructive actions --> + <NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation" + id="dangerzone" + :title="t('spreed', 'Danger zone')"> + <LockingSettings :token="token" /> + <DangerZone :conversation="conversation" + :can-leave-conversation="canLeaveConversation" + :can-delete-conversation="canDeleteConversation" /> + </NcAppSettingsSection> + </NcAppSettingsDialog> </template> <script> @@ -132,10 +120,7 @@ import Description from '../Description/Description.vue' import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import BrowserStorage from '../../services/BrowserStorage.js' import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import DotsCircle from 'vue-material-design-icons/DotsCircle.vue' -import { Fragment } from 'vue-frag' -import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue' +import BreakoutRoomsSettings from './BreakoutRoomsSettings.vue' export default { name: 'ConversationSettingsDialog', @@ -155,10 +140,7 @@ export default { Description, NcCheckboxRadioSwitch, ConversationPermissionsSettings, - NcButton, - DotsCircle, - Fragment, - BreakoutRoomsEditor, + BreakoutRoomsSettings, }, data() { @@ -168,7 +150,6 @@ export default { isEditingDescription: false, isDescriptionLoading: false, showDeviceChecker: false, - showBreakoutRoomsEditor: false, } }, @@ -276,10 +257,6 @@ export default { handleEditDescription(payload) { this.isEditingDescription = payload }, - - openBreakoutRoomsEditor() { - this.showBreakoutRoomsEditor = true - }, }, } </script> |