diff options
-rw-r--r-- | src/components/ContactDetails.vue | 67 | ||||
-rw-r--r-- | src/components/ContentList/ContentListItem.vue | 11 | ||||
-rw-r--r-- | src/models/contact.js | 2 |
3 files changed, 49 insertions, 31 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 57175048..e59fb130 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -343,6 +343,7 @@ export default { /** * Select a contac, and update the localContact * Fetch updated data if necessary + * Scroll to the selected contact if exists * * @param {string} uid the contact uid */ @@ -351,33 +352,45 @@ export default { this.loadingData = true let contact = this.$store.getters.getContact(uid) - // if contact exists AND if exists on server - if (contact && contact.dav) { - this.$store.dispatch('fetchFullContact', { contact }) - .then(() => { - // create empty contact and copy inner data - let localContact = new Contact( - 'BEGIN:VCARD\nUID:' + contact.uid + '\nEND:VCARD', - contact.addressbook - ) - localContact.updateContact(contact.jCal) - this.localContact = localContact - this.loadingData = false - }) - .catch((error) => { - OC.Notification.showTemporary(t('contacts', 'The contact doesn\'t exists anymore on the server.')) - console.error(error) - // trigger a local deletion from the store only - this.$store.dispatch('deleteContact', { contact: this.contact, dav: false }) - }) - } else if (contact) { - // create empty contact and copy inner data - // wait for an update to really push the contact on the server! - this.localContact = new Contact( - 'BEGIN:VCARD\nUID:' + contact.uid + '\nEND:VCARD', - contact.addressbook - ) - this.loadingData = false + if (contact) { + // if contact exists AND if exists on server + if (contact.dav) { + this.$store.dispatch('fetchFullContact', { contact }) + .then(() => { + // create empty contact and copy inner data + let localContact = new Contact( + 'BEGIN:VCARD\nUID:' + contact.uid + '\nEND:VCARD', + contact.addressbook + ) + localContact.updateContact(contact.jCal) + this.localContact = localContact + this.loadingData = false + }) + .catch((error) => { + OC.Notification.showTemporary(t('contacts', 'The contact doesn\'t exists anymore on the server.')) + console.error(error) + // trigger a local deletion from the store only + this.$store.dispatch('deleteContact', { contact: this.contact, dav: false }) + }) + } else { + // create empty contact and copy inner data + // wait for an update to really push the contact on the server! + this.localContact = new Contact( + 'BEGIN:VCARD\nUID:' + contact.uid + '\nEND:VCARD', + contact.addressbook + ) + this.loadingData = false + } + + // scroll to selected contact if any + let list = document.getElementById('contacts-list') + let item = document.querySelector('#' + btoa(contact.key).slice(0, -2)) + let isAbove = list.scrollTop > item.offsetTop + let isUnder = item.offsetTop + item.offsetHeight > list.scrollTop + list.offsetHeight + // check if contact outside visible list area + if (item && (isAbove || isUnder)) { + list.scrollTo(0, item.offsetTop - item.offsetHeight / 2) + } } }, diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContentList/ContentListItem.vue index 88e6bb78..f7ecd1db 100644 --- a/src/components/ContentList/ContentListItem.vue +++ b/src/components/ContentList/ContentListItem.vue @@ -1,6 +1,6 @@ <template> - <div :class="{active: selectedContact === contact.key}" tabindex="0" class="app-content-list-item" - @click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact"> + <div :class="{active: selectedContact === contact.key}" :id="id" tabindex="0" + class="app-content-list-item" @click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact"> <!-- keyboard accessibility will focus the input and not the label --> <!-- <input ref="selected" :id="contact.key" type="checkbox" @@ -10,7 +10,7 @@ <div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon"> {{ contact.displayName | firstLetter }} <!-- try to fetch the avatar only if the contact exists on the server --> - <div v-if="contact.dav" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" /> + <!-- <div v-if="contact.dav" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" /> --> </div> <div class="app-content-list-item-line-one">{{ contact.displayName }}</div> <div v-if="contact.email" class="app-content-list-item-line-two">{{ contact.email }}</div> @@ -41,6 +41,11 @@ export default { return this.$route.params.selectedContact }, + // usable and valid html id for scrollTo + id() { + return window.btoa(this.contact.key).slice(0, -2) + }, + /** * avatar color based on server toRgb method and the displayName * @returns {String} the color in css format diff --git a/src/models/contact.js b/src/models/contact.js index feed1a51..52d713fc 100644 --- a/src/models/contact.js +++ b/src/models/contact.js @@ -119,7 +119,7 @@ export default class Contact { * @memberof Contact */ get key() { - return this.uid + '@' + this.addressbook.id + return this.uid + '~' + this.addressbook.id } /** |