Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-15 17:56:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨App tile UI change (#1231)

Browse Source 
* 💄 Rework the App tile UI

* 🤡 Forgot one

* Make it so the app title gets hidden properly

Now if the value is missing it won't by "hover" or "hidden" so it won't hide

* Turn the `Tooltip` into `HoverCard`

* Make save and cancel button not wrap anymore

* 💄 Used InfoCard in options + translations

* ♻️ Remove fallback value for label translations

---------

Co-authored-by: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Tagaishi
2023-08-06 19:36:36 +02:00
committed by GitHub
parent 121d6eafab
commit 7d18a51d02
10 changed files with 216 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
View File

@@ -1,4 +1,4 @@
import { Tabs, Text, TextInput } from '@mantine/core';
import { Stack, Tabs, Text, TextInput } from '@mantine/core';
import { UseFormReturnType } from '@mantine/form';
import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
@@ -15,41 +15,44 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
const { t } = useTranslation('layout/modals/add-app');
return (
<Tabs.Panel value="general" pt="sm">
<TextInput
icon={<IconCursorText size={16} />}
label={t('general.appname.label')}
description={t('general.appname.description')}
placeholder="My example app"
variant="default"
withAsterisk
mb="md"
{...form.getInputProps('name')}
/>
<TextInput
icon={<IconLink size={16} />}
label={t('general.internalAddress.label')}
description={t('general.internalAddress.description')}
placeholder="https://google.com"
variant="default"
withAsterisk
mb="md"
{...form.getInputProps('url')}
/>
<TextInput
icon={<IconClick size={16} />}
label={t('general.externalAddress.label')}
description={t('general.externalAddress.description')}
placeholder="https://homarr.mywebsite.com/"
variant="default"
{...form.getInputProps('behaviour.externalUrl')}
/>
<Stack spacing="xs">
<TextInput
icon={<IconCursorText size={16} />}
label={t('general.appname.label')}
description={t('general.appname.description')}
placeholder="My example app"
variant="default"
withAsterisk
{...form.getInputProps('name')}
/>
<TextInput
icon={<IconLink size={16} />}
label={t('general.internalAddress.label')}
description={t('general.internalAddress.description')}
placeholder="https://google.com"
variant="default"
withAsterisk
{...form.getInputProps('url')}
onChange={(e) => {
form.setFieldValue('url', e.target.value);
}}
/>
<TextInput
icon={<IconClick size={16} />}
label={t('general.externalAddress.label')}
description={t('general.externalAddress.description')}
placeholder="https://homarr.mywebsite.com/"
variant="default"
{...form.getInputProps('behaviour.externalUrl')}
/>
{!form.values.behaviour.externalUrl.startsWith('https://') &&
!form.values.behaviour.externalUrl.startsWith('http://') && (
<Text color="red" mt="sm" size="sm">
{t('behaviour.customProtocolWarning')}
</Text>
{!form.values.behaviour.externalUrl.startsWith('https://') &&
!form.values.behaviour.externalUrl.startsWith('http://') && (
<Text color="red" mt="sm" size="sm">
{t('behaviour.customProtocolWarning')}
</Text>
)}
</Stack>
</Tabs.Panel>
);
};