Merge pull request #2649 from nextcloud/enh/avatar-md-icons

replace ncAvatar's icon class with mdIcons

img/polls-black.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
-	<g fill="#000">
-		<rect y="2" x="3" height="26" width="7" />
-		<rect y="12" x="12" height="16" width="7" />
-		<rect y="8" x="21" height="20" width="7" />
-	</g>
-</svg>

lib/Activity/PollChanges.php

@@ -54,7 +54,7 @@ class PollChanges implements IFilter {
 	}
 
 	public function getIcon() : string {
-		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('polls', 'polls-black.svg'));
+		return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('polls', 'polls.svg'));
 	}
 
 	public function getPriority() : int {

lib/Notification/Notifier.php

@@ -108,7 +108,7 @@ class Notifier implements INotifier {
 
 		$notification->setIcon(
 			$this->urlGenerator->getAbsoluteURL(
-				$this->urlGenerator->imagePath('polls', 'polls-black.svg')
+				$this->urlGenerator->imagePath('polls', 'polls.svg')
 			)
 		);
 

lib/Provider/ActivityProvider.php

@@ -94,7 +94,7 @@ class ActivityProvider implements IProvider {
 		}
 
 		$this->l10n = $this->transFactory->get($event->getApp(), $language);
-		$event->setIcon($this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath($event->getApp(), 'polls-black.svg')));
+		$event->setIcon($this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath($event->getApp(), 'polls.svg')));
 		$this->setSubjects($event, $this->activityService->getActivityMessage($event, $language, $this->activityManager->isFormattingFilteredObject()));
 		return $event;
 	}

lib/Settings/AdminSection.php

@@ -52,6 +52,6 @@ class AdminSection implements IIconSection {
 	}
 
 	public function getIcon(): string {
-		return $this->urlGenerator->imagePath('polls', 'polls-black.svg');
+		return $this->urlGenerator->imagePath('polls', 'polls.svg');
 	}
 }

lib/Settings/PersonalSection.php

@@ -52,6 +52,6 @@ class PersonalSection implements IIconSection {
 	}
 
 	public function getIcon(): string {
-		return $this->urlGenerator->imagePath('polls', 'polls-black.svg');
+		return $this->urlGenerator->imagePath('polls', 'polls.svg');
 	}
 }

src/js/App.vue

@@ -40,7 +40,6 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import './assets/scss/colors.scss'
 import './assets/scss/hacks.scss'
 import './assets/scss/icons.scss'
-import './assets/scss/icons-md.scss'
 import './assets/scss/print.scss'
 import './assets/scss/transitions.scss'
 import './assets/scss/markdown.scss'

src/js/assets/icons/material-design/email.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>

src/js/assets/icons/material-design/link-variant.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>

src/js/assets/icons/material-design/share-variant.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>

src/js/assets/scss/icons-md.scss

@@ -1,25 +0,0 @@
-// material design icons
-@mixin svg-icon($url) {
-    background-image: $url;
-}
-
-:root {
-	--icon-md-email: url('../icons/material-design/email.svg');
-	--icon-md-share-variant: url('../icons/material-design/share-variant.svg');
-	--icon-md-link-variant: url('../icons/material-design/link-variant.svg');
-
-	--icon-size: 18px;
-	--icon-md-color-default: #000;
-	--icon-color-dark: #000;
-	--icon-md-color-light: #fff;
-}
-
-[class*='icon-mask-md-'] {
-	background-color: #000;
-}
-
-// material design icons
-// just svg background icon
-.icon-svg-md-email { @include svg-icon(var(--icon-md-email)); }
-.icon-svg-md-share { @include svg-icon(var(--icon-md-share-variant)); }
-.icon-svg-md-link { @include svg-icon(var(--icon-md-link-variant)); }

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" />
 
@@ -42,11 +52,8 @@
 			<div class="name">
 				{{ name }}
 			</div>
-			<div v-if="type === 'admin'" class="description">
-				{{ t("polls", "Is granted admin rights for this poll") }}
-			</div>
-			<div v-else-if="displayEmailAddress" class="description">
-				{{ displayEmailAddress }}
+			<div class="description">
+				{{ description }}
 			</div>
 		</div>
 
@@ -64,6 +71,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 +159,10 @@ export default {
 			type: Number,
 			default: 32,
 		},
+		mdIconSize: {
+			type: Number,
+			default: 20,
+		},
 		condensed: {
 			type: Boolean,
 			default: false,
@@ -155,27 +174,24 @@ export default {
 			return this.$route?.name === 'publicVote' || this.isGuest || this.isNoUser
 		},
 
+		useIconSlot() {
+			return !['user', 'admin'].includes(this.type)
+		},
+		description() {
+			if (this.type === 'admin') return t('polls', 'Is granted admin rights for this poll')
+			if (this.displayEmailAddress) return this.displayEmailAddress
+			return ''
+		},
+
 		name() {
-			if (this.type === 'public' && this.userId !== 'addPublic') {
-				return t('polls', 'Public link')
-			}
-
-			if (this.type === 'internalAccess') {
-				return t('polls', 'Internal access')
-			}
-
-			if (this.displayName) {
-				return this.displayName
-			}
-
+			if (this.type === 'public' && this.userId !== 'addPublic') return t('polls', 'Public link')
+			if (this.type === 'internalAccess') return t('polls', 'Internal access')
+			if (this.displayName) return this.displayName
 			return this.userId
-
 		},
 
 		avatarUserId() {
-			if (this.isGuestComputed) {
-				return this.name
-			}
+			if (this.isGuestComputed) return this.name
 			return this.userId
 		},
 
@@ -198,61 +214,19 @@ export default {
 			if (this.showEmail && ['external', 'email'].includes(this.type) && this.emailAddress !== this.name) {
 				return this.emailAddress
 			}
+
 			return ''
 		},
 
 		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 +245,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;