jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Finish reworking update indicator

Browse Source
This commit is contained in:
ajnart
2022-12-11 14:40:53 +09:00
parent cabbf8f90d
commit bb8286e6d4
1 changed files with 47 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Settings/SettingsMenu.tsx
View File

@@ -8,6 +8,7 @@ import {
Indicator, Indicator,
Alert, Alert,
Notification, Notification,
Anchor,
} from '@mantine/core'; } from '@mantine/core';
import { useElementSize, useHotkeys, useViewportSize } from '@mantine/hooks'; import { useElementSize, useHotkeys, useViewportSize } from '@mantine/hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -18,46 +19,33 @@ import AdvancedSettings from './AdvancedSettings';
import CommonSettings from './CommonSettings'; import CommonSettings from './CommonSettings';
import Credits from './Credits'; import Credits from './Credits';
import { CURRENT_VERSION, REPO_URL } from '../../../data/constants'; import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
import Link from 'next/link';
import { NextLink } from '@mantine/next';
function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) { function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
const { t } = useTranslation('settings/common'); const { t } = useTranslation('settings/common');
const { height, width } = useViewportSize(); const { height, width } = useViewportSize();
return ( return (
<> <Tabs defaultValue="Common">
<Notification <Tabs.List grow>
icon={<IconInfoCircle size={25} />} <Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab>
disallowClose <Tabs.Tab value="Customizations">{t('tabs.customizations')}</Tabs.Tab>
color="teal" </Tabs.List>
radius="md" <Tabs.Panel data-autofocus value="Common">
title="New update available" <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
hidden={newVersionAvailable === ''} {newVersionAvailable && <NewUpdateIndicator newVersionAvailable={newVersionAvailable} />}
> <CommonSettings />
{ <Credits />
//TODO: Translate and add link to release page} </ScrollArea>
} </Tabs.Panel>
Version <b>{newVersionAvailable}</b> is available, update now! <Tabs.Panel value="Customizations">
</Notification> <ScrollArea style={{ height: height - 120 }} offsetScrollbars>
<AdvancedSettings />
<Tabs defaultValue="Common"> <Credits />
<Tabs.List grow> </ScrollArea>
<Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab> </Tabs.Panel>
<Tabs.Tab value="Customizations">{t('tabs.customizations')}</Tabs.Tab> </Tabs>
</Tabs.List>
<Tabs.Panel data-autofocus value="Common">
<ScrollArea style={{ height: height - 100 }} offsetScrollbars>
<CommonSettings />
<Credits />
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value="Customizations">
<ScrollArea style={{ height: height - 120 }} offsetScrollbars>
<AdvancedSettings />
<Credits />
</ScrollArea>
</Tabs.Panel>
</Tabs>
</>
); );
} }
@@ -107,3 +95,28 @@ export function SettingsMenuButton(props: any) {
</> </>
); );
} }
function NewUpdateIndicator({ newVersionAvailable }: { newVersionAvailable: string }) {
return (
<Notification
mt={10}
icon={<IconInfoCircle size={25} />}
disallowClose
color="teal"
radius="md"
title="New update available"
hidden={newVersionAvailable === ''}
>
Version{' '}
<b>
<Anchor
target="_blank"
href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
>
{newVersionAvailable}
</Anchor>
</b>{' '}
is available ! Current version: {CURRENT_VERSION}
</Notification>
);
}