diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2021-06-04 08:22:25 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2021-06-04 13:15:38 +0200 |
commit | 4b8ee4e17aebb12904ea906633a3e735bfcfeb65 (patch) | |
tree | b7090320e6a1690be6183b65207bcf7ba81998a1 | |
parent | ce3bf333752d06926df335fa877e8443a89b1f91 (diff) |
Show explanatory description on empty circles list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | src/components/AppNavigation/RootNavigation.vue | 42 | ||||
-rw-r--r-- | src/components/EntityPicker/NewCircleIntro.vue | 6 | ||||
-rw-r--r-- | src/models/constants.d.ts | 1 | ||||
-rw-r--r-- | src/models/constants.ts | 2 |
4 files changed, 36 insertions, 15 deletions
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue index 91c81cc7..c9580f1c 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 b5300e91..3b0e0172 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 --> @@ -85,6 +85,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', @@ -105,6 +107,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 |