From c1ec4fce4182cfad4533481464ebe8e7ab766650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sun, 6 Sep 2020 18:23:02 +0200
Subject: [PATCH] Add back the app details toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 css/contacts.scss      |  4 ----
 src/views/Contacts.vue | 44 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/css/contacts.scss b/css/contacts.scss
index 72ed427d0..d71474a34 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -26,10 +26,6 @@ $grid-input-padding: 7px;
 $grid-input-margin: 3px;
 $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
 
-#app-content-wrapper {
-	display: flex;
-}
-
 // components
 @import 'SettingsSection';
 @import 'Settings/SettingsAddressbook';
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index ff3167bae..97f33223c 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -23,6 +23,12 @@
 
 <template>
 	<Content app-name="contacts">
+		<!-- go back to list when in details mode -->
+		<a v-if="selectedContact && isMobile"
+			class="app-details-toggle icon-confirm"
+			href="#"
+			@click.stop.prevent="showList" />
+
 		<!-- new-contact-button + navigation + settings -->
 		<AppNavigation>
 			<!-- new-contact-button -->
@@ -687,6 +693,20 @@ export default {
 			this.searchQuery = ''
 		},
 
+		/**
+		 * Show the list and deselect contact
+		 */
+		showList() {
+			// Reset the selected contact
+			this.$router.push({
+				name: 'contact',
+				params: {
+					selectedGroup: this.selectedGroup,
+					selectedContact: undefined,
+				},
+			})
+		},
+
 		/**
 		 * Done importing, the user closed the import status screen
 		 */
@@ -833,4 +853,28 @@ export default {
 #app-content-wrapper {
 	display: flex;
 }
+
+.app-details-toggle {
+	position: absolute;
+	width: 44px;
+	height: 44px;
+	padding: 14px;
+	cursor: pointer;
+	opacity: .6;
+	font-size: 16px;
+	line-height: 17px;
+	transform: rotate(180deg);
+	background-color: var(--color-main-background);
+	z-index: 2000;
+	&:active,
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+
+	// Hide app-navigation toggle if shown
+	&::v-deep + .app-navigation .app-navigation-toggle {
+		display: none;
+	}
+}
 </style>