diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2021-05-11 17:12:36 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2021-05-12 10:30:04 +0300 |
commit | 24e5aad38b70a0c9d4b72faa7bfeeb755fe8f5df (patch) | |
tree | 6f04707a5c27db0e3cedb361c44b926c7070e8c9 /src | |
parent | 5b4e1a7a2bd355a4380bd93cbded3fa0d7e7a311 (diff) |
Move description editor to conversation settings
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ConversationSettings/ConversationSettingsDialog.vue | 75 | ||||
-rw-r--r-- | src/components/Description/Description.vue (renamed from src/components/RightSidebar/Description/Description.vue) | 83 | ||||
-rw-r--r-- | src/components/RightSidebar/RightSidebar.vue | 51 |
3 files changed, 68 insertions, 141 deletions
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue index ed844714b..18656642f 100644 --- a/src/components/ConversationSettings/ConversationSettingsDialog.vue +++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue @@ -26,49 +26,61 @@ :open.sync="showSettings" :show-navigation="true" container="#content-vue"> + <!-- description --> + <AppSettingsSection + :title="t('spreed', 'Description')"> + <Description + v-if="showDescription" + :editable="canFullModerate" + :description="description" + :editing="isEditingDescription" + :loading="isDescriptionLoading" + :placeholder="t('spreed', 'Enter a description for this conversation')" + @submit:description="handleUpdateDescription" + @update:editing="handleEditDescription" /> + </AppSettingsSection> + <!-- Notifications settings --> <AppSettingsSection - :title="t('spreed', 'Chat notifications')" - class="app-settings-section"> + :title="t('spreed', 'Chat notifications')"> <NotificationsSettings :conversation="conversation" /> </AppSettingsSection> + <!-- Guest access --> <AppSettingsSection v-if="canFullModerate" - :title="t('spreed', 'Guests access')" - class="app-settings-section"> + :title="t('spreed', 'Guests access')"> <LinkShareSettings ref="linkShareSettings" /> </AppSettingsSection> + <!-- TODO sepatate these 2 settings and rename the settings sections all the settings in this component are conversation settings. Proposal: move lock conversation in destructive actions and create a separate section for listablesettings --> <AppSettingsSection v-if="canFullModerate" - :title="t('spreed', 'Conversation settings')" - class="app-settings-section"> + :title="t('spreed', 'Conversation settings')"> <ListableSettings :token="token" /> <LockingSettings :token="token" /> </AppSettingsSection> + <!-- Meeting settings --> <AppSettingsSection v-if="canFullModerate" - :title="t('spreed', 'Meeting settings')" - class="app-settings-section"> + :title="t('spreed', 'Meeting settings')"> <LobbySettings :token="token" /> <SipSettings v-if="canUserEnableSIP" /> </AppSettingsSection> <AppSettingsSection v-if="canFullModerate && matterbridgeEnabled" - :title="t('spreed', 'Matterbridge')" - class="app-settings-section"> + :title="t('spreed', 'Matterbridge')"> <MatterbridgeSettings /> </AppSettingsSection> + <!-- Destructive actions --> <AppSettingsSection v-if="canLeaveConversation || canDeleteConversation" - :title="t('spreed', 'Danger zone')" - class="app-settings-section"> + :title="t('spreed', 'Danger zone')"> <DangerZone :conversation="conversation" :can-leave-conversation="canLeaveConversation" @@ -79,7 +91,7 @@ <script> import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import { PARTICIPANT } from '../../constants' +import { PARTICIPANT, CONVERSATION } from '../../constants' import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog' import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection' import LinkShareSettings from './LinkShareSettings' @@ -91,6 +103,8 @@ import MatterbridgeSettings from './Matterbridge/MatterbridgeSettings' import { loadState } from '@nextcloud/initial-state' import DangerZone from './DangerZone' import NotificationsSettings from './NotificationsSettings' +import { showError } from '@nextcloud/dialogs' +import Description from '../Description/Description' export default { name: 'ConversationSettingsDialog', @@ -106,12 +120,16 @@ export default { MatterbridgeSettings, DangerZone, NotificationsSettings, + Description, }, data() { return { showSettings: false, matterbridgeEnabled: loadState('spreed', 'enable_matterbridge'), + isEditingDescription: false, + isDescriptionLoading: false, + } }, @@ -143,6 +161,18 @@ export default { canLeaveConversation() { return this.conversation.canLeaveConversation }, + + description() { + return this.conversation.description + }, + + showDescription() { + if (this.canFullModerate) { + return this.conversation.type !== CONVERSATION.TYPE.ONE_TO_ONE + } else { + return this.description !== '' + } + }, }, mounted() { @@ -166,6 +196,25 @@ export default { unsubscribe('show-conversation-settings', this.handleShowSettings) unsubscribe('hide-conversation-settings', this.handleHideSettings) }, + + async handleUpdateDescription(description) { + this.isDescriptionLoading = true + try { + await this.$store.dispatch('setConversationDescription', { + token: this.token, + description, + }) + this.isEditingDescription = false + } catch (error) { + console.error('Error while setting conversation description', error) + showError(t('spreed', 'Error while updating conversation description')) + } + this.isDescriptionLoading = false + }, + + handleEditDescription(payload) { + this.isEditingDescription = payload + }, }, } </script> diff --git a/src/components/RightSidebar/Description/Description.vue b/src/components/Description/Description.vue index 2bf033724..7c3e87089 100644 --- a/src/components/RightSidebar/Description/Description.vue +++ b/src/components/Description/Description.vue @@ -24,7 +24,7 @@ :key="forceReRenderKey" v-mousedown-outside="handleMouseDownOutside" class="description" - :class="{'description--editing': editing, 'description--expanded': expanded}"> + :class="{'description--editing': editing}"> <RichContentEditable ref="contenteditable" :value.sync="descriptionText" @@ -75,16 +75,6 @@ </button> </template> <div v-if="loading" class="icon-loading-small spinner" /> - <button v-if="!editing && overflows && expanded" class="expand-indicator nc-button nc-button__main" @click="handleClick"> - <ChevronDown - decorative - title="" - :size="16" /> - </button> - <div v-if="showOverlay" - cursor="pointer" - class="overlay" - @click="handleClick" /> </div> </template> @@ -92,7 +82,6 @@ import Pencil from 'vue-material-design-icons/Pencil' import Check from 'vue-material-design-icons/Check' import Close from 'vue-material-design-icons/Close' -import ChevronDown from 'vue-material-design-icons/ChevronDown' import RichContentEditable from '@nextcloud/vue/dist/Components/RichContenteditable' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' @@ -103,7 +92,6 @@ export default { Check, Close, RichContentEditable, - ChevronDown, }, directives: { @@ -172,7 +160,6 @@ export default { return { descriptionText: this.description, forceReRenderKey: 0, - expanded: false, overflows: null, } }, @@ -201,27 +188,12 @@ export default { charactersCount: this.charactersCount, }) }, - - showCollapseButton() { - return this.overflows && !this.editing && !this.loading && this.expanded - }, - - showOverlay() { - return this.overflows && !this.editing && !this.loading && !this.expanded - }, - }, - - mounted() { - this.checkOverflow() }, watch: { // Each time the prop changes, reflect the changes in the value stored in this component description(newValue) { this.descriptionText = newValue - if (!this.editing) { - this.checkOverflow() - } }, editing(newValue) { if (!newValue) { @@ -229,11 +201,6 @@ export default { } }, }, - updated() { - if (!this.editing && !this.expanded) { - this.checkOverflow() - } - }, methods: { handleEditDescription() { @@ -269,18 +236,8 @@ export default { window.getSelection().removeAllRanges() }, - // Expand the description - handleClick() { - if (this.editing || this.loading) { - return - } if (this.overflows) { - this.expanded = !this.expanded - } - }, - // Collapse the description or dismiss editing handleMouseDownOutside(event) { - this.expanded = false this.$emit('update:editing', false) }, @@ -295,27 +252,23 @@ export default { </script> <style lang="scss" scoped> -@import '../../../assets/variables.scss'; -@import '../../../assets/buttons.scss'; +@import '../../assets/variables.scss'; +@import '../../assets/buttons.scss'; .description { - margin: -20px 0 8px 8px; display: flex; width: 100%; overflow: hidden; position: relative; - max-height: calc(var(--default-line-height) * 3 + 28px); + min-height: $clickable-area; + align-items: flex-end; &--editing { box-shadow: 0 2px var(--color-primary-element); transition: all 150ms ease-in-out; max-height: unset; align-items: flex-end; } - &--expanded { - max-height: unset; - min-height: $clickable-area * 2; - align-items: flex-end; - } + &__header { display: flex; align-items: center; @@ -350,15 +303,6 @@ export default { margin: 0 0 4px 0; } -.expand-indicator { - width: $clickable-area; - height: $clickable-area; - margin: 0 0 4px 0; - position: absolute; - top: 0; - right: 0; -} - .counter { background-color: var(--color-background-dark); height: 44px; @@ -372,21 +316,6 @@ export default { justify-content: center; } -.overlay { - background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 1) 100%); - width: 100%; - height: 100%; - position: absolute; - top: 0; - right: 0; - padding-right: $clickable-area; - cursor: pointer; - - body.theme--dark & { - background: linear-gradient(180deg, rgba(24, 24, 24, 0) 0%, rgba(24, 24, 24, 0.5) 75%, rgba(24, 24, 24, 1) 100%); - } -} - // Restyle richContentEditable component from our library. ::v-deep .rich-contenteditable__input { min-height: var(--default-line-height); diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue index 97a9376c1..4036af4dd 100644 --- a/src/components/RightSidebar/RightSidebar.vue +++ b/src/components/RightSidebar/RightSidebar.vue @@ -36,15 +36,6 @@ @dismiss-editing="dismissEditing" @close="handleClose"> <template slot="description"> - <Description - v-if="showDescription" - :editable="canFullModerate" - :description="description" - :editing="isEditingDescription" - :loading="isDescriptionLoading" - :placeholder="t('spreed', 'Add a description for this conversation')" - @submit:description="handleUpdateDescription" - @update:editing="handleEditDescription" /> <LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" /> </template> <AppSidebarTab @@ -103,10 +94,8 @@ import ParticipantsTab from './Participants/ParticipantsTab' import isInLobby from '../../mixins/isInLobby' import SetGuestUsername from '../SetGuestUsername' import SipSettings from './SipSettings' -import Description from './Description/Description' import LobbyStatus from './LobbyStatus' import { EventBus } from '../../services/EventBus' -import { showError } from '@nextcloud/dialogs' export default { name: 'RightSidebar', @@ -118,7 +107,6 @@ export default { ParticipantsTab, SetGuestUsername, SipSettings, - Description, LobbyStatus, }, @@ -139,8 +127,6 @@ export default { contactsLoading: false, // The conversation name (while editing) conversationName: '', - isEditingDescription: false, - isDescriptionLoading: false, // Sidebar status before starting editing operation sidebarOpenBeforeEditingName: '', } @@ -215,18 +201,6 @@ export default { && this.conversation.attendeePin }, - description() { - return this.conversation.description - }, - - showDescription() { - if (this.canFullModerate) { - return this.conversation.type !== CONVERSATION.TYPE.ONE_TO_ONE - } else { - return this.description !== '' - } - }, - hasLobbyEnabled() { return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS }, @@ -293,31 +267,6 @@ export default { showSettings() { emit('show-settings') }, - - async handleUpdateDescription(description) { - this.isDescriptionLoading = true - try { - await this.$store.dispatch('setConversationDescription', { - token: this.token, - description, - }) - this.isEditingDescription = false - } catch (error) { - console.error('Error while setting conversation description', error) - showError(t('spreed', 'Error while updating conversation description')) - } - this.isDescriptionLoading = false - }, - - handleEditDescription(payload) { - this.isEditingDescription = payload - }, - - handleRouteChange() { - // Reset description data on route change - this.isEditingDescription = false - this.isDescriptionLoading = false - }, }, } </script> |