From 55bce1fd2f03d0abc33f208f565769ba975d4fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 2 Jun 2021 10:03:58 +0200
Subject: Comply to new resizeable list feature
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                              |  12 ++-
 package-lock.json                              |  50 ++++--------
 src/components/AppContent/AppDetailsToggle.vue |  70 -----------------
 src/components/AppContent/CircleContent.vue    | 101 ++++++++++++-------------
 src/components/AppContent/ContactsContent.vue  |  95 ++++++++++++++---------
 src/components/ContactDetails.vue              |   6 --
 src/views/Contacts.vue                         |  23 +-----
 7 files changed, 131 insertions(+), 226 deletions(-)
 delete mode 100644 src/components/AppContent/AppDetailsToggle.vue

diff --git a/css/contacts.scss b/css/contacts.scss
index 6d411add..0b690d55 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -25,7 +25,6 @@ $grid-height-unit: 40px;
 $grid-input-padding: 7px;
 $grid-input-margin: 3px;
 $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
-$list-width: 300px;
 
 // components
 @import 'SettingsSection';
@@ -42,19 +41,18 @@ $list-width: 300px;
 
 
 // global design overrides
-#app-content-wrapper {
-	display: flex;
+.app-content {
+	// center error messages
+	& > .empty-content {
+		margin: 40vh;
+	}
 }
 
 .app-content-details {
-	// Starts shrinking at the same width as the list
-	flex: 1 1 $list-width;
-	min-width: 0;
 	padding: 0 80px 80px 80px;
 }
 
 .app-content-list {
-	flex: 1 1 $list-width;
 	// Cancel scrolling
 	overflow: visible;
 
diff --git a/package-lock.json b/package-lock.json
index 723123ad..62cb763a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,17 +5,16 @@
 	"requires": true,
 	"dependencies": {
 		"@babel/cli": {
-			"version": "7.13.14",
-			"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.13.14.tgz",
-			"integrity": "sha512-zmEFV8WBRsW+mPQumO1/4b34QNALBVReaiHJOkxhUsdo/AvYM62c+SKSuLi2aZ42t3ocK6OI0uwUXRvrIbREZw==",
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.14.5.tgz",
+			"integrity": "sha512-poegjhRvXHWO0EAsnYajwYZuqcz7gyfxwfaecUESxDujrqOivf3zrjFbub8IJkrqEaz3fvJWh001EzxBub54fg==",
 			"requires": {
-				"@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents",
+				"@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.2",
 				"chokidar": "^3.4.0",
 				"commander": "^4.0.1",
 				"convert-source-map": "^1.1.0",
 				"fs-readdir-recursive": "^1.1.0",
 				"glob": "^7.0.0",
-				"lodash": "^4.17.19",
 				"make-dir": "^2.1.0",
 				"slash": "^2.0.0",
 				"source-map": "^0.5.0"
@@ -2074,15 +2073,15 @@
 			"dev": true
 		},
 		"@nicolo-ribaudo/chokidar-2": {
-			"version": "2.1.8-no-fsevents",
-			"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.tgz",
-			"integrity": "sha512-+nb9vWloHNNMFHjGofEam3wopE3m1yuambrrd/fnPc+lFOMB9ROTqQlche9ByFWNkdNqfSgR/kkQtQ8DzEWt2w==",
+			"version": "2.1.8-no-fsevents.2",
+			"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.2.tgz",
+			"integrity": "sha512-Fb8WxUFOBQVl+CX4MWet5o7eCc6Pj04rXIwVKZ6h1NnqTo45eOQW6aWyhG25NIODvWFwTDMwBsYxrQ3imxpetg==",
 			"optional": true,
 			"requires": {
 				"anymatch": "^2.0.0",
 				"async-each": "^1.0.1",
 				"braces": "^2.3.2",
-				"glob-parent": "^3.1.0",
+				"glob-parent": "^5.1.2",
 				"inherits": "^2.0.3",
 				"is-binary-path": "^1.0.0",
 				"is-glob": "^4.0.0",
@@ -2329,16 +2328,15 @@
 			}
 		},
 		"@vue/component-compiler-utils": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz",
-			"integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==",
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.1.tgz",
+			"integrity": "sha512-Mci9WJYLRjyJEBkGHMPxZ1ihJ9l6gOy2Gr6hpYZUNpQoe5+nbpeb3w00aP+PSHJygCF+fxJsqp7Af1zGDITzuw==",
 			"dev": true,
 			"requires": {
 				"consolidate": "^0.15.1",
 				"hash-sum": "^1.0.2",
 				"lru-cache": "^4.1.2",
 				"merge-source-map": "^1.1.0",
-				"postcss": "^7.0.14",
 				"postcss-selector-parser": "^6.0.2",
 				"prettier": "^1.18.2",
 				"source-map": "~0.6.1",
@@ -5671,24 +5669,12 @@
 			}
 		},
 		"glob-parent": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-			"integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 			"optional": true,
 			"requires": {
-				"is-glob": "^3.1.0",
-				"path-dirname": "^1.0.0"
-			},
-			"dependencies": {
-				"is-glob": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-					"integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-					"optional": true,
-					"requires": {
-						"is-extglob": "^2.1.0"
-					}
-				}
+				"is-glob": "^4.0.1"
 			}
 		},
 		"glob-to-regexp": {
@@ -7634,12 +7620,6 @@
 			"integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
 			"dev": true
 		},
-		"path-dirname": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-			"integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-			"optional": true
-		},
 		"path-exists": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue
deleted file mode 100644
index f9c86b60..00000000
--- a/src/components/AppContent/AppDetailsToggle.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-  - @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 5a6c72f1..a0f1de97 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -21,55 +21,56 @@
   -->
 
 <template>
-	<AppContent>
-		<div v-if="!circle">
-			<EmptyContent icon="icon-circles">
-				{{ t('contacts', 'Please select a circle') }}
-			</EmptyContent>
-		</div>
-
-		<div v-else-if="loading">
-			<EmptyContent icon="icon-loading">
-				{{ t('contacts', 'Loading circle …') }}
-			</EmptyContent>
-		</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" :show-details.sync="showDetails" />
-
-			<!-- main contacts details -->
-			<CircleDetails :circle="circle">
-				<!-- not a member -->
-				<template v-if="!circle.isMember">
-					<!-- Join request in progress -->
-					<EmptyContent v-if="loadingJoin" icon="icon-loading">
-						{{ t('contacts', 'Joining circle') }}
-					</EmptyContent>
-
-					<!-- Pending request validation -->
-					<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
-						{{ t('contacts', 'Your request to join this circle is pending approval') }}
-					</EmptyContent>
-
-					<EmptyContent v-else icon="icon-circles">
-						{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
-
-						<!-- Only show the join button if the circle is accepting requests -->
-						<template v-if="circle.canJoin" #desc>
-							<button :disabled="loadingJoin" class="primary" @click="requestJoin">
-								<Login slot="icon"
-									:size="16"
-									decorative />
-								{{ t('contacts', 'Request to join') }}
-							</button>
-						</template>
-					</EmptyContent>
-				</template>
-			</CircleDetails>
-		</div>
+	<AppContent v-if="!circle">
+		<EmptyContent icon="icon-circles">
+			{{ t('contacts', 'Please select a circle') }}
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else-if="loading">
+		<EmptyContent icon="icon-loading">
+			{{ t('contacts', 'Loading circle …') }}
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else :show-details.sync="showDetails">
+		<!-- member list -->
+		<template #list>
+			<MemberList
+				:list="members"
+				:loading="loadingList"
+				:show-details.sync="showDetails" />
+		</template>
+
+		<!-- main contacts details -->
+		<CircleDetails :circle="circle">
+			<!-- not a member -->
+			<template v-if="!circle.isMember">
+				<!-- Join request in progress -->
+				<EmptyContent v-if="loadingJoin" icon="icon-loading">
+					{{ t('contacts', 'Joining circle') }}
+				</EmptyContent>
+
+				<!-- Pending request validation -->
+				<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
+					{{ t('contacts', 'Your request to join this circle is pending approval') }}
+				</EmptyContent>
+
+				<EmptyContent v-else icon="icon-circles">
+					{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
+
+					<!-- Only show the join button if the circle is accepting requests -->
+					<template v-if="circle.canJoin" #desc>
+						<button :disabled="loadingJoin" class="primary" @click="requestJoin">
+							<Login slot="icon"
+								:size="16"
+								decorative />
+							{{ t('contacts', 'Request to join') }}
+						</button>
+					</template>
+				</EmptyContent>
+			</template>
+		</CircleDetails>
 	</AppContent>
 </template>
 <script>
@@ -79,7 +80,6 @@ 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'
@@ -91,7 +91,6 @@ export default {
 
 	components: {
 		AppContent,
-		AppDetailsToggle,
 		CircleDetails,
 		EmptyContent,
 		Login,
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 779f84cf..2f1f23a9 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -21,48 +21,48 @@
   -->
 
 <template>
-	<AppContent>
-		<div v-if="loading">
-			<EmptyContent icon="icon-loading">
-				{{ t('contacts', 'Loading contacts …') }}
-			</EmptyContent>
-		</div>
-
-		<div v-else-if="isEmptyGroup && !isRealGroup">
-			<EmptyContent icon="icon-contacts-dark">
-				{{ t('contacts', 'There are no contacts yet') }}
-				<template #desc>
-					<button class="primary" @click="newContact">
-						{{ t('contacts', 'Create contact') }}
-					</button>
-				</template>
-			</EmptyContent>
-		</div>
-
-		<div v-else-if="isEmptyGroup && isRealGroup">
-			<EmptyContent icon="icon-contacts-dark">
-				{{ t('contacts', 'There are no contacts in this group') }}
-				<template #desc>
-					<button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)">
-						{{ t('contacts', 'Create contacts') }}
-					</button>
-					<button v-else class="primary" @click="addContactsToGroup(selectedGroup)">
-						{{ t('contacts', 'Add contacts') }}
-					</button>
-				</template>
-			</EmptyContent>
-		</div>
-
-		<div v-else id="app-content-wrapper">
-			<!-- contacts list -->
+	<AppContent v-if="loading">
+		<EmptyContent icon="icon-loading">
+			{{ t('contacts', 'Loading contacts …') }}
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
+		<EmptyContent icon="icon-contacts-dark">
+			{{ t('contacts', 'There are no contacts yet') }}
+			<template #desc>
+				<button class="primary" @click="newContact">
+					{{ t('contacts', 'Create contact') }}
+				</button>
+			</template>
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else-if="isEmptyGroup && isRealGroup">
+		<EmptyContent icon="icon-contacts-dark">
+			{{ t('contacts', 'There are no contacts in this group') }}
+			<template #desc>
+				<button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)">
+					{{ t('contacts', 'Create contacts') }}
+				</button>
+				<button v-else class="primary" @click="addContactsToGroup(selectedGroup)">
+					{{ t('contacts', 'Add contacts') }}
+				</button>
+			</template>
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else :show-details="showDetails" @update:showDetails="hideDetails">
+		<!-- contacts list -->
+		<template #list>
 			<ContactsList
 				:list="contactsList"
 				:contacts="contacts"
 				:search-query="searchQuery" />
+		</template>
 
-			<!-- main contacts details -->
-			<ContactDetails :contact-key="selectedContact" />
-		</div>
+		<!-- main contacts details -->
+		<ContactDetails :contact-key="selectedContact" />
 	</AppContent>
 </template>
 <script>
@@ -116,6 +116,10 @@ export default {
 			return this.$store.getters.getSortedContacts
 		},
 
+		selectedContact() {
+			return this.$route.params.selectedContact
+		},
+
 		/**
 		 * Is this a real group ?
 		 * Aka not a dynamically generated one like `All contacts`
@@ -131,6 +135,10 @@ export default {
 		isEmptyGroup() {
 			return this.contactsList.length === 0
 		},
+
+		showDetails() {
+			return !!this.selectedContact
+		},
 	},
 
 	methods: {
@@ -148,6 +156,19 @@ export default {
 		newContact() {
 			this.$emit('newContact')
 		},
+
+		/**
+		 * Show the list and deselect contact
+		 */
+		hideDetails() {
+			// Reset the selected contact
+			this.$router.push({
+				name: 'group',
+				params: {
+					selectedGroup: this.selectedGroup
+				},
+			})
+		},
 	},
 }
 </script>
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 405d49a7..4fe54d5e 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -768,12 +768,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content-details {
-	flex: 1 1 100%;
-	min-width: 0;
-	padding: 0 80px 80px 80px;
-}
-
 // List of all properties
 section.contact-details {
 	margin: 0 auto;
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index f5f6b58c..44c678cb 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -22,10 +22,7 @@
   -->
 
 <template>
-	<Content app-name="contacts">
-		<!-- go back to list when in details mode -->
-		<AppDetailsToggle v-if="isMobile && selectedContact" @click.native.stop.prevent="showList" />
-
+	<Content :app-name="appName">
 		<!-- new-contact-button + navigation + settings -->
 		<RootNavigation
 			:contacts-list="contactsList"
@@ -73,7 +70,6 @@ import Modal from '@nextcloud/vue/dist/Components/Modal'
 import { showError } from '@nextcloud/dialogs'
 import { VCardTime } from 'ical.js'
 
-import AppDetailsToggle from '../components/AppContent/AppDetailsToggle'
 import CircleContent from '../components/AppContent/CircleContent'
 import ContactsContent from '../components/AppContent/ContactsContent'
 import ContactsPicker from '../components/EntityPicker/ContactsPicker'
@@ -90,7 +86,6 @@ export default {
 	name: 'Contacts',
 
 	components: {
-		AppDetailsToggle,
 		AppNavigationNew,
 		CircleContent,
 		ContactsContent,
@@ -123,6 +118,8 @@ export default {
 
 	data() {
 		return {
+			appName,
+
 			// Let's but the loading state to true if circles is enabled
 			loadingCircles: isCirclesEnabled,
 			loadingContacts: true,
@@ -385,20 +382,6 @@ export default {
 			}
 		},
 
-		/**
-		 * 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
 		 */
-- 
cgit v1.2.3