diff options
author | julia.kirschenheuter <julia.kirschenheuter@nextcloud.com> | 2022-10-10 15:38:33 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2022-10-11 07:19:16 +0000 |
commit | 86027caabbcc3677917d0521f28fbf8160aa6e50 (patch) | |
tree | 3066a3f95aad4844d23c9d0729f44f11cd561859 | |
parent | 04d0fca0672eade2e8ca8d0538dc1c79e7b779e4 (diff) |
Replace ListItemIcon with ListItem and fix styles
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
-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> |