Background uploads
This commit is contained in:
Sean Edmunds
163
src/pages/settings/components/Theming/BackgroundModal.tsx
Normal file
163
src/pages/settings/components/Theming/BackgroundModal.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Card,
|
||||
FileInput,
|
||||
Group,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
} from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
|
||||
import { useState } from 'react';
|
||||
import { FiTrash } from 'react-icons/fi';
|
||||
import { modalClasses } from 'styles';
|
||||
|
||||
function BackgroundModal({
|
||||
backgroundModalOpened,
|
||||
handleBackgroundModalClose,
|
||||
backgroundList,
|
||||
}: {
|
||||
backgroundModalOpened: boolean;
|
||||
handleBackgroundModalClose: () => void;
|
||||
backgroundList: string[];
|
||||
}) {
|
||||
const [background, setBackground] = useState<File | null>(null);
|
||||
const [err, setErr] = useState<boolean>(false);
|
||||
const { isMobile } = useCommonHooks();
|
||||
const { mutateAsync: uploadAsync } = useFileUploadAPI();
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const fd = new FormData();
|
||||
const handleFileUpload = (e: any) => {
|
||||
setErr(false);
|
||||
setBackground(e);
|
||||
};
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'50%'}
|
||||
className={modalClasses.editThemeModal}
|
||||
classNames={modalClasses}
|
||||
opened={backgroundModalOpened}
|
||||
onClose={() => {
|
||||
handleBackgroundModalClose();
|
||||
setBackground(null);
|
||||
}}
|
||||
fullScreen={isMobile}
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
<Text c={'var(--mantine-color-background-0)'}>Backgrounds</Text>
|
||||
</Group>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body p={'2rem'}>
|
||||
<ScrollArea
|
||||
type={'always'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '20rem',
|
||||
backgroundColor: 'var(--mantine-color-background-0)',
|
||||
}}
|
||||
>
|
||||
<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
|
||||
{backgroundList
|
||||
.filter((background) => background !== 'None')
|
||||
.map((background) => (
|
||||
<Group key={background} display={'flex'} pos={'relative'}>
|
||||
<Text
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
backgroundColor: 'var(--mantine-color-accent-0)',
|
||||
padding: '.25rem',
|
||||
borderRadius: '.5rem',
|
||||
position: 'absolute',
|
||||
top: '-.5rem',
|
||||
left: 0,
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
{background}
|
||||
</Text>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
width: '100%',
|
||||
backgroundImage: `url(/backgrounds/${background})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
<ActionIcon
|
||||
style={{
|
||||
color: 'red',
|
||||
position: 'absolute',
|
||||
bottom: '.5rem',
|
||||
right: '.5rem',
|
||||
zIndex: 3,
|
||||
}}
|
||||
onClick={() => {
|
||||
mutateAsync({
|
||||
method: 'DELETE',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: { background },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FiTrash />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
<FileInput
|
||||
clearable
|
||||
accept='image/png,image/jpeg'
|
||||
value={background}
|
||||
onChange={handleFileUpload}
|
||||
label={'Upload Background'}
|
||||
placeholder={'Upload Background'}
|
||||
p={'xl'}
|
||||
w={'100%'}
|
||||
error={err && 'Please upload a background'}
|
||||
styles={{
|
||||
input: {
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
},
|
||||
placeholder: {
|
||||
color: 'var(--mantine-color-accent-0)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (background) {
|
||||
fd.append('background', background || '');
|
||||
uploadAsync({
|
||||
method: 'POST',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: fd,
|
||||
});
|
||||
handleBackgroundModalClose();
|
||||
setBackground(null);
|
||||
setErr(false);
|
||||
} else {
|
||||
setErr(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
export default BackgroundModal;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Group, Stack, Text } from '@mantine/core';
|
||||
import { Box, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -258,41 +258,43 @@ function ThemePlaylists() {
|
||||
mb={isMobile ? '6rem' : undefined}
|
||||
>
|
||||
{themePlaylists.length > 0 ? (
|
||||
themePlaylists
|
||||
.filter((playlist: ThemePlaylist) => playlist.default === 0)
|
||||
.sort((a: ThemePlaylist, b: ThemePlaylist) =>
|
||||
a.name > b.name ? 1 : -1,
|
||||
)
|
||||
.map((cardPlaylist: ThemePlaylist) => {
|
||||
return (
|
||||
<Group key={cardPlaylist.name} pos={'relative'}>
|
||||
{cardPlaylist.name === currentThemePlaylist && (
|
||||
<FiChevronRight
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: -14,
|
||||
zIndex: 10,
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--mantine-color-border-0)',
|
||||
color:
|
||||
theme.borderColor === theme.primaryColor
|
||||
? 'var(--mantine-color-accent-0)'
|
||||
: 'var(--mantine-color-primary-0)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box>
|
||||
<ThemePlaylistCard
|
||||
cardPlaylist={cardPlaylist}
|
||||
handleOpen={handleOpen}
|
||||
allThemes={allThemeData}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
);
|
||||
})
|
||||
<SimpleGrid cols={4}>
|
||||
{themePlaylists
|
||||
.filter((playlist: ThemePlaylist) => playlist.default === 0)
|
||||
.sort((a: ThemePlaylist, b: ThemePlaylist) =>
|
||||
a.name > b.name ? 1 : -1,
|
||||
)
|
||||
.map((cardPlaylist: ThemePlaylist) => {
|
||||
return (
|
||||
<Group key={cardPlaylist.name} pos={'relative'}>
|
||||
{cardPlaylist.name === currentThemePlaylist && (
|
||||
<FiChevronRight
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: -14,
|
||||
zIndex: 10,
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--mantine-color-border-0)',
|
||||
color:
|
||||
theme.borderColor === theme.primaryColor
|
||||
? 'var(--mantine-color-accent-0)'
|
||||
: 'var(--mantine-color-primary-0)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box>
|
||||
<ThemePlaylistCard
|
||||
cardPlaylist={cardPlaylist}
|
||||
handleOpen={handleOpen}
|
||||
allThemes={allThemeData}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
) : (
|
||||
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<NoItemsFound />
|
||||
|
||||
@@ -9,6 +9,7 @@ import { switchClasses, textClasses } from 'styles';
|
||||
import type { Theme, ThemePlaylist } from 'types';
|
||||
import NoItemsFound from '../Shared/NoItemsFound';
|
||||
import SettingsHeader from '../Shared/SettingsHeader';
|
||||
import BackgroundModal from './BackgroundModal';
|
||||
import ThemeCard from './ThemeCard';
|
||||
import ThemeModal from './ThemeModal';
|
||||
|
||||
@@ -27,7 +28,12 @@ function ThemesSettings() {
|
||||
});
|
||||
const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
backgroundModalOpened,
|
||||
{ open: openBackgroundModal, close: closeBackgroundModal },
|
||||
] = useDisclosure(false);
|
||||
const [colorId, setColorId] = useState<string>('');
|
||||
const [colorValue, setColorValue] = useState('#000000');
|
||||
const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
|
||||
@@ -57,11 +63,11 @@ function ThemesSettings() {
|
||||
} = useCommonHooks();
|
||||
const handleOpen = (theme: Theme) => {
|
||||
setSelectedTheme(theme);
|
||||
open();
|
||||
openThemeModal();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
close();
|
||||
closeThemeModal();
|
||||
closePicker();
|
||||
setSelectedTheme({
|
||||
id: undefined,
|
||||
@@ -76,6 +82,10 @@ function ThemesSettings() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleBackgroundModalClose = () => {
|
||||
closeBackgroundModal();
|
||||
};
|
||||
|
||||
const handleSaveTheme = () => {
|
||||
mutateAsync({
|
||||
method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
|
||||
@@ -112,7 +122,7 @@ function ThemesSettings() {
|
||||
return (
|
||||
<Stack w={'100%'} align='center'>
|
||||
<ThemeModal
|
||||
opened={opened}
|
||||
opened={themeModalOpened}
|
||||
handleClose={handleClose}
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
@@ -126,9 +136,14 @@ function ThemesSettings() {
|
||||
closePicker={closePicker}
|
||||
handleSaveTheme={handleSaveTheme}
|
||||
/>
|
||||
<BackgroundModal
|
||||
backgroundModalOpened={backgroundModalOpened}
|
||||
handleBackgroundModalClose={handleBackgroundModalClose}
|
||||
backgroundList={backgroundList}
|
||||
/>
|
||||
<SettingsHeader
|
||||
setDragging={undefined}
|
||||
openModal={open}
|
||||
openModal={openThemeModal}
|
||||
title={'Themes'}
|
||||
tooltip={{
|
||||
title: 'Themes can be created here and applied to the homepage.',
|
||||
@@ -232,7 +247,7 @@ function ThemesSettings() {
|
||||
bottom: isMobile ? '3.25rem' : 0,
|
||||
}}
|
||||
>
|
||||
<Group w={isMobile ? undefined : '100%'}>
|
||||
<Group w={isMobile ? undefined : '100%'} justify='space-between'>
|
||||
<Text
|
||||
miw={isMobile ? 100 : undefined}
|
||||
className={textClasses.settingsSubTitle}
|
||||
@@ -303,6 +318,16 @@ function ThemesSettings() {
|
||||
</Group>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Button
|
||||
style={{
|
||||
zIndex: 200,
|
||||
}}
|
||||
onClick={() => {
|
||||
openBackgroundModal();
|
||||
}}
|
||||
>
|
||||
Manage Backgrounds
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user