diff options
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 34 | ||||
-rw-r--r-- | src/components/LeftSidebar/SearchBox/SearchBox.vue | 25 | ||||
-rw-r--r-- | src/mixins/arrowNavigation.js | 2 |
3 files changed, 25 insertions, 36 deletions
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 78ab6b974..1b584739c 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -24,13 +24,13 @@ <div class="new-conversation" :class="{ 'new-conversation--scrolled-down': !isScrolledToTop }"> <SearchBox ref="searchbox" - v-model="searchText" + :value.sync="searchText" class="conversations-search" :class="{'conversations-search--expanded': isFocused}" - :disabled="isFiltered" + :disabled="isFiltered !== null" :is-searching="isSearching" - @blur="setIsFocused(false)" - @focus="setIsFocused(true)" + @focus="setIsFocused" + @blur="setIsFocused" @input="debounceFetchSearchResults" @submit="onInputEnter" @keydown.enter.native="handleEnter" @@ -46,7 +46,7 @@ </template> <NcActionButton close-after-click class="filter-actions__button" - :primary="isFiltered === 'mentions'" + :class="{'filter-actions__button--active': isFiltered === 'mentions'}" @click="handleFilter('mentions')"> <template #icon> <AtIcon :size="20" /> @@ -264,7 +264,6 @@ export default { preventFindingUnread: false, roomListModifiedBefore: 0, forceFullRoomListRefreshAfterXLoops: 0, - isNewGroupConversationOpen: false, isFocused: false, isFiltered: null, } @@ -389,12 +388,18 @@ export default { getFocusableList() { return this.$el.querySelectorAll('li.acli_wrapper .acli') }, - setIsFocused(value) { - this.isFocused = value + setIsFocused(event) { + if (event.relatedTarget?.className.includes('input-field__clear-button')) { + return + } + this.isFocused = event.type === 'focus' + }, handleFilter(filter) { this.isFiltered = filter + // Clear the search input once a filter is active + this.searchText = '' }, focusCancel() { @@ -418,10 +423,6 @@ export default { } }, 250), - toggleNewGroupConversation(value) { - this.isNewGroupConversationOpen = value - }, - async fetchPossibleConversations() { this.contactsLoading = true @@ -510,6 +511,7 @@ export default { // Reset the search text, therefore end the search operation. abortSearch() { this.searchText = '' + this.isFocused = false if (this.cancelSearchPossibleConversations) { this.cancelSearchPossibleConversations() } @@ -755,16 +757,16 @@ export default { } -//FIXME : this should be changed once the disabled style for input is added +//FIXME : upstream: this should be changed once the disabled style for NcInputField is added :deep(.input-field__input[disabled="disabled"]){ background-color: var(--color-background-dark); } .options{ position: relative; - transition: all 0.3s ease; //gets hidden once the search box is expanded left : calc(65% + 4px); display: flex; + height: var(--default-clickable-area); } .filter-actions__button--active{ @@ -776,10 +778,6 @@ export default { } -.hidden-visually{ - height:100%; -} - .settings-button { justify-content: flex-start !important; } diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index b3fa6e9c1..11fe1a4a0 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -22,12 +22,13 @@ <template> <form @submit.prevent="handleSubmit"> <NcTextField ref="searchConversations" - :value.sync="localValue" + :value="value" :label="placeholderText" :show-trailing-button="isSearching" :disabled="disabled" trailing-button-icon="close" v-on="$listeners" + @update:value="updateValue" @trailing-button-click="abortSearch" @keypress.enter="handleSubmit"> <Magnify :size="16" /> @@ -57,8 +58,7 @@ export default { default: t('spreed', 'Search …'), }, /** - * The value of the input field, when receiving it as a prop the localValue - * is updated. + * The value of the input field. */ value: { type: String, @@ -79,25 +79,12 @@ export default { emits: ['update:value', 'input', 'submit', 'abort-search'], - data() { - return { - localValue: '', - } - }, computed: { cancelSearchLabel() { return t('spreed', 'Cancel search') }, }, - watch: { - localValue(localValue) { - this.$emit('update:value', localValue) - this.$emit('input', localValue) - }, - value(value) { - this.localValue = value - }, - }, + mounted() { this.focusInputIfRoot() /** @@ -109,6 +96,10 @@ export default { EventBus.$off('route-change', this.focusInputIfRoot) }, methods: { + updateValue(value) { + this.$emit('update:value', value) + this.$emit('input', value) + }, // Focus the input field of the searchbox component. focusInput() { this.$refs.searchConversations.$el.focus() diff --git a/src/mixins/arrowNavigation.js b/src/mixins/arrowNavigation.js index e1ed38542..fb48370b7 100644 --- a/src/mixins/arrowNavigation.js +++ b/src/mixins/arrowNavigation.js @@ -43,7 +43,7 @@ const arrowNavigation = { mountArrowNavigation() { document.addEventListener('keydown', (event) => { // https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus - if (this.isFocused()) { + if (this.isSearching) { // If arrow down, focus next result if (event.key === 'ArrowDown') { this.focusNext(event) |