diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 46 | ||||
-rw-r--r-- | src/components/LeftSidebar/SearchBox/SearchBox.vue | 4 |
2 files changed, 38 insertions, 12 deletions
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 4ebfe2d70..73af7bce0 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -26,7 +26,8 @@ <SearchBox ref="searchbox" v-model="searchText" class="conversations-search" - :class="{ 'conversations-search--expanded': isFocused }" + :class="{'conversations-search--expanded': isFocused, + 'conversations-search--filter' : isFiltered }" :is-searching="isSearching" @blur="setIsFocused(false)" @focus="setIsFocused(true)" @@ -41,7 +42,7 @@ class="filters-button"> <template #icon> <FilterIcon v-if="!isFiltered" :size="15" /> - <UnFilterIcon v-else-if="isFiltered" :size="15" /> + <FilterCheckIcon v-else-if="isFiltered" :size="15" /> </template> <NcActionButton close-after-click class="filterButton--Option" @@ -60,6 +61,16 @@ </template> {{ t('spreed','Filter unread messages') }} </NcActionButton> + + <NcActionButton v-if="isFiltered" + close-after-click + class="filterButton--Clear" + @click="clearFilter"> + <template #icon> + <FilterRemoveIcon :size="20" /> + </template> + {{ t('spreed','Clear filter :') }} {{ filterText }} + </NcActionButton> </NcActions> <NcActions> @@ -97,7 +108,7 @@ <template v-if="!initialisedConversations"> <LoadingPlaceholder type="conversations" /> </template> - <Hint v-else-if="searchText && !conversationsList.length" + <Hint v-else-if="(searchText && !conversationsList.length) || (!conversationsList.length && isFiltered)" :hint="t('spreed', 'No matches')" /> <template v-if="isSearching"> <template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0"> @@ -185,7 +196,8 @@ import debounce from 'debounce' import AtIcon from 'vue-material-design-icons/At.vue' import FilterIcon from 'vue-material-design-icons/Filter.vue' -import UnFilterIcon from 'vue-material-design-icons/FilterRemove.vue' +import FilterCheckIcon from 'vue-material-design-icons/FilterCheck.vue' +import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue' import MessageBadge from 'vue-material-design-icons/MessageBadge.vue' import PlusIcon from 'vue-material-design-icons/Plus.vue' @@ -238,7 +250,8 @@ export default { AtIcon, MessageBadge, FilterIcon, - UnFilterIcon, + FilterCheckIcon, + FilterRemoveIcon, }, mixins: [ @@ -397,13 +410,14 @@ export default { handleFilter(filter) { this.isFiltered = true this.filterText = filter - const divElement = document.querySelector('.filters-button') - divElement.addEventListener('click', function(event) { - this.filterText = '' - this.isFiltered = false - }.bind(this)) + }, + clearFilter() { + // clear the status filter + this.isFiltered = false + // clear the filter + this.filterText = '' }, focusCancel() { @@ -762,6 +776,13 @@ export default { &--expanded { width: 95%; } + + &--filter{ + pointer-events: none; + :deep(.input-field__input) { + background-color: var(--color-background-dark); + } + } } .options{ @@ -772,6 +793,11 @@ export default { gap: 0.25px; } +.filterButton--Clear{ + font-style: italic; + background-color: var(--color-background-dark); +} + .settings-button { justify-content: flex-start !important; } diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index 37d801cb0..1ebf58bb6 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -53,7 +53,7 @@ export default { */ placeholderText: { type: String, - default: t('spreed', 'Search...'), + default: t('spreed', 'Search…'), }, /** * The value of the input field, when receiving it as a prop the localValue @@ -72,7 +72,7 @@ export default { }, }, - emits: ['update:value', 'input', 'submit', 'abort-search', 'focus', 'focusCancel'], + emits: ['update:value', 'input', 'submit', 'abort-search'], data() { return { |