Comply to new resizeable list feature

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Jun 3, 2021 · 64e3cae · 64e3cae
1 parent 8c2ae12
commit 64e3cae
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 186 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
 	globals: {
+		appName: true,
 		appVersion: true,
 	},
 

diff --git a/css/contacts.scss b/css/contacts.scss
@@ -42,8 +42,13 @@ $list-width: 300px;
 
 
 // global design overrides
-#app-content-wrapper {
+.app-content-wrapper {
 	display: flex;
+
+	// center error messages
+	.empty-content {
+		margin: auto
+	}
 }
 
 .app-content-details {

diff --git a/src/components/AppContent/AppDetailsToggle.vue b/src/components/AppContent/AppDetailsToggle.vue
diff --git 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
@@ -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,20 @@ 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,
+					selectedContact: undefined,
+				},
+			})
+		},
 	},
 }
 </script>
diff --git 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;