feat(LeftSidebar): move fast creating under current conversations, ad…

…d subnames Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Mar 22, 2024 · df78e4f · df78e4f
1 parent 6e81e6e
commit df78e4f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -343,7 +343,7 @@ describe('LeftSidebar.vue', () => {
 				)
 
 				// Check all captions
-				const captionList = ['Conversations', 'Open conversations', 'Users', 'Groups', 'Teams']
+				const captionList = ['Conversations', 'Create a new conversation', 'Open conversations', 'Users', 'Groups', 'Teams']
 				const captionListItems = wrapper.findAllComponents({ name: 'NcAppNavigationCaption' })
 				expect(captionListItems.exists()).toBeTruthy()
 				expect(captionListItems).toHaveLength(captionList.length)
@@ -425,7 +425,7 @@ describe('LeftSidebar.vue', () => {
 				)
 
 				// Check all captions
-				const captionList = ['Conversations', 'Open conversations', 'Users', 'Groups']
+				const captionList = ['Conversations', 'Create a new conversation', 'Open conversations', 'Users', 'Groups']
 				const captionListItems = wrapper.findAllComponents({ name: 'NcAppNavigationCaption' })
 				expect(captionListItems.exists()).toBeTruthy()
 				expect(captionListItems).toHaveLength(captionList.length)
@@ -478,7 +478,8 @@ describe('LeftSidebar.vue', () => {
 				if (listedResults.length > 0) {
 					expect(captionsEls.length).toBeGreaterThan(2)
 					expect(captionsEls.at(0).props('name')).toBe('Conversations')
-					expect(captionsEls.at(1).props('name')).toBe('Open conversations')
+					expect(captionsEls.at(1).props('name')).toBe('Create a new conversation')
+					expect(captionsEls.at(2).props('name')).toBe('Open conversations')
 				} else {
 					expect(captionsEls.length).toBeGreaterThan(1)
 					expect(captionsEls.at(0).props('name')).toBe('Conversations')

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -182,28 +182,30 @@
 
 				<!-- Search results -->
 				<ul v-else class="h-100 scroller">
+					<!-- Search results: user's conversations -->
+					<NcAppNavigationCaption :name="t('spreed', 'Conversations')" />
+					<Conversation v-for="item of searchResultsConversationList"
+						:key="`conversation_${item.id}`"
+						:ref="`conversation-${item.token}`"
+						:item="item"
+						@click="abortSearch" />
+					<Hint v-if="searchResultsConversationList.length === 0" :hint="t('spreed', 'No matches found')" />
+
 					<!-- Create a new conversation -->
+					<NcAppNavigationCaption v-if="canStartConversations"
+						:name="t('spreed', 'Create a new conversation')" />
 					<NcListItem v-if="canStartConversations"
-						:name="t('spreed', 'Create a new conversation')"
+						:name="searchText"
 						data-nav-id="conversation_create_new"
 						@click="createConversation(searchText)">
 						<template #icon>
-							<ChatPlus :size="30" />
+							<ChatPlus :size="44" />
 						</template>
 						<template #subname>
-							{{ searchText }}
+							{{ t('spreed', 'New group conversation') }}
 						</template>
 					</NcListItem>
 
-					<!-- Search results: user's conversations -->
-					<NcAppNavigationCaption :name="t('spreed', 'Conversations')" />
-					<Conversation v-for="item of searchResultsConversationList"
-						:key="`conversation_${item.id}`"
-						:ref="`conversation-${item.token}`"
-						:item="item"
-						@click="abortSearch" />
-					<Hint v-if="searchResultsConversationList.length === 0" :hint="t('spreed', 'No matches found')" />
-
 					<!-- Search results: listed (open) conversations -->
 					<template v-if="!listedConversationsLoading && searchResultsListedConversations.length !== 0">
 						<NcAppNavigationCaption :name="t('spreed', 'Open conversations')" />
@@ -225,6 +227,9 @@
 							<template #icon>
 								<ConversationIcon :item="iconData(item)" />
 							</template>
+							<template #subname>
+								{{ t('spreed', 'New private conversation') }}
+							</template>
 						</NcListItem>
 					</template>
 
@@ -241,6 +246,9 @@
 								<template #icon>
 									<ConversationIcon :item="iconData(item)" />
 								</template>
+								<template #subname>
+									{{ t('spreed', 'New group conversation') }}
+								</template>
 							</NcListItem>
 						</template>
 
@@ -255,6 +263,9 @@
 								<template #icon>
 									<ConversationIcon :item="iconData(item)" />
 								</template>
+								<template #subname>
+									{{ t('spreed', 'New group conversation') }}
+								</template>
 							</NcListItem>
 						</template>
 					</template>
@@ -1074,6 +1085,14 @@ export default {
 	padding: 0 !important;
 }
 
+:deep(.app-navigation-caption):not(:first-child) {
+	margin-top: 12px !important;
+}
+
+:deep(.app-navigation-caption__name) {
+	margin: 0 !important;
+}
+
 :deep(.list-item) {
 	overflow: hidden;
 	outline-offset: -2px;