Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: restyle autocomplete item #9273

Merged
merged 1 commit into from
Jun 19, 2023
Merged

feat: restyle autocomplete item #9273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions changelog/unreleased/enhancement-restyle-sharees
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Enhancement: Restyle possible sharees

We've restyled the list of sharee suggestions when sharing files and folders.

https://github.com/owncloud/web/issues/9216
https://github.com/owncloud/web/pull/9273
14 changes: 11 additions & 3 deletions ...files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,17 @@
/>
<div class="files-collaborators-autocomplete-user-text oc-text-truncate">
<span class="files-collaborators-autocomplete-username" v-text="item.label" />
<span
<template v-if="!isUser && !isSpaceUser && !isGroup && !isSpaceGroup">
<span
class="files-collaborators-autocomplete-share-type"
v-text="`(${$gettext(shareType.label)})`"
/>
</template>
<div
v-if="item.value.shareWithAdditionalInfo"
class="files-collaborators-autocomplete-additional-info"
v-text="`(${item.value.shareWithAdditionalInfo})`"
v-text="`${item.value.shareWithAdditionalInfo}`"
/>
<div class="files-collaborators-autocomplete-share-type" v-text="$gettext(shareType.label)" />
</div>
</div>
</template>
Expand Down Expand Up @@ -103,4 +108,7 @@ export default {
.vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
fill: white !important;
}
.files-collaborators-autocomplete-additional-info {
font-size: var(--oc-font-size-small);
}
</style>
17 changes: 13 additions & 4 deletions .../unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,25 @@ describe('AutocompleteItem component', () => {
it('shows additional information when set', () => {
const { wrapper } = createWrapper({ shareWithAdditionalInfo: 'some text' })
expect(wrapper.find('.files-collaborators-autocomplete-additional-info').text()).toEqual(
'(some text)'
'some text'
)
})
it('does not show additional information when not set', () => {
const { wrapper } = createWrapper({ shareWithAdditionalInfo: undefined })
expect(wrapper.find('.files-collaborators-autocomplete-additional-info').exists()).toBeFalsy()
})
it('shows the share type', () => {
const { wrapper } = createWrapper({ shareType: ShareTypes.user.value })
expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('User')
it.each([
ShareTypes.user.value,
ShareTypes.spaceUser.value,
ShareTypes.group.value,
ShareTypes.spaceGroup.value
])('hides share type for users and groups', (shareType: number) => {
const { wrapper } = createWrapper({ shareType })
expect(wrapper.find('.files-collaborators-autocomplete-share-type').exists()).toBeFalsy()
})
it('shows share type for guests', () => {
const { wrapper } = createWrapper({ shareType: ShareTypes.guest.value })
expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('(Guest)')
})
})
})
Expand Down