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

🐛 App tile flex fix (#1255)

Browse Source 
* 🎨 flex

* 🎨 Improved flex organization on app tile

* ✏️ disallowAppNameProgagation to Propagation

* ✨ User customizable lineclamp and config migration
This commit is contained in:
Tagaishi
2023-08-11 20:47:14 +02:00
committed by GitHub
parent d5f74eb4bf
commit d6736d6539
9 changed files with 121 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
View File

@@ -1,4 +1,4 @@
import { Flex, Select, Stack, Switch, Tabs } from '@mantine/core';
import { Flex, NumberInput, Select, Stack, Switch, Tabs } from '@mantine/core';
import { UseFormReturnType } from '@mantine/form';
import { useDebouncedValue } from '@mantine/hooks';
import { useTranslation } from 'next-i18next';
@@ -9,13 +9,13 @@ import { IconSelector } from '../../../../../IconSelector/IconSelector';
interface AppearanceTabProps {
form: UseFormReturnType<AppType, (values: AppType) => AppType>;
disallowAppNameProgagation: () => void;
disallowAppNamePropagation: () => void;
allowAppNamePropagation: boolean;
}
export const AppearanceTab = ({
form,
disallowAppNameProgagation,
disallowAppNamePropagation,
allowAppNamePropagation,
}: AppearanceTabProps) => {
const iconSelectorRef = useRef();
@@ -46,7 +46,7 @@ export const AppearanceTab = ({
defaultValue={form.values.appearance.iconUrl}
onChange={(value) => {
form.setFieldValue('appearance.iconUrl', value);
disallowAppNameProgagation();
disallowAppNamePropagation();
}}
value={form.values.appearance.iconUrl}
ref={iconSelectorRef}
@@ -66,26 +66,41 @@ export const AppearanceTab = ({
}}
/>
{form.values.appearance.appNameStatus === 'normal' && (
<Select
label={t('appearance.positionAppName.label')}
description={t('appearance.positionAppName.description')}
data={[
{ value: 'column', label: t('appearance.positionAppName.dropdown.top') as string },
{
value: 'row-reverse',
label: t('appearance.positionAppName.dropdown.right') as string,
},
{
value: 'column-reverse',
label: t('appearance.positionAppName.dropdown.bottom') as string,
},
{ value: 'row', label: t('appearance.positionAppName.dropdown.left') as string },
]}
{...form.getInputProps('appearance.positionAppName')}
onChange={(value) => {
form.setFieldValue('appearance.positionAppName', value);
}}
/>
<>
<Select
label={t('appearance.positionAppName.label')}
description={t('appearance.positionAppName.description')}
data={[
{
value: 'column',
label: t('appearance.positionAppName.dropdown.top') as string },
{
value: 'row-reverse',
label: t('appearance.positionAppName.dropdown.right') as string,
},
{
value: 'column-reverse',
label: t('appearance.positionAppName.dropdown.bottom') as string,
},
{
value: 'row',
label: t('appearance.positionAppName.dropdown.left') as string },
]}
{...form.getInputProps('appearance.positionAppName')}
onChange={(value) => {
form.setFieldValue('appearance.positionAppName', value);
}}
/>
<NumberInput
label={t('appearance.lineClampAppName.label')}
description={t('appearance.lineClampAppName.description')}
min={0}
{...form.getInputProps('appearance.lineClampAppName')}
onChange={(value) => {
form.setFieldValue('appearance.lineClampAppName', value);
}}
/>
</>
)}
</Stack>
</Tabs.Panel>