diff options
author | Julius Härtl <jus@bitgrid.net> | 2022-05-25 15:33:08 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2022-06-08 22:26:22 +0300 |
commit | 6367fb9136b284ba5faf7c82fbc55224040c7a01 (patch) | |
tree | 09b57e9c279dbfb0ce1c137a72391fd7696f88f5 | |
parent | 2326b1a9937e80cb5d68657357885c4640cfda3a (diff) |
Adjust guest avatar style to be distinguishable from regular usersenh/guest-name-handling
Signed-off-by: Julius Härtl <jus@bitgrid.net>
-rw-r--r-- | lib/Service/SessionService.php | 2 | ||||
-rw-r--r-- | src/components/AvatarWrapper.vue | 68 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 2 | ||||
-rw-r--r-- | src/components/GuestNameDialog.vue | 21 | ||||
-rw-r--r-- | src/components/SessionList.vue | 51 | ||||
-rw-r--r-- | tests/psalm-baseline.xml | 101 |
6 files changed, 130 insertions, 115 deletions
diff --git a/lib/Service/SessionService.php b/lib/Service/SessionService.php index 5781b3f47..bfe43726d 100644 --- 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 */ 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 e0e70f85e..ddf315ea4 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; diff --git a/tests/psalm-baseline.xml b/tests/psalm-baseline.xml index 6f49585fd..465ca2a6f 100644 --- 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->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->rootFolder</code> <code>$this->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->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->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->lockingProvider</code> - </UndefinedThisPropertyFetch> </file> - <file src="lib/Service/SessionService.php"> + <file src="lib/Service/ImageService.php"> + <MissingDependency occurrences="6"> + <code>$this->rootFolder</code> + <code>$this->rootFolder</code> + <code>$this->rootFolder</code> + <code>$this->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>$color->b</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> + <code>\OC\User\NoUserException</code> + </UndefinedDocblockClass> + </file> + <file src="lib/Service/SessionService.php"> + <UndefinedDocblockClass occurrences="4"> <code>$color->b</code> <code>$color->g</code> - <code>$color->g</code> - <code>$color->r</code> <code>$color->r</code> - <code>$this->avatarManager->getGuestAvatar($guestName)->avatarBackgroundColor($guestName)</code> - <code>$this->avatarManager->getGuestAvatar($userName)->avatarBackgroundColor($userName)</code> + <code>$this->avatarManager->getGuestAvatar($uniqueGuestId)->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->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> |