Merge pull request #2734 from nextcloud/bugfix/2590/dont-override-style-of-avatars

Don't override the avatar style to "fix" guests

src/assets/avatar.scss

@@ -0,0 +1,62 @@
+/**
+ * @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+@import 'variables.scss';
+
+
+@mixin avatar-mixin($size: 32px) {
+	.avatar-#{$size} {
+		position: sticky;
+		top: 0;
+		width: $size;
+		height: $size;
+		line-height: $size;
+		font-size: $size / 2;
+		border-radius: 50%;
+
+		&.icon {
+			padding: 20px 10px 10px 10px;
+			border-radius: 50%;
+			height: $size;
+			width: $size;
+			background-color: var(--color-background-darker);
+		}
+
+		&.bot {
+			padding-left: 5px;
+			line-height: $size;
+			border-radius: 50%;
+			background-color: var(--color-background-darker);
+		}
+
+		&.guest {
+			line-height: $size;
+			font-size: $size / 2;
+			color: $color-guests-avatar;
+			background-color: $color-background-guests-avatar;
+			padding: 0;
+			display: block;
+			text-align: center;
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}

src/components/CallView/CallView.vue

@@ -438,11 +438,6 @@ export default {
 	width: 100%;
 }
 
-.videoContainer ::v-deep .avatar-container .avatardiv--unknown {
-	// Force grey background for guest avatars
-	background-color: #b9b9b9 !important;
-}
-
 .videoContainer ::v-deep .avatar-container .avatardiv {
 	display: block;
 	margin-left: auto;

src/components/CallView/LocalVideo.vue

@@ -28,11 +28,11 @@
 				:disable-tooltip="true"
 				:user="userId"
 				:display-name="displayName" />
-			<Avatar v-else
-				:size="avatarSize"
-				:disable-menu="true"
-				:disable-tooltip="true"
-				:display-name="guestName" />
+			<div v-else
+				:class="avatarSizeClass"
+				class="avatar guest">
+				{{ firstLetterOfGuestName }}
+			</div>
 		</div>
 		<LocalMediaControls ref="localMediaControls"
 			:model="localMediaModel"
@@ -85,10 +85,18 @@ export default {
 			return this.localCallParticipantModel.attributes.guestName || localStorage.getItem('nick') || '?'
 		},
 
+		firstLetterOfGuestName() {
+			return this.guestName.substring(0, 1)
+		},
+
 		avatarSize() {
 			return this.useConstrainedLayout ? 64 : 128
 		},
 
+		avatarSizeClass() {
+			return 'avatar-' + this.avatarSize + 'px'
+		},
+
 	},
 
 	watch: {
@@ -126,3 +134,9 @@ export default {
 
 }
 </script>
+
+<style lang="scss" scoped>
+@import '../../assets/avatar.scss';
+@include avatar-mixin(64px);
+@include avatar-mixin(128px);
+</style>

src/components/CallView/Video.vue

@@ -33,12 +33,11 @@
 				:user="model.attributes.userId"
 				:display-name="model.attributes.name"
 				:class="avatarClass" />
-			<Avatar v-else
-				:size="avatarSize"
-				:disable-menu="true"
-				:disable-tooltip="true"
-				:display-name="firstLetterOfGuestName"
-				:class="avatarClass" />
+			<div v-else
+				:class="avatarSizeClass"
+				class="avatar guest">
+				{{ firstLetterOfGuestName }}
+			</div>
 		</div>
 		<div class="nameIndicator">
 			{{ participantName }}
@@ -118,6 +117,10 @@ export default {
 			return (this.useConstrainedLayout && !this.sharedData.promoted) ? 64 : 128
 		},
 
+		avatarSizeClass() {
+			return 'avatar-' + this.avatarSize + 'px'
+		},
+
 		avatarClass() {
 			return {
 				'icon-loading': this.model.attributes.connectionState !== ConnectionState.CONNECTED && this.model.attributes.connectionState !== ConnectionState.COMPLETED && this.model.attributes.connectionState !== ConnectionState.FAILED_NO_RESTART,
@@ -125,7 +128,7 @@ export default {
 		},
 
 		firstLetterOfGuestName() {
-			return this.model.attributes.name || '?'
+			return (this.model.attributes.name || '?').substring(0, 1)
 		},
 
 		participantName() {
@@ -241,6 +244,10 @@ export default {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
+@import '../../assets/avatar.scss';
+@include avatar-mixin(64px);
+@include avatar-mixin(128px);
+
 .mediaIndicator {
 	position: absolute;
 	width: 100%;

src/components/MessagesList/MessagesGroup/AuthorAvatar.vue

@@ -25,17 +25,17 @@
 		:user="authorId"
 		:display-name="displayName" />
 	<div v-else-if="isDeletedUser"
-		class="avatar guest">
+		class="avatar-32px guest">
 		X
 	</div>
 	<div v-else-if="isGuest"
-		class="avatar guest">
+		class="avatar-32px guest">
 		{{ firstLetterOfGuestName }}
 	</div>
 	<div v-else-if="isChangelog"
 		class="avatar icon icon-changelog" />
 	<div v-else
-		class="avatar bot">
+		class="avatar-32px bot">
 		&gt;_
 	</div>
 </template>
@@ -86,39 +86,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables.scss';
+@import '../../../assets/avatar.scss';
 
 // size of avatars of chat message authors
 $author-avatar-size: 32px;
+@include avatar-mixin($author-avatar-size);
 
-.avatar {
-	position: sticky;
-	top: 0;
-	height: $author-avatar-size;
-	width: $author-avatar-size;
-
-	&.icon {
-		padding: 20px 10px 10px 10px;
-		border-radius: 50%;
-		height: $author-avatar-size;
-		width: $author-avatar-size;
-	}
-
-	&.bot {
-		padding-left: 5px;
-		line-height: $author-avatar-size;
-		border-radius: 50%;
-		background-color: var(--color-background-darker);
-	}
-
-	&.guest {
-		color: $color-guests-avatar;
-		background-color: $color-background-guests-avatar;
-		padding: 0;
-		line-height: $author-avatar-size;
-		border-radius: 50%;
-		display: block;
-		text-align: center;
-	}
-}
 </style>

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -29,14 +29,14 @@
 		@click="handleClick">
 		<div class="participant-row__avatar-wrapper">
 			<div v-if="iconClass"
-				class="avatar icon"
+				class="avatar-32px icon"
 				:class="iconClass" />
 			<Avatar v-else-if="computedId"
 				:user="computedId"
 				:display-name="computedName"
 				menu-position="left" />
 			<div v-else
-				class="avatar guest">
+				class="avatar-32px guest">
 				{{ firstLetterOfGuestName }}
 			</div>
 		</div>
@@ -258,10 +258,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../../assets/variables.scss';
-
-$icon-size: 32px;
-
 .selected {
 	background-color: var(--color-primary-light);
 	border-radius: 5px;
@@ -277,28 +273,12 @@ $icon-size: 32px;
 	border-radius: 22px;
 
 	&__avatar-wrapper {
-		height: $icon-size;
-		width: $icon-size;
+		$avatar-size: 32px;
+		height: $avatar-size;
+		width: $avatar-size;
 
-		.avatar {
-			width: $icon-size;
-			height: $icon-size;
-			line-height: $icon-size;
-			font-size: $icon-size / 2;
-			border-radius: 50%;
-
-			&.icon {
-				background-color: var(--color-background-darker);
-			}
-
-			&.guest {
-				color: $color-guests-avatar;
-				background-color: $color-background-guests-avatar;
-				padding: 0;
-				display: block;
-				text-align: center;
-			}
-		}
+		@import '../../../../../assets/avatar.scss';
+		@include avatar-mixin($avatar-size);
 	}
 	&__user-name {
 		margin-left: 6px;