Add tooltip to user avatar (#2080)

Co-authored-by: Philip Molares <philip.molares@udo.edu
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-06-04 16:50:13 +02:00 committed by GitHub
parent c868b3649d
commit f0ea971baa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 10 deletions

View file

@ -10,7 +10,7 @@ exports[`UserAvatar adds additionalClasses props to wrapping span 1`] = `
class="rounded user-image" class="rounded user-image"
height="20" height="20"
src="https://example.com/test.png" src="https://example.com/test.png"
title="Boaty McBoatFace" title="common.avatarOf"
width="20" width="20"
/> />
<span <span
@ -32,7 +32,7 @@ exports[`UserAvatar does not show names if showName prop is false 1`] = `
class="rounded user-image" class="rounded user-image"
height="20" height="20"
src="https://example.com/test.png" src="https://example.com/test.png"
title="Boaty McBoatFace" title="common.avatarOf"
width="20" width="20"
/> />
</span> </span>
@ -49,7 +49,7 @@ exports[`UserAvatar renders the user avatar correctly 1`] = `
class="rounded user-image" class="rounded user-image"
height="20" height="20"
src="https://example.com/test.png" src="https://example.com/test.png"
title="Boaty McBoatFace" title="common.avatarOf"
width="20" width="20"
/> />
<span <span
@ -71,7 +71,7 @@ exports[`UserAvatar renders the user avatar in size lg 1`] = `
class="rounded user-image" class="rounded user-image"
height="30" height="30"
src="https://example.com/test.png" src="https://example.com/test.png"
title="Boaty McBoatFace" title="common.avatarOf"
width="30" width="30"
/> />
<span <span
@ -93,7 +93,7 @@ exports[`UserAvatar renders the user avatar in size sm 1`] = `
class="rounded user-image" class="rounded user-image"
height="16" height="16"
src="https://example.com/test.png" src="https://example.com/test.png"
title="Boaty McBoatFace" title="common.avatarOf"
width="16" width="16"
/> />
<span <span

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -0,0 +1,3 @@
SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: CC0-1.0

View file

@ -4,11 +4,14 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import React, { useMemo } from 'react' import React, { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ShowIf } from '../show-if/show-if' import { ShowIf } from '../show-if/show-if'
import styles from './user-avatar.module.scss' import styles from './user-avatar.module.scss'
import type { UserInfo } from '../../../api/users/types' import type { UserInfo } from '../../../api/users/types'
import defaultAvatar from './default-avatar.png'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
export interface UserAvatarProps { export interface UserAvatarProps {
size?: 'sm' | 'lg' size?: 'sm' | 'lg'
@ -39,19 +42,36 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({ user, size, additionalCl
} }
}, [size]) }, [size])
const avatarUrl = useMemo(() => {
return user.photo !== '' ? user.photo : defaultAvatar.src
}, [user.photo])
const imgDescription = useMemo(() => t('common.avatarOf', { name: user.displayName }), [t, user])
const tooltip = useCallback(
(props: OverlayInjectedProps) => (
<Tooltip id={user.displayName} {...props}>
{user.displayName}
</Tooltip>
),
[user]
)
return ( return (
<span className={'d-inline-flex align-items-center ' + additionalClasses}> <span className={'d-inline-flex align-items-center ' + additionalClasses}>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={user.photo} src={avatarUrl}
className={`rounded ${styles['user-image']}`} className={`rounded ${styles['user-image']}`}
alt={t('common.avatarOf', { name: user.displayName })} alt={imgDescription}
title={user.displayName} title={imgDescription}
height={imageSize} height={imageSize}
width={imageSize} width={imageSize}
/> />
<ShowIf condition={showName}> <ShowIf condition={showName}>
<OverlayTrigger overlay={tooltip}>
<span className={`ml-2 mr-1 ${styles['user-line-name']}`}>{user.displayName}</span> <span className={`ml-2 mr-1 ${styles['user-line-name']}`}>{user.displayName}</span>
</OverlayTrigger>
</ShowIf> </ShowIf>
</span> </span>
) )