replace ncAvatar's icon class with mdIcons

Signed-off-by: dartcafe <github@dartcafe.de>

1 files changed, 34 insertions, 45 deletions

diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue
index 5bd906ad..3eefb7ac 100644
--- a/src/js/components/User/UserItem.vue
+++ b/src/js/components/User/UserItem.vue
@@ -28,11 +28,21 @@
 			:is-guest="isGuestComputed"
 			:menu-position="menuPosition"
 			:size="iconSize"
-			:icon-class="avatarIcon"
 			:show-user-status="showUserStatus"
 			:user="avatarUserId"
 			:display-name="name"
-			:is-no-user="isNoUser" />
+			:is-no-user="isNoUser">
+			<template v-if="useIconSlot" #icon>
+				<LinkIcon v-if="type==='public'" :size="mdIconSize" />
+				<InternalLinkIcon v-if="type==='internalAccess'" :size="mdIconSize" />
+				<ContactIcon v-if="type==='contact'" :size="mdIconSize" />
+				<EmailIcon v-if="type==='email'" :size="mdIconSize" />
+				<ShareIcon v-if="type==='external'" :size="mdIconSize" />
+				<ContactGroupIcon v-if="type==='contactGroup'" :size="mdIconSize" />
+				<GroupIcon v-if="type==='group'" :size="mdIconSize" />
+				<CircleIcon v-if="type==='circle'" :size="mdIconSize" />
+			</template>
+		</NcAvatar>
 
 		<AdminIcon v-if="icon && type === 'admin'" :size="16" class="type-icon" />
 
@@ -56,6 +66,7 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
+
 import { NcAvatar } from '@nextcloud/vue'
 
 export default {
@@ -64,6 +75,14 @@ export default {
 	components: {
 		NcAvatar,
 		AdminIcon: () => import('vue-material-design-icons/ShieldCrownOutline.vue'),
+		LinkIcon: () => import('vue-material-design-icons/LinkVariant.vue'),
+		InternalLinkIcon: () => import('vue-material-design-icons/LinkVariant.vue'),
+		ContactIcon: () => import('vue-material-design-icons/CardAccountDetails.vue'),
+		EmailIcon: () => import('vue-material-design-icons/Email.vue'),
+		ShareIcon: () => import('vue-material-design-icons/ShareVariant.vue'),
+		ContactGroupIcon: () => import('vue-material-design-icons/AccountGroupOutline.vue'),
+		GroupIcon: () => import('vue-material-design-icons/AccountMultiple.vue'),
+		CircleIcon: () => import('vue-material-design-icons/GoogleCirclesExtended.vue'),
 	},
 
 	inheritAttrs: false,
@@ -144,6 +163,10 @@ export default {
 			type: Number,
 			default: 32,
 		},
+		mdIconSize: {
+			type: Number,
+			default: 20,
+		},
 		condensed: {
 			type: Boolean,
 			default: false,
@@ -155,6 +178,10 @@ export default {
 			return this.$route?.name === 'publicVote' || this.isGuest || this.isNoUser
 		},
 
+		useIconSlot() {
+			return !['user', 'admin'].includes(this.type)
+		},
+
 		name() {
 			if (this.type === 'public' && this.userId !== 'addPublic') {
 				return t('polls', 'Public link')
@@ -204,55 +231,12 @@ export default {
 		showUserStatus() {
 			return Boolean(getCurrentUser())
 		},
-
-		avatarIcon() {
-			if (this.type === 'public') {
-				return 'icon-svg-md-link'
-			}
-
-			if (this.type === 'internalAccess') {
-				return 'icon-svg-md-link'
-			}
-
-			if (this.type === 'contact') {
-				return 'icon-svg-md-email'
-			}
-
-			if (this.type === 'email') {
-				return 'icon-svg-md-email'
-			}
-
-			if (this.type === 'external') {
-				return 'icon-svg-md-share'
-			}
-
-			if (this.type === 'contactGroup') {
-				return 'icon-group'
-			}
-
-			if (this.type === 'group') {
-				return 'icon-group'
-			}
-
-			if (this.type === 'circle') {
-				return 'icon-circles'
-			}
-
-			return ''
-		},
 	},
 }
 
 </script>
 
 <style lang="scss">
-.avatar-class-icon {
-	border-radius: 50%;
-	background-color: var(--color-primary-element) !important;
-	height: 100%;
-	background-size: 16px;
-}
-
 .type-icon {
 	position: absolute;
 	background-size: 16px;
@@ -271,6 +255,11 @@ export default {
 	}
 }
 
+.user-item__avatar .material-design-icon {
+	background-color: var(--color-primary-element);
+	border-radius: 50%;
+}
+
 .user-item__name {
 	flex: 1;
 	min-width: 50px;