diff options
author | Julia Kirschenheuter <6078378+JuliaKirschenheuter@users.noreply.github.com> | 2022-10-11 09:19:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-11 09:19:05 +0200 |
commit | e32f12d63441de674e82b89835d73dcb76829917 (patch) | |
tree | f47ead889e2977af13e7db4bb73d4d9b20746635 /src | |
parent | 31cb3064b31f764ec5ead41483febd3ca2e895ab (diff) | |
parent | c4ca976ebbd2f5cff3bb6db06b58d36dfd6a0b0f (diff) |
Merge pull request #3030 from nextcloud/fix/2950-migrate_contacts_list_to_common_list_component
Replace ListItemIcon with ListItem and fix styles
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactsList.vue | 8 | ||||
-rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 69 |
2 files changed, 47 insertions, 30 deletions
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index 5a7e5e0c..76d31d91 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -21,7 +21,7 @@ --> <template> - <AppContentList> + <AppContentList class="content-list"> <div class="contacts-list__header"> <div class="search-contacts-field"> <input v-model="query" type="text" :placeholder="t('contacts', 'Search contacts …')"> @@ -181,4 +181,10 @@ export default { width: 100%; } } + +.content-list { + overflow-y: auto; + padding: 0 4px; +} + </style> diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index dd11c0ff..9252e4bc 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -1,28 +1,37 @@ <template> - <ListItemIcon + <ListItem :id="id" :key="source.key" - :avatar-size="44" - :class="{'contacts-list__item--active': selectedContact === source.key}" - :display-name="source.displayName" - :is-no-user="true" - :subtitle="source.email" + class="list-item-style envelope" :title="source.displayName" - :url="avatarUrl" - class="contacts-list__item" - tabindex="0" - @click.prevent.stop="selectContact" - @keypress.enter.prevent.stop="selectContact" /> + :to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }"> + <!-- @slot Icon slot --> + + <template #icon> + <div class="app-content-list-item-icon"> + <BaseAvatar :display-name="source.displayName" :url="avatarUrl" :size="40" /> + </div> + </template> + <template #subtitle> + <div class="envelope__subtitle"> + <span class="envelope__subtitle__subject"> + {{ source.email }} + </span> + </div> + </template> + </ListItem> </template> <script> -import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon' +import { NcListItem as ListItem } from '@nextcloud/vue' +import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar' export default { name: 'ContactsListItem', components: { - ListItemIcon, + ListItem, + BaseAvatar, }, props: { @@ -76,29 +85,31 @@ export default { this.avatarUrl = `${this.source.url}?photo` } }, - - /** - * Select this contact within the list - */ - selectContact() { - // change url with router - this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.source.key } }) - }, }, } </script> <style lang="scss" scoped> -.contacts-list__item { - padding: 8px; - &--active, - &:focus, - &:hover { - background-color: var(--color-background-hover); +.envelope { + .app-content-list-item-icon { + height: 40px; // To prevent some unexpected spacing below the avatar } - &, ::v-deep * { - cursor: pointer; + &__subtitle { + display: flex; + gap: 4px; + + &__subject { + color: var(--color-main-text); + line-height: 130%; + overflow: hidden; + text-overflow: ellipsis; + } } } + +.list-item-style { + list-style: none; +} + </style> |