Move description editor to conversation settings dialog

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>

src/components/RightSidebar/Description/Description.vue → 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,24 +75,13 @@
 			</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>
 
 <script>
 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,39 +188,19 @@ 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) {
 				this.descriptionText = this.description
 			}
 		},
 	},
-	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);