Adjust guest avatar style to be distinguishable from regular users

Signed-off-by: Julius Härtl <jus@bitgrid.net>

4 files changed, 96 insertions, 46 deletions

diff --git a/src/components/AvatarWrapper.vue b/src/components/AvatarWrapper.vue
new file mode 100644
index 000000000..749c580d3
--- /dev/null
+++ b/src/components/AvatarWrapper.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="avatar-wrapper" :style="sessionAvatarStyle">
+		<Avatar v-if="session.userId"
+			:user="session.userId ? session.userId : session.guestName"
+			:is-guest="session.userId === null"
+			:disable-menu="true"
+			:show-user-status="false"
+			:disable-tooltip="true"
+			:size="size" />
+		<div v-else class="avatar" :style="sessionBackgroundStyle">
+			{{ guestInitial }}
+		</div>
+	</div>
+</template>
+
+<script>
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+export default {
+	name: 'AvatarWrapper',
+	components: {
+		Avatar,
+	},
+	props: {
+		session: {
+			type: Object,
+			required: true,
+		},
+		size: {
+			type: Number,
+			default: () => 32,
+		},
+	},
+	computed: {
+		sessionAvatarStyle() {
+			return {
+				...this.sessionBackgroundStyle,
+				'border-color': this.session.color,
+				'border-width': '2px',
+				'border-style': 'solid',
+				'--size': this.size + 'px',
+				'--font-size': this.size / 2 + 'px',
+			}
+		},
+		sessionBackgroundStyle() {
+			return {
+				'background-color': this.session.userId ? this.session.color + ' !important' : '#b9b9b9',
+			}
+		},
+		guestInitial() {
+			return this.session.guestName === '' ? '?' : this.session.guestName.slice(0, 1).toUpperCase()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.avatar, .avatar-wrapper {
+	border-radius: 50%;
+	width: var(--size);
+	height: var(--size);
+	text-align: center;
+	color: #ffffff;
+	line-height: var(--size);
+	font-size: var(--font-size);
+	font-weight: normal;
+}
+</style>
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index fe65f430f..32551cad4 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -58,7 +58,7 @@
 							{{ lastSavedStatus }}
 						</div>
 						<SessionList :sessions="filteredSessions">
-							<GuestNameDialog v-if="isPublic && currentSession.guestName" />
+							<GuestNameDialog v-if="isPublic && !currentSession.userId" :session="currentSession" />
 						</SessionList>
 					</div>
 					<slot name="header" />
diff --git a/src/components/GuestNameDialog.vue b/src/components/GuestNameDialog.vue
index 370b78754..5a75de94d 100644
--- a/src/components/GuestNameDialog.vue
+++ b/src/components/GuestNameDialog.vue
@@ -22,8 +22,11 @@
 
 <template>
 	<form v-tooltip="t('text', 'Enter your name so other users can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
-		<label><Avatar :url="avatarUrl" :disable-tooltip="true" :size="32" /></label>
-		<input v-model="guestName" type="text" :aria-label="t('text', 'Edit guest name')">
+		<label><AvatarWrapper :session="session" :size="32" /></label>
+		<input v-model="guestName"
+			type="text"
+			:aria-label="t('text', 'Edit guest name')"
+			:placeholder="t('text', 'Guest')">
 		<input type="submit"
 			class="icon-confirm"
 			:aria-label="t('text', 'Save guest name')"
@@ -33,19 +36,27 @@
 
 <script>
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import { generateUrl } from '@nextcloud/router'
+import AvatarWrapper from './AvatarWrapper.vue'
 import { useSyncServiceMixin } from './EditorWrapper.provider.js'
 
 export default {
 	name: 'GuestNameDialog',
 	components: {
-		Avatar,
+		AvatarWrapper,
 	},
 	directives: {
 		tooltip: Tooltip,
 	},
-	mixins: [useSyncServiceMixin],
+	mixins: [
+		useSyncServiceMixin,
+	],
+	props: {
+		session: {
+			type: Object,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			guestName: '',
diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue
index fcd5e1784..0e3ffb017 100644
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@@ -21,23 +21,15 @@
   -->
 
 <template>
-	<Popover class="session-list" placement="top">
+	<Popover class="session-list" placement="bottom">
 		<button slot="trigger"
 			v-tooltip.bottom="t('text', 'Participants')"
 			class="avatar-list">
 			<div class="avatardiv icon-group" />
-			<div v-for="session in sessionsVisible"
+			<AvatarWrapper v-for="session in sessionsVisible"
 				:key="session.id"
-				class="avatar-wrapper"
-				:style="sessionStyle(session)">
-				<Avatar :style="avatarStyle(session)"
-					:user="session.userId ? session.userId : session.guestName"
-					:is-guest="session.userId === null"
-					:disable-menu="true"
-					:show-user-status="false"
-					:disable-tooltip="true"
-					:size="44" />
-			</div>
+				:session="session"
+				:size="40" />
 		</button>
 		<template #default>
 			<div class="session-menu">
@@ -46,15 +38,7 @@
 					<li v-for="session in participantsPopover"
 						:key="session.id"
 						:style="avatarStyle(session)">
-						<div class="avatar-wrapper"
-							:style="sessionStyle(session)">
-							<Avatar :user="session.userId ? session.userId : session.guestName"
-								:is-guest="session.userId === null"
-								:disable-menu="true"
-								:show-user-status="false"
-								:disable-tooltip="true"
-								:size="32" />
-						</div>
+						<AvatarWrapper :session="session" :size="32" />
 						<span class="session-label">
 							{{ session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest')) }}
 						</span>
@@ -75,9 +59,9 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AvatarWrapper from './AvatarWrapper.vue'
 import store from '../mixins/store.js'
 
 const COLLABORATOR_IDLE_TIME = 60
@@ -86,7 +70,7 @@ const COLLABORATOR_DISCONNECT_TIME = 90
 export default {
 	name: 'SessionList',
 	components: {
-		Avatar,
+		AvatarWrapper,
 		Popover,
 	},
 	directives: {
@@ -131,14 +115,6 @@ export default {
 		currentSession() {
 			return Object.values(this.sessions).find((session) => session.isCurrent)
 		},
-		sessionStyle() {
-			return (session) => {
-				return {
-					'border-color': session.color,
-					'background-color': session.color + ' !important',
-				}
-			}
-		},
 		avatarStyle() {
 			return (session) => {
 				return {
@@ -169,8 +145,10 @@ export default {
 
 		.avatar-wrapper {
 			margin: 0 -8px 0 0;
-			height: 44px;
-			width: 44px;
+			z-index: 1;
+			border-radius: 50%;
+			overflow: hidden;
+			box-sizing: content-box !important;
 		}
 
 		.icon-more, .icon-group, .icon-settings-dark {
@@ -181,13 +159,6 @@ export default {
 		}
 	}
 
-	.avatar-wrapper {
-		z-index: 1;
-		border-radius: 50%;
-		overflow: hidden;
-		box-sizing: content-box !important;
-	}
-
 	.session-menu {
 		max-width: 280px;
 		padding-top: 6px;