From c57c5659b5b73fc1e37b0c04b9f6a42506d8f706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Mon, 19 Nov 2018 19:22:10 +0100
Subject: Mobile view and back button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/views/Contacts.vue | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

(limited to 'src/views')

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
+				}
+			})
 		}
 	}
 }
-- 
cgit v1.2.3