Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-06 05:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add new version indicator for users

Browse Source
This commit is contained in:
ajnart
2023-10-25 14:13:58 +02:00
parent ac3771ad7b
commit 6cb6d63516
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/layout/header/AvatarMenu.tsx
View File

@@ -1,4 +1,4 @@
import { Avatar, Badge, Menu, UnstyledButton, useMantineTheme } from '@mantine/core'; import { Avatar, Badge, Indicator, Menu, UnstyledButton, useMantineTheme } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { import {
IconDashboard, IconDashboard,
@@ -38,10 +38,17 @@ export const AvatarMenu = () => {
<UnstyledButton> <UnstyledButton>
<Menu width={256}> <Menu width={256}>
<Menu.Target> <Menu.Target>
<CurrentUserAvatar user={sessionData?.user ?? null} /> <CurrentUserAvatar
newVersionAvailable={newVersionAvailable}
user={sessionData?.user ?? null}
/>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}> <Menu.Item
closeMenuOnClick={false}
icon={<Icon size="1rem" />}
onClick={toggleColorScheme}
>
{t('actions.avatar.switchTheme')} {t('actions.avatar.switchTheme')}
</Menu.Item> </Menu.Item>
{sessionData?.user && ( {sessionData?.user && (
@@ -113,17 +120,20 @@ export const AvatarMenu = () => {
}; };
type CurrentUserAvatarProps = { type CurrentUserAvatarProps = {
newVersionAvailable: boolean;
user: User | null; user: User | null;
}; };
const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>( const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
({ user, ...others }, ref) => { ({ user, newVersionAvailable, ...others }, ref) => {
const { primaryColor } = useMantineTheme(); const { primaryColor } = useMantineTheme();
if (!user) return <Avatar ref={ref} {...others} />; if (!user) return <Avatar ref={ref} {...others} />;
return ( return (
<Indicator color="blue" processing size={10} hidden={!newVersionAvailable}>
<Avatar ref={ref} color={primaryColor} {...others}> <Avatar ref={ref} color={primaryColor} {...others}>
{user.name?.slice(0, 2).toUpperCase()} {user.name?.slice(0, 2).toUpperCase()}
</Avatar> </Avatar>
</Indicator>
); );
} }
); );