smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Added enableRandom

Browse Source
This commit is contained in:
Sean Edmunds
2024-12-20 13:49:54 -06:00
parent 33813a34fb
commit 9c22106216
2 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.tsx
View File

@@ -42,8 +42,13 @@ function App() {
const temp = data.find((t: any) => t.name === themeName); const temp = data.find((t: any) => t.name === themeName);
setTheme(temp); setTheme(temp);
} else { } else {
const index = Math.floor(Math.random() * data.length); let enabled = data.filter((t: any) => t.randomEnabled);
setTheme(data[index]); if (enabled.length === 0) {
setTheme(data[0]);
} else {
const index = Math.floor(Math.random() * enabled.length);
setTheme(enabled[index]);
}
} }
} }
}, [isFetched, themeName]); }, [isFetched, themeName]);

77
src/pages/settings/components/Themes.tsx
View File

@@ -14,7 +14,7 @@ import {
import { useDisclosure, useLocalStorage } from '@mantine/hooks'; import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { useMutationAPI, useQueryAPI } from 'hooks'; import { useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi'; import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css'; import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css'; import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals'; import { modals } from '@mantine/modals';
@@ -40,7 +40,7 @@ function ThemesSettings({ theme }: any) {
if (isFetched) { if (isFetched) {
setThemesList(data); setThemesList(data);
} }
}, [isFetched]); }, [data, isFetched]);
const handleOpen = (theme: any) => { const handleOpen = (theme: any) => {
setSelectedTheme(theme); setSelectedTheme(theme);
@@ -78,6 +78,7 @@ function ThemesSettings({ theme }: any) {
const randomColor = () => { const randomColor = () => {
return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`; return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
}; };
return ( return (
<> <>
<Modal.Root <Modal.Root
@@ -348,28 +349,58 @@ function ThemesSettings({ theme }: any) {
</Button> </Button>
</Group> </Group>
<Group justify='space-between' gap={0}> <Group justify='space-between' gap={0}>
<Group className='theme-palette'> <ActionIcon
<ActionIcon style={{
className={actionIconClasses.editButton} background: theme.randomEnabled
classNames={actionIconClasses} ? 'rgba(255,255,255,1)'
onClick={() => handleOpen(theme)} : 'rgba(255,255,255,0.5)',
> border: `solid 1px ${theme.borderColor}`,
<FiEdit /> borderRadius: '2%',
</ActionIcon> margin: '2px',
<ColorSwatch color={theme.backgroundColor} /> color: 'black',
<ColorSwatch color={theme.searchColor} /> }}
<ColorSwatch color={theme.primaryColor} /> styles={{
<ColorSwatch color={theme.accentColor} /> root: {
<ColorSwatch color={theme.borderColor} /> height: '10px',
width: '10px',
},
icon: {
height: '10px',
width: '10px',
margin: 0,
padding: 0,
},
}}
onClick={() => {
createTheme({
method: 'PATCH',
endpoint: 'api/themes',
body: { ...theme, randomEnabled: !theme.randomEnabled },
});
}}
>
<FiCheck height={'10px'} width={'10px'} />
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => handleOpen(theme)}
>
<FiEdit />
</ActionIcon>
<ColorSwatch color={theme.backgroundColor} />
<ColorSwatch color={theme.searchColor} />
<ColorSwatch color={theme.primaryColor} />
<ColorSwatch color={theme.accentColor} />
<ColorSwatch color={theme.borderColor} />
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.editButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleDeleteTheme(theme)} onClick={() => handleDeleteTheme(theme)}
> >
<FiTrash color='red' /> <FiTrash color='red' />
</ActionIcon> </ActionIcon>
</Group>
</Group> </Group>
</Stack> </Stack>
))} ))}