github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 09:16:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(sidebar): distinguish guest users visually

Browse source 
This change adds a little guest icon next to the active indicator
showing that a user is not logged-in.
Furthermore, the active indicator now has a tooltip explaining it.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-10-09 06:19:01 +02:00
parent a0a0547157
commit f6780c44c4
4 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/locales/en.json
View file

@ -231,7 +231,10 @@
"infoToc": "Structure your note with headings to see a table-of-contents here.",
"onlineStatus": {
"online": "Online",
"you": "(You)"
"you": "(You)",
"guestUser": "This is a guest user",
"active": "This user is active",
"inactive": "This user has been inactive for some time"
},
"error": {
"noPermission": {

10
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss
View file

@ -9,6 +9,8 @@
border-radius: $indicator-size;
height: $indicator-size;
width: $indicator-size;
margin: 0 calc($indicator-size / 2);
display: block;
&.active {
background-color: #5cb85c;
@ -18,11 +20,3 @@
background-color: #d20000;
}
}
.active-indicator-container {
height: 100%;
display: flex;
flex: 0 0 20px;
align-items: center;
justify-content: center;
}

11
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx
View file

@ -5,6 +5,7 @@
*/
import styles from './active-indicator.module.scss'
import React from 'react'
import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
export interface ActiveIndicatorProps {
active: boolean
@ -16,9 +17,13 @@ export interface ActiveIndicatorProps {
* @param status The state of the indicator to render
*/
export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ active }) => {
const textActive = useTranslatedText('editor.onlineStatus.active')
const textInactive = useTranslatedText('editor.onlineStatus.inactive')
return (
<div className={styles['active-indicator-container']}>
<span className={`${styles['activeIndicator']} ${active ? styles.active : styles.inactive}`} />
</div>
<span
title={active ? textActive : textInactive}
className={`${styles['activeIndicator']} ${active ? styles.active : styles.inactive}`}
/>
)
}

48
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
View file

@ -10,6 +10,9 @@ import { ActiveIndicator } from '../active-indicator'
import styles from './user-line.module.scss'
import React, { useMemo } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { ShowIf } from '../../../../../common/show-if/show-if'
import { Incognito as IconIncognito } from 'react-bootstrap-icons'
import { useTranslatedText } from '../../../../../../hooks/common/use-translated-text'
export interface UserLineProps {
username: string | null
@ -30,37 +33,32 @@ export interface UserLineProps {
*/
export const UserLine: React.FC<UserLineProps> = ({ username, displayName, active, own = false, color }) => {
useTranslation()
const guestUserTitle = useTranslatedText('editor.onlineStatus.guestUser')
const avatar = useMemo(() => {
if (username) {
return (
<UserAvatarForUsername
username={username}
additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'}
/>
)
} else {
return (
<UserAvatar displayName={displayName} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'} />
)
}
return username ? (
<UserAvatarForUsername username={username} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap'} />
) : (
<UserAvatar displayName={displayName} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap'} />
)
}, [displayName, username])
return (
<div className={'d-flex align-items-center h-100 w-100'}>
<div
className={`d-inline-flex align-items-bottom ${styles['user-line-color-indicator']} ${createCursorCssClass(
color
)}`}
/>
<div className={'d-flex h-100 w-100'}>
<div className={`${styles['user-line-color-indicator']} ${createCursorCssClass(color)}`} />
{avatar}
{own ? (
<span className={'px-1'}>
<Trans i18nKey={'editor.onlineStatus.you'}></Trans>
</span>
) : (
<ActiveIndicator active={active} />
)}
<div className={'ms-auto d-flex align-items-center gap-1 h-100'}>
<ShowIf condition={!username}>
<IconIncognito title={guestUserTitle} size={'16px'} className={'text-muted'} />
</ShowIf>
{own ? (
<span className={'px-1'}>
<Trans i18nKey={'editor.onlineStatus.you'}></Trans>
</span>
) : (
<ActiveIndicator active={active} />
)}
</div>
</div>
)
}