Adjust guest avatar style to be distinguishable from regular users

Signed-off-by: Julius Härtl <jus@bitgrid.net>
2022-05-25 14:33:08 +02:00 · 2022-05-25 14:33:08 +02:00 · a79b154489
--- a/lib/Service/SessionService.php
+++ b/lib/Service/SessionService.php
@ -49,7 +49,7 @@ class SessionService {
 	/** @var IAvatarManager */
 	private $avatarManager;

-	/** @var string */
+	/** @var string|null */
 	private $userId;

 	/** @var Session cache current session in the request */
--- a/src/components/AvatarWrapper.vue
+++ 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>
--- 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" />
--- 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: '',
--- 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;
--- a/tests/psalm-baseline.xml
+++ b/tests/psalm-baseline.xml
@ -1,31 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <files psalm-version="4.x-dev@">
  <file src="lib/AppInfo/Application.php">
+    <InvalidArgument occurrences="1">
+      <code>RegisterDirectEditorEventListener::class</code>
+    </InvalidArgument>
    <UndefinedClass occurrences="3">
      <code>BeforeTemplateRenderedEvent</code>
      <code>LoadAdditionalScriptsEvent</code>
      <code>LoadViewer</code>
    </UndefinedClass>
-    <InvalidArgument occurrences="3">
-      <code>registerEventListener</code>
-    </InvalidArgument>
-  </file>
-  <file src="lib/Command/ResetDocument.php">
-    <ImplementedReturnTypeMismatch occurrences="1">
-      <code>void</code>
-    </ImplementedReturnTypeMismatch>
  </file>
  <file src="lib/Controller/DirectSessionController.php">
    <UndefinedClass occurrences="1">
      <code>InvalidTokenException</code>
    </UndefinedClass>
  </file>
-  <file src="lib/Controller/PublicSessionController.php">
-    <InvalidCatch occurrences="1"/>
-    <MissingDependency occurrences="1">
-      <code>ShareNotFound</code>
-    </MissingDependency>
-  </file>
  <file src="lib/Controller/SettingsController.php">
    <UndefinedThisPropertyAssignment occurrences="1">
      <code>$this-&gt;userId</code>
@ -35,41 +24,26 @@
    </UndefinedThisPropertyFetch>
  </file>
  <file src="lib/Controller/WorkspaceController.php">
-    <InvalidCatch occurrences="2"/>
    <InvalidReturnType occurrences="3">
      <code>DataResponse</code>
      <code>DataResponse</code>
      <code>DataResponse</code>
    </InvalidReturnType>
-    <MissingDependency occurrences="10">
-      <code>$e</code>
-      <code>$e</code>
+    <MissingDependency occurrences="4">
      <code>$this-&gt;rootFolder</code>
      <code>$this-&gt;rootFolder</code>
      <code>IRootFolder</code>
      <code>IRootFolder</code>
-      <code>ShareNotFound</code>
-      <code>StorageNotAvailableException</code>
-      <code>StorageNotAvailableException</code>
    </MissingDependency>
-    <UndefinedClass occurrences="1">
-      <code>Exception</code>
-    </UndefinedClass>
    <UndefinedInterfaceMethod occurrences="1">
      <code>open</code>
    </UndefinedInterfaceMethod>
-    <UndefinedThisPropertyFetch occurrences="1">
-      <code>$this-&gt;logger</code>
-    </UndefinedThisPropertyFetch>
  </file>
  <file src="lib/DAV/WorkspacePlugin.php">
    <UndefinedClass occurrences="1">
      <code>ServerPlugin</code>
    </UndefinedClass>
  </file>
-  <file src="lib/Db/SessionMapper.php">
-    <MoreSpecificImplementedParamType occurrences="1"/>
-  </file>
  <file src="lib/Db/StepMapper.php">
    <InvalidReturnStatement occurrences="1"/>
    <InvalidReturnType occurrences="1">
@ -97,28 +71,18 @@
    </UndefinedClass>
  </file>
  <file src="lib/Service/ApiService.php">
-    <InvalidArgument occurrences="1">
-      <code>$file</code>
-    </InvalidArgument>
    <UndefinedDocblockClass occurrences="1"/>
  </file>
  <file src="lib/Service/DocumentService.php">
-    <InvalidCatch occurrences="3"/>
-    <InvalidScalarArgument occurrences="1"/>
    <MismatchingDocblockReturnType occurrences="1">
      <code>Entity</code>
    </MismatchingDocblockReturnType>
-    <MissingDependency occurrences="7">
+    <MissingDependency occurrences="3">
      <code>$this-&gt;rootFolder</code>
      <code>IRootFolder</code>
      <code>IRootFolder</code>
-      <code>ShareNotFound</code>
-      <code>ShareNotFound</code>
-      <code>ShareNotFound</code>
-      <code>ShareNotFound</code>
    </MissingDependency>
-    <UndefinedClass occurrences="2">
-      <code>File</code>
+    <UndefinedClass occurrences="1">
      <code>\OC\User\NoUserException</code>
    </UndefinedClass>
    <UndefinedMagicMethod occurrences="18">
@ -141,20 +105,38 @@
      <code>setSessionId</code>
      <code>setVersion</code>
    </UndefinedMagicMethod>
-    <UndefinedThisPropertyFetch occurrences="1">
-      <code>$this-&gt;lockingProvider</code>
-    </UndefinedThisPropertyFetch>
+  </file>
+  <file src="lib/Service/ImageService.php">
+    <MissingDependency occurrences="6">
+      <code>$this-&gt;rootFolder</code>
+      <code>$this-&gt;rootFolder</code>
+      <code>$this-&gt;rootFolder</code>
+      <code>$this-&gt;rootFolder</code>
+      <code>IRootFolder</code>
+      <code>IRootFolder</code>
+    </MissingDependency>
+    <UndefinedClass occurrences="3">
+      <code>ClientException</code>
+      <code>ConnectException</code>
+      <code>ServerException</code>
+    </UndefinedClass>
+    <UndefinedDocblockClass occurrences="8">
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+      <code>\OC\User\NoUserException</code>
+    </UndefinedDocblockClass>
  </file>
  <file src="lib/Service/SessionService.php">
-    <UndefinedDocblockClass occurrences="8">
-      <code>$color-&gt;b</code>
+    <UndefinedDocblockClass occurrences="4">
      <code>$color-&gt;b</code>
      <code>$color-&gt;g</code>
-      <code>$color-&gt;g</code>
      <code>$color-&gt;r</code>
-      <code>$color-&gt;r</code>
-      <code>$this-&gt;avatarManager-&gt;getGuestAvatar($guestName)-&gt;avatarBackgroundColor($guestName)</code>
-      <code>$this-&gt;avatarManager-&gt;getGuestAvatar($userName)-&gt;avatarBackgroundColor($userName)</code>
+      <code>$this-&gt;avatarManager-&gt;getGuestAvatar($uniqueGuestId)-&gt;avatarBackgroundColor($uniqueGuestId)</code>
    </UndefinedDocblockClass>
    <UndefinedMagicMethod occurrences="7">
      <code>setColor</code>
@ -170,27 +152,10 @@
    <InvalidNullableReturnType occurrences="1">
      <code>\OCP\Files\File</code>
    </InvalidNullableReturnType>
-    <MissingDependency occurrences="1">
-      <code>StorageNotAvailableException</code>
-    </MissingDependency>
    <NullableReturnStatement occurrences="1">
      <code>null</code>
    </NullableReturnStatement>
  </file>
-  <file src="lib/Service/ImageService.php">
-    <InvalidCatch occurrences="2"/>
-    <MissingDependency occurrences="8">
-      <code>$this-&gt;rootFolder</code>
-      <code>IRootFolder</code>
-      <code>ShareNotFound</code>
-    </MissingDependency>
-    <UndefinedClass occurrences="3">
-      <code>\OC\User\NoUserException</code>
-    </UndefinedClass>
-    <UndefinedDocblockClass occurrences="10">
-      <code>\OC\User\NoUserException</code>
-    </UndefinedDocblockClass>
-  </file>
  <file src="vendor/christophwurst/nextcloud/OCP/BackgroundJob/TimedJob.php">
    <ImplementedParamTypeMismatch occurrences="1">
      <code>$jobList</code>