Fix mobile details toggle

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

2 files changed, 83 insertions, 2 deletions

diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue
new file mode 100644
index 00000000..f9c86b60
--- /dev/null
+++ b/src/components/AppContent/AppDetailsToggle.vue
@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<a v-tooltip="t('contacts', 'Go back to the list')" class="app-details-toggle icon-confirm" href="#" />
+</template>
+
+<script>
+export default {
+	name: 'AppDetailsToggle',
+
+	beforeMount() {
+		this.toggleAppNavigationButton(true)
+	},
+
+	beforeDestroy() {
+		this.toggleAppNavigationButton(false)
+	},
+
+	methods: {
+		toggleAppNavigationButton(hide = true) {
+			const appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')
+			if (appNavigationToggle) {
+				appNavigationToggle.style.display = hide ? 'none' : null
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+	}
+}
+</style>
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index f49f76cf..d5e22f15 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -35,8 +35,10 @@
 		</div>
 
 		<div v-else id="app-content-wrapper">
+			<AppDetailsToggle v-if="isMobile && showDetails" @click.native.stop.prevent="hideDetails" />
+
 			<!-- member list -->
-			<MemberList :list="members" :loading="loadingList" />
+			<MemberList :list="members" :loading="loadingList" :show-details.sync="showDetails" />
 
 			<!-- main contacts details -->
 			<CircleDetails :circle="circle">
@@ -73,9 +75,11 @@
 <script>
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
 import Login from 'vue-material-design-icons/Login'
 
+import AppDetailsToggle from '../AppContent/AppDetailsToggle'
 import CircleDetails from '../CircleDetails'
 import MemberList from '../MemberList'
 import RouterMixin from '../../mixins/RouterMixin'
@@ -87,13 +91,14 @@ export default {
 
 	components: {
 		AppContent,
+		AppDetailsToggle,
 		CircleDetails,
 		EmptyContent,
 		Login,
 		MemberList,
 	},
 
-	mixins: [RouterMixin],
+	mixins: [isMobile, RouterMixin],
 
 	props: {
 		loading: {
@@ -106,6 +111,7 @@ export default {
 		return {
 			loadingJoin: false,
 			loadingList: false,
+			showDetails: false,
 		}
 	},
 
@@ -168,6 +174,11 @@ export default {
 			}
 
 		},
+
+		// Hide the circle details
+		hideDetails() {
+			this.showDetails = false
+		},
 	},
 }
 </script>