Mobile view and back button

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

2 files changed, 36 insertions, 4 deletions

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index d0af8c13..e433c410 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<transition-group id="contacts-list" :class="{'icon-loading': loading}" class="app-content-list"
+	<transition-group id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list"
 		name="list" tag="div">
 		<!-- same uid can coexists between different addressbooks
 			so we need to use the addressbook id as key as well -->
@@ -61,6 +61,9 @@ export default {
 	},
 
 	computed: {
+		selectedContact() {
+			return this.$route.params.selectedContact
+		},
 		selectedGroup() {
 			return this.$route.params.selectedGroup
 		}
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 0facdf61..14ea091a 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -31,6 +31,10 @@
 
 		<!-- main content -->
 		<div id="app-content">
+			<!-- go back to list when in details mode -->
+			<div v-if="selectedContact" id="app-details-toggle" class="icon-confirm"
+				tabindex="0" @click="showList" />
+
 			<div id="app-content-wrapper">
 				<!-- loading -->
 				<import-screen v-if="importState.stage !== 'default'" />
@@ -114,6 +118,11 @@ export default {
 			return this.addressbooks.find(addressbook => !addressbook.readOnly && addressbook.enabled)
 		},
 
+		// are we in mobile mode
+		isMobile() {
+			return document.querySelector('body').offsetWidth < 768
+		},
+
 		/**
 		 * Contacts list based on the selected group.
 		 * Those filters are pretty fast, so let's only
@@ -195,11 +204,15 @@ export default {
 	watch: {
 		// watch url change and group select
 		selectedGroup: function() {
-			this.selectFirstContactIfNone()
+			if (!this.isMobile) {
+				this.selectFirstContactIfNone()
+			}
 		},
 		// watch url change and contact select
 		selectedContact: function() {
-			this.selectFirstContactIfNone()
+			if (!this.isMobile) {
+				this.selectFirstContactIfNone()
+			}
 		}
 	},
 
@@ -289,7 +302,9 @@ export default {
 				}
 			})).then(results => {
 				this.loading = false
-				this.selectFirstContactIfNone()
+				if (!this.isMobile) {
+					this.selectFirstContactIfNone()
+				}
 			})
 		},
 
@@ -321,6 +336,20 @@ export default {
 		},
 		resetSearch() {
 			this.search('')
+		},
+
+		/**
+		 * Show the list and deselect contact
+		 */
+		showList() {
+			// Reset the selected contact
+			this.$router.push({
+				name: 'contact',
+				params: {
+					selectedGroup: this.selectedGroup,
+					selectedContact: undefined
+				}
+			})
 		}
 	}
 }