Skip to content

Commit

Permalink
chore(deps): fix NcListItem
Browse files Browse the repository at this point in the history 
rename *title => *name props, adjust tests, remove deep styles

Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
@Antreesy
Antreesy committed Oct 9, 2023
1 parent 60515ff commit 5acdc26
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 57 deletions.
8 changes: 4 additions & 4 deletions src/components/LeftSidebar/ConversationsList/Conversation.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,18 +101,18 @@ describe('Conversation.vue', () => {

const el = wrapper.findComponent({ name: 'NcListItem' })
expect(el.exists()).toBe(true)
expect(el.props('title')).toBe('conversation one')
expect(el.props('name')).toBe('conversation one')

const icon = el.findComponent({ name: 'ConversationIcon' })
expect(icon.props('item')).toStrictEqual(item)
expect(icon.props('hideFavorite')).toStrictEqual(false)
expect(icon.props('hideCall')).toStrictEqual(false)
})

describe('displayed subtitle', () => {
describe('displayed subname', () => {
/**
* @param {object} item Conversation data
* @param {string} expectedText Expected subtitle of the conversation item
* @param {string} expectedText Expected subname of the conversation item
* @param {boolean} isSearchResult Whether or not the item is a search result (has no … menu)
*/
function testConversationLabel(item, expectedText, isSearchResult = false) {
Expand All @@ -129,7 +129,7 @@ describe('Conversation.vue', () => {
})

const el = wrapper.findComponent({ name: 'NcListItem' })
expect(el.vm.$slots.subtitle[0].text.trim()).toBe(expectedText)
expect(el.vm.$slots.subname[0].text.trim()).toBe(expectedText)
}

test('display joining conversation message when not joined yet', () => {
Expand Down
10 changes: 3 additions & 7 deletions src/components/LeftSidebar/ConversationsList/Conversation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<template>
<NcListItem ref="listItem"
:title="item.displayName"
:name="item.displayName"
class="conversation-item"
:class="{'unread-mention-conversation': item.unreadMention}"
:data-nav-id="`conversation_${item.token}`"
Expand All @@ -34,7 +34,7 @@
<template #icon>
<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
</template>
<template #subtitle>
<template #subname>
<strong v-if="item.unreadMessages"
class="subtitle">
{{ conversationInformation }}
Expand Down Expand Up @@ -333,7 +333,7 @@ export default {
immediate: true,
handler(value) {
this.$nextTick().then(() => {
const titleSpan = this.$refs.listItem?.$el?.querySelector('.line-one__title')
const titleSpan = this.$refs.listItem?.$el?.querySelector('.line-one__name')
if (titleSpan && titleSpan.offsetWidth < titleSpan.scrollWidth) {
titleSpan.setAttribute('title', value)
Expand Down Expand Up @@ -450,10 +450,6 @@ export default {
font-weight: bold;
}
:deep(.action-text__title) {
margin-left: 12px;
}
.critical {
:deep(.action-button) {
color: var(--color-error) !important;
Expand Down
20 changes: 10 additions & 10 deletions src/components/LeftSidebar/LeftSidebar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ describe('LeftSidebar.vue', () => {
expect(captionListItems.exists()).toBeTruthy()
expect(captionListItems).toHaveLength(captionList.length)
captionList.forEach((caption, index) => {
expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
})

// Check all conversations
Expand All @@ -363,7 +363,7 @@ describe('LeftSidebar.vue', () => {
expect(resultsListItems.exists()).toBeTruthy()
expect(resultsListItems).toHaveLength(resultsList.length)
resultsList.forEach((result, index) => {
expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
})
})

Expand All @@ -384,7 +384,7 @@ describe('LeftSidebar.vue', () => {
expect(captionListItems.exists()).toBeTruthy()
expect(captionListItems).toHaveLength(captionList.length)
captionList.forEach((caption, index) => {
expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
})

// Check all conversations
Expand All @@ -404,7 +404,7 @@ describe('LeftSidebar.vue', () => {
expect(resultsListItems.exists()).toBeTruthy()
expect(resultsListItems).toHaveLength(resultsList.length)
resultsList.forEach((result, index) => {
expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
})
})

Expand All @@ -425,7 +425,7 @@ describe('LeftSidebar.vue', () => {
expect(captionListItems.exists()).toBeTruthy()
expect(captionListItems).toHaveLength(captionList.length)
captionList.forEach((caption, index) => {
expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
})

// Check all conversations
Expand All @@ -445,7 +445,7 @@ describe('LeftSidebar.vue', () => {
expect(resultsListItems.exists()).toBeTruthy()
expect(resultsListItems).toHaveLength(resultsList.length)
resultsList.forEach((result, index) => {
expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
})
})
})
Expand All @@ -472,14 +472,14 @@ describe('LeftSidebar.vue', () => {
expect(captionsEls.exists()).toBeTruthy()
if (listedResults.length > 0) {
expect(captionsEls.length).toBeGreaterThan(2)
expect(captionsEls.at(0).props('title')).toBe('Conversations')
expect(captionsEls.at(1).props('title')).toBe('Open conversations')
expect(captionsEls.at(0).props('name')).toBe('Conversations')
expect(captionsEls.at(1).props('name')).toBe('Open conversations')
} else {
expect(captionsEls.length).toBeGreaterThan(1)
expect(captionsEls.at(0).props('title')).toBe('Conversations')
expect(captionsEls.at(0).props('name')).toBe('Conversations')
}
// last dynamic caption for "No search results"
expect(captionsEls.at(-1).props('title')).toBe(expectedCaption)
expect(captionsEls.at(-1).props('name')).toBe(expectedCaption)

return wrapper
}
Expand Down
69 changes: 35 additions & 34 deletions src/components/LeftSidebar/LeftSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<template #icon>
<AtIcon :size="20" />
</template>
{{ t('spreed','Filter unread mentions') }}
{{ t('spreed', 'Filter unread mentions') }}
</NcActionButton>

<NcActionButton close-after-click
Expand All @@ -58,7 +58,7 @@
<template #icon>
<MessageBadge :size="20" />
</template>
{{ t('spreed','Filter unread messages') }}
{{ t('spreed', 'Filter unread messages') }}
</NcActionButton>

<NcActionButton v-if="isFiltered"
Expand Down Expand Up @@ -87,7 +87,7 @@
<template #icon>
<Plus :size="20" />
</template>
{{ t('spreed','Create a new conversation') }}
{{ t('spreed', 'Create a new conversation') }}
</NcActionButton>

<NcActionButton v-if="!hasNoteToSelf"
Expand All @@ -96,15 +96,15 @@
<template #icon>
<Note :size="20" />
</template>
{{ t('spreed','New personal note') }}
{{ t('spreed', 'New personal note') }}
</NcActionButton>

<NcActionButton close-after-click
@click="showModalListConversations">
<template #icon>
<List :size="20" />
</template>
{{ t('spreed','Join open conversations') }}
{{ t('spreed', 'Join open conversations') }}
</NcActionButton>
</NcActions>
</TransitionWrapper>
Expand All @@ -118,17 +118,18 @@

<template #list>
<li ref="container" class="left-sidebar__list">
<ul class="scroller h-100">
<ul class="h-100" :class="{'scroller': isSearching}">
<!-- Conversations List -->
<template v-if="!isSearching">
<li class="h-100">
<ConversationsListVirtual ref="scroller"
:conversations="filteredConversationsList"
:loading="!initialisedConversations"
class="h-100"
class="scroller h-100"
@scroll.native="debounceHandleScroll" />
</li>
<Hint v-if="initialisedConversations && filteredConversationsList.length === 0" :hint="t('spreed', 'No matches found')" />
<Hint v-if="initialisedConversations && filteredConversationsList.length === 0"
:hint="t('spreed', 'No matches found')" />

<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
class="unread-mention-button"
Expand All @@ -142,12 +143,13 @@
<template v-else-if="isSearching">
<!-- Create a new conversation -->
<NcListItem v-if="searchResultsConversationList.length === 0 && canStartConversations"
:title="t('spreed', 'Create a new conversation')"
:name="t('spreed', 'Create a new conversation')"
data-nav-id="conversation_create_new"
@click="createConversation(searchText)">
<template #icon>
<ChatPlus :size="30" />
</template>
<template #subtitle>
<template #subname>
{{ searchText }}
</template>
</NcListItem>
Expand Down Expand Up @@ -177,7 +179,7 @@
<NcListItem v-for="item of searchResultsUsers"
:key="`user_${item.id}`"
:data-nav-id="`user_${item.id}`"
:title="item.label"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
Expand All @@ -193,7 +195,7 @@
<NcListItem v-for="item of searchResultsGroups"
:key="`group_${item.id}`"
:data-nav-id="`group_${item.id}`"
:title="item.label"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
Expand All @@ -207,7 +209,7 @@
<NcListItem v-for="item of searchResultsCircles"
:key="`circle_${item.id}`"
:data-nav-id="`circle_${item.id}`"
:title="item.label"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
Expand Down Expand Up @@ -846,7 +848,7 @@ export default {
<style lang="scss" scoped>
.scroller {
padding: 0 4px 0 6px;
padding: 0 4px;
}
.h-100 {
Expand All @@ -865,7 +867,7 @@ export default {
.filters {
position: absolute;
top : 8px;
top: 8px;
right: 56px;
}
Expand Down Expand Up @@ -895,25 +897,30 @@ export default {
}
.conversations-search {
padding: 4px 0;
padding: 3px 0;
transition: all 0.15s ease;
z-index: 1;
// New conversation button width : 52 px
// Filters button width : 44 px
// Spacing : 3px + 1px
// Total : 100 px
width : calc(100% - 100px);
display : flex;
width: calc(100% - 100px);
display: flex;
&--expanded {
width : calc(100% - 8px);
width: calc(100% - 8px);
}
:deep(.input-field) {
margin-block-start: 0;
}
}
.filter-actions__button--active {
background-color: var(--color-primary-element-light);
border-radius: 6px;
:deep(.action-button__longtext){
:deep(.action-button__longtext) {
font-weight: bold;
}
Expand All @@ -923,23 +930,17 @@ export default {
justify-content: flex-start !important;
}
:deep(.app-navigation ul) {
padding: 0 !important;
}
:deep(.app-navigation-toggle) {
top: 8px !important;
right: -6px !important;
}
:deep(.app-navigation__list) {
padding: 0 !important;
}
:deep(.list-item:focus, .list-item:focus-visible) {
z-index: 1;
border: 2px solid var(--color-primary-element);
padding : 6px;
outline: none; // Remove the default outline
// FIXME upstream https://github.com/nextcloud-libraries/nextcloud-vue/issues/4625
:deep(.list-item__wrapper--active) {
.list-item:hover,
.list-item:focus,
.list-item:focus-visible,
.list-item:active {
background-color: var(--color-primary-element-hover);
}
}
</style>
4 changes: 2 additions & 2 deletions src/test-helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ function findNcButton(wrapper, text) {
function findNcListItems(wrapper, text) {
const listItems = wrapper.findAllComponents(NcListItem)
return (Array.isArray(text))
? listItems.filter(listItem => text.includes(listItem.vm.title))
: listItems.filter(listItem => listItem.vm.title === text)
? listItems.filter(listItem => text.includes(listItem.vm.name))
: listItems.filter(listItem => listItem.vm.name === text)
}

/**
Expand Down

0 comments on commit 5acdc26

Please sign in to comment.