diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2023-06-22 15:13:14 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-08-02 14:12:38 +0000 |
commit | 166a3dbd5e4a4382b341b70fc1fa80ea64eb0aea (patch) | |
tree | 0071362c1cdab6743bbab4af00bc31861fa932dd | |
parent | 092b64fe8fb37a3ef6fabec34e4d1b2e1ca52cf6 (diff) |
Fine tuning
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
Fine tuning part 2
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
LeftSidebar test correction
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.spec.js | 12 | ||||
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 114 | ||||
-rw-r--r-- | src/components/LeftSidebar/SearchBox/SearchBox.vue | 7 |
3 files changed, 57 insertions, 76 deletions
diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js index fa94973b9..ea73f4faa 100644 --- a/src/components/LeftSidebar/LeftSidebar.spec.js +++ b/src/components/LeftSidebar/LeftSidebar.spec.js @@ -7,15 +7,13 @@ import Vuex from 'vuex' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import { loadState } from '@nextcloud/initial-state' -import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' - import LeftSidebar from './LeftSidebar.vue' import router from '../../__mocks__/router.js' import { searchPossibleConversations, searchListedConversations } from '../../services/conversationsService.js' import { EventBus } from '../../services/EventBus.js' import storeConfig from '../../store/storeConfig.js' -import { findNcListItems, findNcActionButton } from '../../test-helpers.js' +import { findNcListItems } from '../../test-helpers.js' jest.mock('@nextcloud/initial-state', () => ({ loadState: jest.fn(), @@ -623,7 +621,7 @@ describe('LeftSidebar.vue', () => { await resultsListItems.at(1).findAll('a').trigger('click') // Wait for the component to render await wrapper.vm.$nextTick() - const ncModalComponent = wrapper.findComponent(NcModal) + const ncModalComponent = wrapper.findComponent({ name: 'NcModal' }) expect(ncModalComponent.exists()).toBeTruthy() const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' }) @@ -646,7 +644,7 @@ describe('LeftSidebar.vue', () => { // Wait for the component to render await wrapper.vm.$nextTick() - const ncModalComponent = wrapper.findComponent(NcModal) + const ncModalComponent = wrapper.findComponent({ name: 'NcModal' }) expect(ncModalComponent.exists()).toBeTruthy() const input = ncModalComponent.findComponent({ name: 'NcTextField', ref: 'conversationName' }) expect(input.props('value')).toBe(circlesResults[1].label) @@ -711,7 +709,7 @@ describe('LeftSidebar.vue', () => { loadStateSettings.start_conversations = true const wrapper = mountComponent() - const buttonEl = findNcActionButton(wrapper, 'Create a new conversation') + const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' }) expect(buttonEl.exists()).toBeTruthy() }) @@ -719,7 +717,7 @@ describe('LeftSidebar.vue', () => { loadStateSettings.start_conversations = false const wrapper = mountComponent() - const buttonEl = findNcActionButton(wrapper, 'Create a new conversation') + const buttonEl = wrapper.findComponent({ name: 'NewGroupConversation' }) expect(buttonEl.exists()).toBeFalsy() }) }) diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index be6b42f82..78ab6b974 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -26,8 +26,8 @@ <SearchBox ref="searchbox" v-model="searchText" class="conversations-search" - :class="{'conversations-search--expanded': isFocused, - 'conversations-search--filter' : isFiltered }" + :class="{'conversations-search--expanded': isFocused}" + :disabled="isFiltered" :is-searching="isSearching" @blur="setIsFocused(false)" @focus="setIsFocused(true)" @@ -38,16 +38,16 @@ <!-- Options --> <div class="options" - :class="{'options--hidden': isFocused}"> - <NcActions ref="filterMainBtn" - class="filters-button"> + :class="{'hidden-visually': isFocused}"> + <NcActions class="filter-actions" + :primary="isFiltered !== null"> <template #icon> - <FilterIcon v-if="!isFiltered" :size="15" /> - <FilterCheckIcon v-else-if="isFiltered" :size="15" /> + <FilterIcon :size="15" /> </template> <NcActionButton close-after-click - class="filterButton--Option" - @click="handleFilter('is:mentioned')"> + class="filter-actions__button" + :primary="isFiltered === 'mentions'" + @click="handleFilter('mentions')"> <template #icon> <AtIcon :size="20" /> </template> @@ -55,8 +55,9 @@ </NcActionButton> <NcActionButton close-after-click - class="filterButton--Option" - @click="handleFilter('is:unread')"> + class="filter-actions__button" + :class="{'filter-actions__button--active': isFiltered === 'unread'}" + @click="handleFilter('unread')"> <template #icon> <MessageBadge :size="20" /> </template> @@ -65,33 +66,18 @@ <NcActionButton v-if="isFiltered" close-after-click - class="filterButton--Clear" - @click="clearFilter"> + class="filter-actions__clearbutton" + @click="handleFilter(null)"> <template #icon> <FilterRemoveIcon :size="20" /> </template> - {{ t('spreed', 'Clear filters: {filterText}', { filterText: filterText }) }} - </NcActionButton> - </NcActions> - - <NcActions> - <template #icon> - <PlusIcon :size="20" /> - </template> - <NcActionButton v-if="canStartConversations" - close-after-click - @click="toggleNewGroupConversation(true)"> - <template #icon> - <PlusIcon :size="20" /> - </template> - {{ t('spreed','Create a new conversation') }} + {{ t('spreed', 'Clear filters') }} </NcActionButton> </NcActions> + <!-- New Conversation --> + <NewGroupConversation v-if="canStartConversations" + ref="newGroupConversation" /> </div> - <!-- New Conversation --> - <NewGroupConversation ref="newGroupConversation" - :show-modal="isNewGroupConversationOpen" - @update-modal="toggleNewGroupConversation" /> </div> <template #list> @@ -108,7 +94,7 @@ <template v-if="!initialisedConversations"> <LoadingPlaceholder type="conversations" /> </template> - <Hint v-else-if="(searchText && !conversationsList.length) || (!conversationsList.length && isFiltered)" + <Hint v-else-if="noMatchFound" :hint="t('spreed', 'No matches')" /> <template v-if="isSearching"> <template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0"> @@ -196,10 +182,8 @@ import debounce from 'debounce' import AtIcon from 'vue-material-design-icons/At.vue' import FilterIcon from 'vue-material-design-icons/Filter.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' import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' @@ -246,11 +230,9 @@ export default { ConversationIcon, NcActions, NcActionButton, - PlusIcon, AtIcon, MessageBadge, FilterIcon, - FilterCheckIcon, FilterRemoveIcon, }, @@ -284,19 +266,18 @@ export default { forceFullRoomListRefreshAfterXLoops: 0, isNewGroupConversationOpen: false, isFocused: false, - filterText: '', - isFiltered: false, + isFiltered: null, } }, computed: { conversationsList() { let conversations = this.$store.getters.conversationsList - switch (this.filterText) { - case ('is:unread'): + switch (this.isFiltered) { + case ('unread'): conversations = conversations.filter(conversation => conversation.unreadMessages > 0) break - case ('is:mentioned'): + case ('mentions'): conversations = conversations.filter(conversation => conversation.unreadMention || (conversation.unreadMessages > 0 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))) break @@ -320,6 +301,10 @@ export default { return this.searchText !== '' }, + noMatchFound() { + return (this.searchText || this.isFiltered) && !this.conversationsList.length + }, + showStartConversationsOptions() { return this.isSearching && this.canStartConversations }, @@ -409,16 +394,7 @@ export default { }, handleFilter(filter) { - this.isFiltered = true - this.filterText = filter - - }, - - clearFilter() { - // clear the status filter - this.isFiltered = false - // clear the filter - this.filterText = '' + this.isFiltered = filter }, focusCancel() { @@ -766,8 +742,8 @@ export default { .conversations-search { transition: all 0.3s ease; - width: 65%; - z-index: 2; + width: calc(65% - 8px); + z-index: 1; position : absolute; :deep(.input-field__input) { @@ -777,29 +753,31 @@ export default { width: 90%; } - &--filter{ - pointer-events: none; - :deep(.input-field__input) { - background-color: var(--color-background-dark); - } - } +} + +//FIXME : this should be changed once the disabled style for input is added +:deep(.input-field__input[disabled="disabled"]){ + background-color: var(--color-background-dark); } .options{ position: relative; - z-index: 1; - left : calc(65% + 10px); + transition: all 0.3s ease; //gets hidden once the search box is expanded + left : calc(65% + 4px); display: flex; - gap: 0.25px; +} - &--hidden{ - visibility: hidden; +.filter-actions__button--active{ + background-color: var(--color-primary-element-light); + border-radius: 6px; + :deep(.action-button__longtext){ + font-weight: bold; } + } -.filterButton--Clear{ - font-style: italic; - background-color: var(--color-background-dark); +.hidden-visually{ + height:100%; } .settings-button { diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index 1ebf58bb6..b3fa6e9c1 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -25,6 +25,7 @@ :value.sync="localValue" :label="placeholderText" :show-trailing-button="isSearching" + :disabled="disabled" trailing-button-icon="close" v-on="$listeners" @trailing-button-click="abortSearch" @@ -53,7 +54,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 @@ -70,6 +71,10 @@ export default { type: Boolean, default: false, }, + disabled: { + type: Boolean, + default: false, + }, }, emits: ['update:value', 'input', 'submit', 'abort-search'], |