Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update components

Browse Source
This commit is contained in:
Oliver Walters
2024-08-21 07:17:00 +00:00
parent cae3c505ab
commit 0d06ffd8ea
2 changed files with 106 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
View File

@ -1,27 +1,11 @@
import { Trans, t } from '@lingui/macro';
import {
ActionIcon,
Button,
Group,
Stack,
Table,
Text,
TextInput,
Title,
Tooltip
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { useToggle } from '@mantine/hooks';
import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
import { IconEdit } from '@tabler/icons-react';
import { useMemo } from 'react';
import { api } from '../../../../App';
import { EditButton } from '../../../../components/buttons/EditButton';
import { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
import { StylishText } from '../../../../components/items/StylishText';
import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
import { useEditApiFormModal } from '../../../../hooks/UseForm';
import { apiUrl } from '../../../../states/ApiState';
import { useUserState } from '../../../../states/UserState';
export function AccountDetailPanel() {
@ -50,9 +34,9 @@ export function AccountDetailPanel() {
{editUser.modal}
<Stack gap="xs">
<Group justify="space-between">
<StylishText size="xl">
<Title order={3}>
<Trans>User Details</Trans>
</StylishText>
</Title>
<Tooltip label={t`Edit User Information`}>
<ActionIcon variant="default" onClick={editUser.open}>
<IconEdit />

122
src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
View File

@ -1,19 +1,26 @@
import { Trans, t } from '@lingui/macro';
import {
ActionIcon,
Button,
ColorInput,
ColorPicker,
Container,
DEFAULT_THEME,
Group,
Loader,
Select,
Slider,
Table,
Title,
useMantineTheme
} from '@mantine/core';
import { IconReload, IconRestore } from '@tabler/icons-react';
import { useState } from 'react';
import { ColorToggle } from '../../../../components/items/ColorToggle';
import { LanguageSelect } from '../../../../components/items/LanguageSelect';
import { SizeMarks } from '../../../../defaults/defaults';
import { notYetImplemented } from '../../../../functions/notifications';
import { IS_DEV } from '../../../../main';
import { useLocalState } from '../../../../states/LocalState';
@ -26,12 +33,47 @@ const LOOKUP = Object.assign(
);
export function UserTheme({ height }: { height: number }) {
const theme = useMantineTheme();
const [themeLoader, setThemeLoader] = useLocalState((state) => [
state.loader,
state.setLoader
]);
const theme = useMantineTheme();
// white color
const [whiteColor, setWhiteColor] = useState(theme.white);
function changeWhite(color: string) {
useLocalState.setState({ whiteColor: color });
setWhiteColor(color);
}
// black color
const [blackColor, setBlackColor] = useState(theme.black);
function changeBlack(color: string) {
useLocalState.setState({ blackColor: color });
setBlackColor(color);
}
// radius
function getMark(value: number) {
const obj = SizeMarks.find((mark) => mark.value === value);
if (obj) return obj;
return SizeMarks[0];
}
function getDefaultRadius() {
const obj = SizeMarks.find(
(mark) => mark.label === useLocalState.getState().radius
);
if (obj) return obj.value;
return 50;
}
const [radius, setRadius] = useState(getDefaultRadius());
function changeRadius(value: number) {
setRadius(value);
useLocalState.setState({ radius: getMark(value).label });
}
// Set theme primary color
function changePrimary(color: string) {
@ -87,6 +129,66 @@ export function UserTheme({ height }: { height: number }) {
</Table.Td>
<Table.Td></Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Highlight color</Trans>
</Table.Td>
<Table.Td>
<ColorPicker
format="hex"
onChange={changePrimary}
withPicker={false}
swatches={Object.keys(LOOKUP)}
/>
</Table.Td>
<Table.Td>
<Button color={theme.primaryColor} variant="light">
<Trans>Example</Trans>
</Button>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>White color</Trans>
</Table.Td>
<Table.Td>
<ColorInput value={whiteColor} onChange={changeWhite} />
</Table.Td>
<Table.Td>
<ActionIcon variant="default" onClick={notYetImplemented}>
<IconRestore />
</ActionIcon>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Black color</Trans>
</Table.Td>
<Table.Td>
<ColorInput value={blackColor} onChange={changeBlack} />
</Table.Td>
<Table.Td>
<ActionIcon variant="default" onClick={notYetImplemented}>
<IconRestore />
</ActionIcon>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Border Radius</Trans>
</Table.Td>
<Table.Td>
<Slider
label={(val) => getMark(val).label}
defaultValue={50}
step={25}
marks={SizeMarks}
value={radius}
onChange={changeRadius}
mb={18}
/>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Loader</Trans>
@ -106,24 +208,6 @@ export function UserTheme({ height }: { height: number }) {
</Group>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Highlight color</Trans>
</Table.Td>
<Table.Td>
<ColorPicker
format="hex"
onChange={changePrimary}
withPicker={false}
swatches={Object.keys(LOOKUP)}
/>
</Table.Td>
<Table.Td>
<Button color={theme.primaryColor} variant="light">
<Trans>Example</Trans>
</Button>
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
</Container>