Scroll to selected contact

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

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
 	}
 
 	/**