fixup! add ParticipantsListVirtual.vue component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Sep 14, 2023 · fbacef4 · fbacef4
1 parent 1ffd728
commit fbacef4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 38 deletions.
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue b/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
@@ -20,20 +20,18 @@
 -->
 
 <template>
-	<div>
-		<ul>
-			<Participant v-for="item in items"
-				:key="generateKey(item)"
-				:participant="item"
-				:is-selectable="participantsSelectable"
-				:show-user-status="showUserStatus"
-				@click-participant="handleClickParticipant" />
-		</ul>
+	<ul>
+		<Participant v-for="item in items"
+			:key="generateKey(item)"
+			:participant="item"
+			:is-selectable="participantsSelectable"
+			:show-user-status="showUserStatus"
+			@click-participant="handleClickParticipant" />
 		<template v-if="loading">
-			<LoadingParticipant v-for="n in dummyParticipants"
-				:key="n" />
+			<!-- FIXME replace placeholder after #10489 -->
+			<LoadingParticipant v-for="n in dummyParticipants" :key="n" />
 		</template>
-	</div>
+	</ul>
 </template>
 
 <script>

diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -20,35 +20,32 @@
 -->
 
 <template>
-	<div class="h-100">
+	<div class="wrapper">
 		<SearchBox v-if="canSearch"
 			:value.sync="searchText"
 			:is-focused.sync="isFocused"
 			:placeholder-text="searchBoxPlaceholder"
 			@input="handleInput"
 			@abort-search="abortSearch" />
 
-		<div class="h-crop">
-			<ParticipantsListVirtual v-if="!isSearching"
-				:participants="participants"
-				:loading="!participantsInitialised"
-				class="h-100" />
-
-			<template v-else>
-				<NcAppNavigationCaption v-if="canAdd" :title="t('spreed', 'Participants')" />
-
-				<ParticipantsList v-if="filteredParticipants.length"
-					:items="filteredParticipants"
-					:loading="!participantsInitialised" />
-				<Hint v-else :hint="t('spreed', 'No search results')" />
-
-				<ParticipantsSearchResults v-if="canAdd"
-					:search-results="searchResults"
-					:contacts-loading="contactsLoading"
-					:no-results="noResults"
-					:search-text="searchText"
-					@click="addParticipants" />
-			</template>
+		<ParticipantsListVirtual v-if="!isSearching"
+			:participants="participants"
+			:loading="!participantsInitialised" />
+
+		<div v-else class="scroller">
+			<NcAppNavigationCaption v-if="canAdd" :title="t('spreed', 'Participants')" />
+
+			<ParticipantsList v-if="filteredParticipants.length"
+				:items="filteredParticipants"
+				:loading="!participantsInitialised" />
+			<Hint v-else :hint="t('spreed', 'No search results')" />
+
+			<ParticipantsSearchResults v-if="canAdd"
+				:search-results="searchResults"
+				:contacts-loading="contactsLoading"
+				:no-results="noResults"
+				:search-text="searchText"
+				@click="addParticipants" />
 		</div>
 	</div>
 </template>
@@ -265,13 +262,14 @@ export default {
 </script>
 
 <style scoped>
-.h-100 {
+.wrapper {
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 }
 
-/** Subtract search field height **/
-.h-crop {
-	height: calc(100% - 36px);
+.scroller {
+	overflow-y: auto;
 }
 
 /** TODO: fix these in the nextcloud-vue library **/