Fix non-user avatar on complex background

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
nextcloud-libraries · Sep 20, 2022 · 88afaf1 · 88afaf1
1 parent 8c19b7c
commit 88afaf1
Showing 1 changed file with 39 additions and 11 deletions.
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
@@ -85,6 +85,26 @@ export default {
 	<NcAvatar display-name="Robbie Hyeon-Jeong" :is-no-user="true" />
 ```
 
+### Avatar on complex background
+
+```
+<template>
+	<div class="avatar-background">
+		<NcAvatar class="avatar" :is-no-user="true" display-name="Cecilia Rohese " />
+	</div>
+</template>
+<style scoped>
+.avatar-background {
+	width: 80px;
+	height: 60px;
+	background: linear-gradient(to bottom, #1b9ee5 0%, #1b9ee5 49.99%, #f4dc00 50%, #f4dc00 100%);
+}
+.avatar {
+	margin: 15px 25px;
+}
+</style>
+```
+
 </docs>
 <template>
 	<div ref="main"
@@ -136,8 +156,10 @@ export default {
 			:class="'avatardiv__user-status--' + userStatus.status" />
 
 		<!-- Show the letter if no avatar nor icon class -->
-		<div v-if="userDoesNotExist && !(iconClass || $slots.icon)" :style="initialsStyle" class="unknown">
-			{{ initials }}
+		<div class="avatardiv__initials-wrapper">
+			<div v-if="userDoesNotExist && !(iconClass || $slots.icon)" :style="initialsStyle" class="unknown">
+				{{ initials }}
+			</div>
 		</div>
 	</div>
 </template>
@@ -681,7 +703,6 @@ export default {
 
 	&--unknown {
 		position: relative;
-		background-color: var(--color-text-maxcontrast);
 	}
 
 	&:not(&--unknown) {
@@ -716,14 +737,21 @@ export default {
 		}
 	}
 
-	> .unknown {
-		position: absolute;
-		top: 0;
-		left: 0;
-		display: block;
-		width: 100%;
-		text-align: center;
-		font-weight: normal;
+	.avatardiv__initials-wrapper {
+		height: var(--size);
+		width: var(--size);
+		background-color: var(--color-main-background);
+		border-radius: 50%;
+
+		.unknown {
+			position: absolute;
+			top: 0;
+			left: 0;
+			display: block;
+			width: 100%;
+			text-align: center;
+			font-weight: normal;
+		}
 	}
 
 	img {