diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2023-06-16 16:56:05 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-08-02 14:12:37 +0000 |
commit | fe6ab449790dadbe7e6350083122ddd592475ee6 (patch) | |
tree | a9a75cbd6424214326e920f5bd4ee4e1d804219d /src/components | |
parent | cd1e4c1f7a1414f5f13e7bdaf07ab87cf6f9c2d0 (diff) |
Search box expandible and added buttons
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 99 | ||||
-rw-r--r-- | src/components/LeftSidebar/SearchBox/SearchBox.vue | 19 |
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() |