Search box expandible and added buttons

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

2 files changed, 86 insertions, 32 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 250cb53e6..f7cb08dd9 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -23,42 +23,62 @@
 	<NcAppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
-			<SearchBox v-model="searchText"
-				class="conversations-search"
-				:is-searching="isSearching"
-				@input="debounceFetchSearchResults"
-				@submit="onInputEnter"
-				@keydown.enter.native="handleEnter"
-				@abort-search="abortSearch" />
 
 			<!-- Options -->
-			<NcActions>
-				<NcActionButton v-if="canStartConversations"
-					close-after-click
-					@click="toggleNewGroupConversation(true)">
+			<div class="options">
+				<NcActions class ='filters-button'>
 					<template #icon>
-						<PlusIcon :size="20" />
+						<FilterIcon :size="15" />
 					</template>
-					{{ t('spreed','Create a new conversation') }}
-				</NcActionButton>
+					<NcActionButton close-after-click
+						@click="insertValue(t('spreed','is:mentioned'))">
+						<template #icon>
+							<AtIcon :size="20" />
+						</template>
+						{{ t('spreed','Filter unread mentions') }}
+					</NcActionButton>
 
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:mentioned'))">
-					<template #icon>
-						<AtIcon :size="20" />
-					</template>
-					{{ t('spreed','Filter unread mentions') }}
-				</NcActionButton>
+					<NcActionButton close-after-click
+						@click="insertValue(t('spreed','is:unread'))">
+						<template #icon>
+							<MessageBadge :size="20" />
+						</template>
+						{{ t('spreed','Filter unread messages') }}
+					</NcActionButton>
+				</NcActions>
 
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:unread'))">
+				<NcActions >
 					<template #icon>
-						<MessageBadge :size="20" />
+						<PlusIcon :size="20" />
 					</template>
-					{{ t('spreed','Filter unread messages') }}
-				</NcActionButton>
-			</NcActions>
+					<NcActionButton v-if="canStartConversations"
+						close-after-click
+						@click="toggleNewGroupConversation(true)">
+						<template #icon>
+							<PlusIcon :size="20" />
+						</template>
+						{{ t('spreed','Create a new conversation') }}
+					</NcActionButton>
+					<NcActionButton close-after-click>
+						<template #icon>
+							<ListIcon :size="20" />
+						</template>
+						{{ t('spreed','List of open conversations') }}
+					</NcActionButton>
+				</NcActions>
+			</div>
 
+			<SearchBox v-model="searchText"
+				class="conversations-search"
+				:class="{ 'conversations-search--expanded': isFocused }"
+				:is-searching="isSearching"
+				@focus="isFocused = true"
+				@focusCancel ="isFocused = false"
+				@input="debounceFetchSearchResults"
+				@submit="onInputEnter"
+				@keydown.enter.native="handleEnter"
+				@abort-search="abortSearch" />
+			
 			<!-- New Conversation -->
 			<NewGroupConversation ref="newGroupConversation"
 				:show-modal="isNewGroupConversationOpen"
@@ -169,6 +189,9 @@ import debounce from 'debounce'
 import AtIcon from 'vue-material-design-icons/At.vue'
 import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import ListIcon from 'vue-material-design-icons/FormatListBulleted.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -218,6 +241,8 @@ export default {
 		PlusIcon,
 		AtIcon,
 		MessageBadge,
+		FilterIcon,
+		ListIcon,
 	},
 
 	mixins: [
@@ -249,6 +274,7 @@ export default {
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
 			isNewGroupConversationOpen: false,
+			isFocused: false
 		}
 	},
 
@@ -370,9 +396,7 @@ export default {
 		focusCancel() {
 			return this.abortSearch()
 		},
-		isFocused() {
-			return this.isSearching
-		},
+
 		scrollBottomUnread() {
 			this.preventFindingUnread = true
 			this.$refs.container.scrollTo({
@@ -718,10 +742,25 @@ export default {
 
 .conversations-search {
 	flex-grow: 1;
+	transition: all 0.7s ease;
+	width: 65%;
+	position : absolute;
+	left: 8px; //padding
 
 	:deep(.input-field__input) {
 		border-radius: var(--border-radius-pill);
 	}
+	&--expanded {
+		width: 95%;
+	}
+}
+
+
+.options{
+	position: relative;
+	left : calc(65% + 7px);
+	display: flex;
+	gap: 0.5px;
 }
 
 .settings-button {
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 693021077..5c4e4c471 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -26,6 +26,8 @@
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			trailing-button-icon="close"
+			@blur="isFocused(false)"
+			@focus="isFocused(true)"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
@@ -52,7 +54,7 @@ export default {
 		 */
 		placeholderText: {
 			type: String,
-			default: t('spreed', 'Search conversations or users'),
+			default: t('spreed', 'Search...'),
 		},
 		/**
 		 * The value of the input field, when receiving it as a prop the localValue
@@ -71,7 +73,7 @@ export default {
 		},
 	},
 
-	emits: ['update:value', 'input', 'submit', 'abort-search'],
+	emits: ['update:value', 'input', 'submit', 'abort-search', 'focus', 'focusCancel'],
 
 	data() {
 		return {
@@ -103,6 +105,19 @@ export default {
 		EventBus.$off('route-change', this.focusInputIfRoot)
 	},
 	methods: {
+		isFocused(value){
+			if (value){
+				if (this.localValue != t('spreed','is:mentioned') & this.localValue != t('spreed','is:unread')){
+				this.$emit('focus')
+				}
+			}
+			else {
+				this.$emit('focusCancel')
+			}
+
+			
+		},
+
 		// Focus the input field of the searchbox component.
 		focusInput() {
 			this.$refs.searchConversations.$el.focus()