Merge branch 'master' of https://github.com/nextcloud/contacts

4 files changed, 36 insertions, 15 deletions

diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 351156fc..2d1da574 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -118,19 +118,26 @@
 					@close="closeNewCircleIntro"
 					@submit="createNewCircle" />
 
-				<!-- Circles -->
-				<CircleNavigationItem
-					v-for="circle in ellipsisCirclesMenu"
-					:key="circle.key"
-					:circle="circle" />
+				<template v-if="circlesMenu.length > 0">
+					<!-- Circles -->
+					<CircleNavigationItem
+						v-for="circle in ellipsisCirclesMenu"
+						:key="circle.key"
+						:circle="circle" />
+
+					<!-- Toggle circles ellipsis -->
+					<AppNavigationItem
+						v-if="circlesMenu.length > ELLIPSIS_COUNT"
+						:title="collapseCirclesTitle"
+						class="app-navigation__collapse"
+						icon=""
+						@click="onToggleCircles" />
+				</template>
 
-				<!-- Toggle circles ellipsis -->
-				<AppNavigationItem
-					v-if="circlesMenu.length > ELLIPSIS_COUNT"
-					:title="collapseCirclesTitle"
-					class="app-navigation__collapse"
-					icon=""
-					@click="onToggleCircles" />
+				<p v-else-if="!loading"
+					class="app-navigation__circle-desc">
+					{{ CIRCLE_DESC }}
+				</p>
 			</template>
 		</template>
 
@@ -144,7 +151,7 @@
 </template>
 
 <script>
-import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT } from '../../models/constants.ts'
+import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC } from '../../models/constants.ts'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
@@ -201,6 +208,7 @@ export default {
 
 	data() {
 		return {
+			CIRCLE_DESC,
 			ELLIPSIS_COUNT,
 			GROUP_ALL_CONTACTS,
 			GROUP_NO_GROUP_CONTACTS,
@@ -380,15 +388,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$caption-padding: 22px;
+
 #newgroup,
 #newcircle {
-	margin-top: 22px;
+	margin-top: $caption-padding;
 
 	::v-deep a {
 		color: var(--color-text-maxcontrast)
 	}
 }
 
+.app-navigation__circle-desc {
+	margin: 0 $caption-padding;
+}
+
 .app-navigation__collapse ::v-deep a {
 	color: var(--color-text-maxcontrast)
 }
diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index e6156cfb..4b94cfb6 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -37,7 +37,7 @@
 			</div>
 
 			<div class="entity-picker__content">
-				<p> {{ t('contacts', 'Circles allow you to create groups with other users on a Nextcloud instance and share with them.') }}</p>
+				<p> {{ CIRCLE_DESC }}</p>
 				<br>
 
 				<!-- Personal circle, TODO: IMPLEMENT -->
@@ -88,6 +88,8 @@ import { getCapabilities } from '@nextcloud/capabilities'
 import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 
+import { CIRCLE_DESC } from '../../models/constants.ts'
+
 export default {
 	name: 'NewCircleIntro',
 
@@ -108,6 +110,8 @@ export default {
 			circleName: '',
 			isPersonal: false,
 			isLocal: false,
+
+			CIRCLE_DESC,
 		}
 	},
 
diff --git a/src/models/constants.d.ts b/src/models/constants.d.ts
index 219de065..b2aaa26c 100644
--- a/src/models/constants.d.ts
+++ b/src/models/constants.d.ts
@@ -28,6 +28,7 @@ export declare const GROUP_NO_GROUP_CONTACTS: string;
 export declare const GROUP_RECENTLY_CONTACTED: string;
 export declare const ROUTE_CIRCLE = "circle";
 export declare const ELLIPSIS_COUNT = 5;
+export declare const CIRCLE_DESC: string;
 export declare const CIRCLES_MEMBER_TYPES: {
     [x: number]: string;
 };
diff --git a/src/models/constants.ts b/src/models/constants.ts
index 99a262aa..ae7b4374 100644
--- a/src/models/constants.ts
+++ b/src/models/constants.ts
@@ -61,6 +61,8 @@ const MEMBER_TYPE_MAIL: MemberType = 4
 const MEMBER_TYPE_CONTACT: MemberType = 8
 const MEMBER_TYPE_CIRCLE: MemberType = 16
 
+export const CIRCLE_DESC = t('contacts', 'Circles allow you to create groups with other users on a Nextcloud instance and share with them.')
+
 // Circles config flags
 const CIRCLE_CONFIG_SYSTEM: CircleConfig = 4				// System Circle (not managed by the official front-end). Meaning some config are limited
 const CIRCLE_CONFIG_VISIBLE: CircleConfig = 8				// Visible to everyone, if not visible, people have to know its name to be able to find it