diff --git a/frontend/locales/en.json b/frontend/locales/en.json index ae1e0d63e..90c4cb937 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -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": { diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss index 7fcea26ef..e49c8dd5e 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss @@ -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; -} diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx index cd46a6254..db6ffab42 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx @@ -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 = ({ active }) => { + const textActive = useTranslatedText('editor.onlineStatus.active') + const textInactive = useTranslatedText('editor.onlineStatus.inactive') + return ( -
- -
+ ) } diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx index 2f95c9778..29340dcfd 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx @@ -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 = ({ username, displayName, active, own = false, color }) => { useTranslation() + const guestUserTitle = useTranslatedText('editor.onlineStatus.guestUser') const avatar = useMemo(() => { - if (username) { - return ( - - ) - } else { - return ( - - ) - } + return username ? ( + + ) : ( + + ) }, [displayName, username]) return ( -
-
+
+
{avatar} - {own ? ( - - - - ) : ( - - )} +
+ + + + {own ? ( + + + + ) : ( + + )} +
) }