Themes modal udpated
This commit is contained in:
Sean Edmunds
@@ -1,87 +1,160 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useQueryAPI } from "../../../hooks/useAPI";
|
||||
import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
|
||||
import AppItem from "../../homepage/components/AppItem";
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Card,
|
||||
ColorPicker,
|
||||
ColorSwatch,
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { FiEdit } from "react-icons/fi";
|
||||
import { useDisclosure, useLocalStorage } from "@mantine/hooks";
|
||||
import '@mantine/core/styles/ModalBase.css';
|
||||
import '@mantine/core/styles/Modal.css';
|
||||
function ThemesSettings() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
|
||||
import "@mantine/core/styles/ModalBase.css";
|
||||
import "@mantine/core/styles/Modal.css";
|
||||
import { actionIconClasses, modalClasses, textClasses } from "../../../styles";
|
||||
import ThemeModalContent from "./ThemeModalContent";
|
||||
function ThemesSettings({ theme }: any) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
|
||||
const [colorValue, onChange] = useState('#000000');
|
||||
const [value, setValue] = useLocalStorage<any>({
|
||||
key: "theme",
|
||||
defaultValue: {},
|
||||
});
|
||||
const { data, isFetched } = useQueryAPI({
|
||||
endpoint: "api/themes",
|
||||
});
|
||||
const [themesList, setThemesList] = useState([]);
|
||||
const [selectedTheme, setSelectedTheme] = useState<any>({});
|
||||
const [selectedTheme, setSelectedTheme] = useState<any>({});
|
||||
useEffect(() => {
|
||||
if (isFetched) {
|
||||
setThemesList(data);
|
||||
}
|
||||
}, [isFetched]);
|
||||
|
||||
const handleOpen = (theme: any) => {
|
||||
setSelectedTheme(theme);
|
||||
open();
|
||||
}
|
||||
const handleOpen = (theme: any) => {
|
||||
setSelectedTheme(theme);
|
||||
open();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
close();
|
||||
closePicker();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Root opened={opened} onClose={close}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Edit Theme</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
|
||||
<Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
|
||||
<AppItem
|
||||
name={'Example App'}
|
||||
url={'https://example.com'}
|
||||
icon={'mdi:apps'}
|
||||
category={'Default'}
|
||||
/>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
<Stack h={'100%'} w={'100%'}>
|
||||
<h2>Themes</h2>
|
||||
<SimpleGrid cols={5}>
|
||||
{themesList.map((theme: any) => (
|
||||
<Stack key={theme.name}>
|
||||
<Button
|
||||
style={{
|
||||
backgroundColor: theme.colorbackground,
|
||||
border: `solid ${theme.colorborder}`,
|
||||
color: theme.colortextpri,
|
||||
}}
|
||||
data-theme={theme.name}
|
||||
onClick={() => {
|
||||
setValue(theme.name)
|
||||
}}
|
||||
>
|
||||
{theme.name}
|
||||
</Button>
|
||||
<Group justify="space-between">
|
||||
<Group className="theme-palette">
|
||||
<ColorSwatch color={theme.colorbackground} />
|
||||
<ColorSwatch color={theme.colorsearchbackground} />
|
||||
<ColorSwatch color={theme.colortextpri} />
|
||||
<ColorSwatch color={theme.colortextacc} />
|
||||
<ColorSwatch color={theme.colorborder} />
|
||||
<>
|
||||
<Modal.Root
|
||||
size={"50%"}
|
||||
style={{
|
||||
"--color-text-pri": theme.colortextpri,
|
||||
"--color-text-acc": theme.colortextacc,
|
||||
"--color-background": theme.colorbackground,
|
||||
"--color-border": theme.colorborder,
|
||||
"--color-search-background": theme.colorsearchbackground,
|
||||
}}
|
||||
className={modalClasses.editThemeModal}
|
||||
classNames={modalClasses}
|
||||
opened={opened}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Edit Theme</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body p={"2rem"}>
|
||||
<ThemeModalContent selectedTheme={selectedTheme} />
|
||||
<Divider color="black" my="sm" />
|
||||
<Group w={"100%"} h={"100%"} gap={0}>
|
||||
<Stack w={"50%"}>
|
||||
<Group c={'black'} justify="space-between">
|
||||
<Text>Primary Color</Text>
|
||||
<ColorSwatch onClick={openPicker} radius={"sm"} w={"100px"} color={selectedTheme.colortextpri} />
|
||||
</Group>
|
||||
<ActionIcon
|
||||
onClick={() => handleOpen(theme)}
|
||||
><FiEdit/></ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</>
|
||||
<Group c={'black'} justify="space-between">
|
||||
<Text>Accent Color</Text>
|
||||
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colortextacc} />
|
||||
</Group>
|
||||
<Group c={'black'} justify="space-between">
|
||||
<Text>Background Color</Text>
|
||||
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorbackground} />
|
||||
</Group>
|
||||
<Group c={'black'} justify="space-between">
|
||||
<Text>Border Color</Text>
|
||||
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorborder} />
|
||||
</Group>
|
||||
<Group c={'black'} justify="space-between">
|
||||
<Text>Search Background Color</Text>
|
||||
<ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorsearchbackground} />
|
||||
</Group>
|
||||
</Stack>
|
||||
<Stack h={"100%"} w={'50%'} align="center" justify="center">
|
||||
{pickerOpen ? (
|
||||
<>
|
||||
<ColorPicker value={colorValue} onChange={onChange}/>
|
||||
<Group><Text c={'black'}>{colorValue}</Text><Button onClick={() => {setSelectedTheme({ ...selectedTheme, colorbackground: colorValue }); closePicker();}} c={'white'} bg={'forestgreen'}>Save</Button></Group>
|
||||
</>
|
||||
) : (
|
||||
<Card bg={'#0002'} h={"100%"} w={"90%"}>
|
||||
<Text c="black">
|
||||
Pick a swatch to edit the color.
|
||||
</Text>
|
||||
</Card>
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
<Stack h={"100%"} w={"100%"}>
|
||||
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
|
||||
Themes
|
||||
</Text>
|
||||
<SimpleGrid cols={5}>
|
||||
{themesList.map((theme: any) => (
|
||||
<Stack key={theme.name}>
|
||||
<Button
|
||||
style={{
|
||||
backgroundColor: theme.colorbackground,
|
||||
border: `solid ${theme.colorborder}`,
|
||||
color: theme.colortextpri,
|
||||
}}
|
||||
data-theme={theme.name}
|
||||
onClick={() => {
|
||||
setValue(theme.name);
|
||||
}}
|
||||
>
|
||||
{theme.name}
|
||||
</Button>
|
||||
<Group justify="space-between">
|
||||
<Group className="theme-palette">
|
||||
<ColorSwatch color={theme.colorbackground} />
|
||||
<ColorSwatch color={theme.colorsearchbackground} />
|
||||
<ColorSwatch color={theme.colortextpri} />
|
||||
<ColorSwatch color={theme.colortextacc} />
|
||||
<ColorSwatch color={theme.colorborder} />
|
||||
</Group>
|
||||
<ActionIcon
|
||||
className={actionIconClasses.editButton}
|
||||
classNames={actionIconClasses}
|
||||
onClick={() => handleOpen(theme)}
|
||||
>
|
||||
<FiEdit />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default ThemesSettings;
|
||||
|
||||
Reference in New Issue
Block a user