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 /src/components/AppNavigation/RootNavigation.vue | |
parent | ce3bf333752d06926df335fa877e8443a89b1f91 (diff) |
Show explanatory description on empty circles list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src/components/AppNavigation/RootNavigation.vue')
-rw-r--r-- | src/components/AppNavigation/RootNavigation.vue | 42 |
1 files changed, 28 insertions, 14 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) } |