Migrate AppNavigationCounter to CounterBubble

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

3 files changed, 31 insertions, 21 deletions

diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 96f98b5f..d276bad1 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -90,9 +90,11 @@
 			</ActionButton>
 		</template>
 
-		<AppNavigationCounter v-if="memberCount > 0" slot="counter">
-			{{ memberCount }}
-		</AppNavigationCounter>
+		<template #counter>
+			<NcCounterBubble v-if="memberCount > 0">
+				{{ memberCount }}
+			</NcCounterBubble>
+		</template>
 	</AppNavigationItem>
 </template>
 
@@ -100,7 +102,7 @@
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
@@ -118,7 +120,7 @@ export default {
 		ActionButton,
 		ActionLink,
 		ActionText,
-		AppNavigationCounter,
+		NcCounterBubble,
 		AppNavigationItem,
 		ExitToApp,
 		IconAdd,
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index cbefe26f..adfd3cf9 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -57,9 +57,11 @@
 			</ActionButton>
 		</template>
 
-		<AppNavigationCounter v-if="group.contacts.length > 0" slot="counter">
-			{{ group.contacts.length }}
-		</AppNavigationCounter>
+		<template #counter>
+			<NcCounterBubble v-if="group.contacts.length > 0">
+				{{ group.contacts.length }}
+			</NcCounterBubble>
+		</template>
 	</AppNavigationItem>
 </template>
 
@@ -69,7 +71,7 @@ import download from 'downloadjs'
 import moment from 'moment'
 
 import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import IconContact from 'vue-material-design-icons/AccountMultiple'
 import IconAdd from 'vue-material-design-icons/Plus'
@@ -81,7 +83,7 @@ export default {
 
 	components: {
 		ActionButton,
-		AppNavigationCounter,
+		NcCounterBubble,
 		AppNavigationItem,
 		IconContact,
 		IconAdd,
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 630ad090..62e9a1c3 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -40,9 +40,11 @@
 					<IconContact
 						:size="20" />
 				</template>
-				<AppNavigationCounter v-if="sortedContacts.length" slot="counter">
-					{{ sortedContacts.length }}
-				</AppNavigationCounter>
+				<template #counter>
+					<NcCounterBubble v-if="sortedContacts.length">
+						{{ sortedContacts.length }}
+					</NcCounterBubble>
+				</template>
 			</AppNavigationItem>
 
 			<!-- Organization chart -->
@@ -68,9 +70,11 @@
 					<IconUser
 						:size="20" />
 				</template>
-				<AppNavigationCounter v-if="ungroupedContacts.length" slot="counter">
-					{{ ungroupedContacts.length }}
-				</AppNavigationCounter>
+				<template #counter>
+					<NcCounterBubble v-if="ungroupedContacts.length">
+						{{ ungroupedContacts.length }}
+					</NcCounterBubble>
+				</template>
 			</AppNavigationItem>
 
 			<!-- Recently contacted group -->
@@ -86,9 +90,11 @@
 					<IconRecentlyContacted
 						:size="20" />
 				</template>
-				<AppNavigationCounter v-if="recentlyContactedContacts.contacts.length" slot="counter">
-					{{ recentlyContactedContacts.contacts.length }}
-				</AppNavigationCounter>
+				<template #counter>
+					<NcCounterBubble v-if="recentlyContactedContacts.contacts.length">
+						{{ recentlyContactedContacts.contacts.length }}
+					</NcCounterBubble>
+				</template>
 			</AppNavigationItem>
 
 			<AppNavigationCaption
@@ -186,7 +192,7 @@ import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
 import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
@@ -218,7 +224,7 @@ export default {
 		ActionInput,
 		ActionText,
 		AppNavigation,
-		AppNavigationCounter,
+		NcCounterBubble,
 		AppNavigationItem,
 		AppNavigationSettings,
 		AppNavigationCaption,