Merge pull request #9843 from nextcloud/backport/9838/stable27

[stable27] fix(NewGroupConversation) - fix styles for proper scrolling (again)

3 files changed, 61 insertions, 75 deletions

diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
index c4a0626bd..7ae37981e 100644
--- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
@@ -99,9 +99,6 @@ export default {
 
 <style lang="scss" scoped>
 .confirmation {
-	display: flex;
-	flex-direction: column;
-
 	&__icon {
 		padding-top: 80px;
 	}
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 6592b7cff..aaaa04945 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -35,10 +35,12 @@
 			:container="container"
 			size="normal"
 			@close="closeModal">
-			<!-- Wrapper for content & navigation -->
-			<div class="new-group-conversation talk-modal">
-				<h2>{{ t('spreed', 'Create a new group conversation') }}</h2>
-				<!-- Content -->
+			<h2 class="new-group-conversation__header">
+				{{ t('spreed', 'Create a new group conversation') }}
+			</h2>
+
+			<div class="new-group-conversation__main">
+				<!-- First page -->
 				<div v-show="page === 0" class="new-group-conversation__content">
 					<NcTextField ref="conversationName"
 						v-model="conversationName"
@@ -87,23 +89,24 @@
 				</div>
 
 				<!-- Second page -->
-				<div v-if="page === 1" class="new-group-conversation__content">
-					<SetContacts :conversation-name="conversationNameTrimmed" />
-				</div>
+				<SetContacts v-if="page === 1"
+					class="new-group-conversation__content"
+					:conversation-name="conversationNameTrimmed" />
 
 				<!-- Third page -->
-				<div v-else-if="page === 2" class="new-group-conversation__content">
-					<Confirmation :token="newConversation.token"
-						:conversation-name="conversationNameTrimmed"
-						:error="error"
-						:is-loading="isLoading"
-						:success="success"
-						:is-public="isPublic" />
-				</div>
+				<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>
+
 			<!-- Navigation: different buttons with different actions and
 				placement are rendered depending on the current page -->
-			<div class="navigation">
+			<div class="new-group-conversation__footer">
 				<!-- First page -->
 				<NcButton v-if="page===0 && isPublic"
 					:disabled="disabled"
@@ -114,7 +117,7 @@
 				<NcButton v-if="page===0"
 					type="primary"
 					:disabled="disabled"
-					class="navigation__button-right"
+					class="new-group-conversation__button"
 					@click="handleSetConversationName">
 					{{ t('spreed', 'Add participants') }}
 				</NcButton>
@@ -126,14 +129,14 @@
 				</NcButton>
 				<NcButton v-if="page===1"
 					type="primary"
-					class="navigation__button-right"
+					class="new-group-conversation__button"
 					@click="handleCreateConversation">
 					{{ t('spreed', 'Create conversation') }}
 				</NcButton>
 				<!-- Third page -->
 				<NcButton v-if="page===2 && (error || isPublic)"
 					type="primary"
-					class="navigation__button-right"
+					class="new-group-conversation__button"
 					@click="closeModal">
 					{{ t('spreed', 'Close') }}
 				</NcButton>
@@ -452,17 +455,22 @@ export default {
 }
 
 .new-group-conversation {
-	height: auto;
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	position: relative;
+	&__header {
+		flex-shrink: 0;
+		margin: 0;
+		padding: 10px 20px;
+	}
+
+	&__main {
+		flex-grow: 1;
+		overflow: auto;
+	}
 
 	&__content {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
+		padding: 10px 20px;
 	}
 
 	&__wrapper {
@@ -477,35 +485,27 @@ export default {
 		margin-top: 10px;
 		padding: 4px 0;
 	}
-}
 
-/** Size full in the modal component doesn't have border radius, this adds
-it back */
-:deep(.modal-container) {
-	border-radius: var(--border-radius-large) !important;
-	height: 900px;
-}
-
-:deep(.modal-wrapper .modal-container) {
-	height: max-content;
-}
+	&__footer {
+		flex-shrink: 0;
+		display: flex;
+		justify-content: space-between;
+		padding: 10px 20px;
+		box-shadow: 0 -10px 5px var(--color-main-background);
+	}
 
-.navigation {
-	position: sticky;
-	bottom: -1px;
-	display: flex;
-	justify-content: space-between;
-	flex: 0 0 40px;
-	background-color: var(--color-main-background);
-	box-shadow: 0 -10px 5px var(--color-main-background);
-	z-index: 1;
-	padding: 0 20px 20px;
-
-	&__button-right {
+	&__button {
 		margin-left: auto;
 	}
 }
 
+:deep(.modal-wrapper .modal-container) {
+	display: flex !important;
+	flex-direction: column;
+	height: 90%;
+	overflow: hidden !important;
+}
+
 :deep(.app-settings-section__hint) {
 	color: var(--color-text-lighter);
 	padding: 8px 0;
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 933a33f68..ce3577b61 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -27,18 +27,15 @@
 			:value.sync="searchText"
 			type="text"
 			:label="t('spreed', 'Search participants')"
+			:show-trailing-button="isSearching"
+			:trailing-button-label="cancelSearchLabel"
+			@trailing-button-click="abortSearch"
 			@input="handleInput">
 			<Magnify :size="16" />
-		</NcTextField>
-		<NcButton v-if="isSearching"
-			class="abort-search"
-			type="tertiary-no-background"
-			:aria-label="cancelSearchLabel"
-			@click="abortSearch">
-			<template #icon>
+			<template #trailing-button-icon>
 				<Close :size="20" />
 			</template>
-		</NcButton>
+		</NcTextField>
 		<transition-group v-if="hasSelectedParticipants"
 			name="zoom"
 			tag="div"
@@ -66,7 +63,6 @@ import Magnify from 'vue-material-design-icons/Magnify.vue'
 
 import { showError } from '@nextcloud/dialogs'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ParticipantSearchResults from '../../../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
@@ -78,7 +74,6 @@ import CancelableRequest from '../../../../utils/cancelableRequest.js'
 export default {
 	name: 'SetContacts',
 	components: {
-		NcButton,
 		Close,
 		ParticipantSearchResults,
 		ContactSelectionBubble,
@@ -97,6 +92,7 @@ export default {
 		return {
 			searchText: '',
 			searchResults: [],
+			cachedFullSearchResults: [],
 			// The loading state is true when the component is initialised as we perform a search for 'contacts'
 			// with an empty screen as search text.
 			contactsLoading: true,
@@ -136,8 +132,6 @@ export default {
 		this.focusInput()
 		// Perform a search with an empty string
 		await this.fetchSearchResults()
-		// Once the contacts are fetched, remove the spinner.
-		this.contactsLoading = false
 	},
 
 	beforeDestroy() {
@@ -156,7 +150,7 @@ export default {
 		abortSearch() {
 			this.noResults = false
 			this.contactsLoading = false
-			this.searchResults = []
+			this.searchResults = this.cachedFullSearchResults
 			this.searchText = ''
 			this.focusInput()
 		},
@@ -166,6 +160,7 @@ export default {
 		}, 250),
 
 		async fetchSearchResults() {
+			this.contactsLoading = true
 			try {
 				this.cancelSearchPossibleConversations('canceled')
 				const { request, cancel } = CancelableRequest(searchPossibleConversations)
@@ -174,16 +169,20 @@ export default {
 				const response = await request({ searchText: this.searchText })
 
 				this.searchResults = response?.data?.ocs?.data || []
-				this.contactsLoading = false
 				if (this.searchResults.length === 0) {
 					this.noResults = true
 				}
+				if (!this.searchText) {
+					this.cachedFullSearchResults = this.searchResults
+				}
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
 					return
 				}
 				console.error(exception)
 				showError(t('spreed', 'An error occurred while performing the search'))
+			} finally {
+				this.contactsLoading = false
 			}
 		},
 		visibilityChanged(isVisible) {
@@ -201,11 +200,7 @@ export default {
 
 <style lang="scss" scoped>
 .set-contacts {
-	position: relative;
 	height: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
 	&__icon {
 		margin-top: 40px;
 	}
@@ -213,12 +208,6 @@ export default {
 		margin-top: 20px;
 		text-align: center;
 	}
-	.abort-search {
-		position: absolute;
-		right: 0;
-		top: -2px;
-		z-index: 2;
-	}
 }
 
 .selected-participants {