Style updates and bugfixes
This commit is contained in:
Sean Edmunds
@@ -0,0 +1,387 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Card,
|
||||
FileInput,
|
||||
Group,
|
||||
Image,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue, useElementSize } from '@mantine/hooks';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useFileUploadAPI } from 'hooks/useAPI';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FiEdit, FiLoader, FiPlus, FiTrash, FiX } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
modalClasses,
|
||||
scrollAreaClasses,
|
||||
textInputClasses,
|
||||
} from 'styles';
|
||||
import { DeleteBackground } from './DeleteBackground';
|
||||
import { EditBackground } from './EditBackground';
|
||||
|
||||
export function BackgroundModal({
|
||||
backgroundModalOpened,
|
||||
handleBackgroundModalClose,
|
||||
backgroundList,
|
||||
inUseBackgrounds,
|
||||
}: {
|
||||
backgroundModalOpened: boolean;
|
||||
handleBackgroundModalClose: () => void;
|
||||
backgroundList: string[];
|
||||
inUseBackgrounds: string[];
|
||||
}) {
|
||||
const { ref, width } = useElementSize();
|
||||
const [background, setBackground] = useState<File | null>(null);
|
||||
const [fileName, setFileName] = useState<string>('');
|
||||
const [newFileName, setNewFileName] = useState<string>('');
|
||||
const [err, setErr] = useState<boolean>(false);
|
||||
const [confirm, setConfirm] = useState<boolean>(false);
|
||||
const [editing, setEditing] = useState<boolean>(false);
|
||||
const [adding, setAdding] = useState<boolean>(false);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
||||
const { isMobile, theme } = useCommonHooks();
|
||||
const { mutateAsync: uploadAsync } = useFileUploadAPI();
|
||||
const fd = new FormData();
|
||||
const handleFileUpload = (e: any) => {
|
||||
setErr(false);
|
||||
setBackground(e);
|
||||
setFileName(e?.name);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (debouncedSearch === searchValue) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'75%'}
|
||||
className={modalClasses.editThemeModal}
|
||||
classNames={modalClasses}
|
||||
opened={backgroundModalOpened}
|
||||
onClose={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
handleBackgroundModalClose();
|
||||
setConfirm(false);
|
||||
setEditing(false);
|
||||
}}
|
||||
fullScreen={isMobile}
|
||||
centered
|
||||
keepMounted
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
<Text fw={600} fz={'1.5rem'} c={'var(--mantine-color-primary-0)'}>
|
||||
Manage Backgrounds
|
||||
</Text>
|
||||
</Group>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body p={'1rem'}>
|
||||
<Stack align='center' w={'100%'}>
|
||||
{!editing && !confirm && !adding && searchValue !== undefined && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
w={'50%'}
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
autoFocus={!isMobile}
|
||||
placeholder={'Search...'}
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
setIsLoading(true);
|
||||
setSearchValue(event.target.value);
|
||||
}}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
paddingTop: 0,
|
||||
}}
|
||||
styles={
|
||||
theme.textShadowsEnabled && {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
}
|
||||
rightSection={
|
||||
isLoading ? (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.loadingSpinner}
|
||||
classNames={actionIconClasses}
|
||||
>
|
||||
<FiLoader />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
searchValue && (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.settingsTooltip}
|
||||
classNames={actionIconClasses}
|
||||
onClick={() => setSearchValue('')}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
className={buttonClasses.newItemButton}
|
||||
classNames={buttonClasses}
|
||||
onClick={() => {
|
||||
setAdding(true);
|
||||
}}
|
||||
>
|
||||
<FiPlus />
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
{confirm && (
|
||||
<DeleteBackground
|
||||
fileName={fileName}
|
||||
setFileName={setFileName}
|
||||
inUseBackgrounds={inUseBackgrounds}
|
||||
setBackground={setBackground}
|
||||
setNewFileName={setNewFileName}
|
||||
setConfirm={setConfirm}
|
||||
/>
|
||||
)}
|
||||
{editing && (
|
||||
<EditBackground
|
||||
fileName={fileName}
|
||||
setFileName={setFileName}
|
||||
inUseBackgrounds={inUseBackgrounds}
|
||||
setBackground={setBackground}
|
||||
setNewFileName={setNewFileName}
|
||||
setEditing={setEditing}
|
||||
/>
|
||||
)}
|
||||
{!editing && !confirm && !adding && (
|
||||
<ScrollArea
|
||||
className={scrollAreaClasses.default}
|
||||
classNames={scrollAreaClasses}
|
||||
type={'always'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
|
||||
{backgroundList
|
||||
.filter((background) => background !== 'None')
|
||||
.filter(
|
||||
(background) =>
|
||||
!debouncedSearch ||
|
||||
background
|
||||
.toLocaleLowerCase()
|
||||
.includes(debouncedSearch.toLocaleLowerCase()),
|
||||
)
|
||||
.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,
|
||||
boxShadow: '2px -2px var(--mantine-color-primary-0)',
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: width,
|
||||
}}
|
||||
>
|
||||
{background}
|
||||
</Text>
|
||||
<Card
|
||||
ref={ref}
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
width: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${background})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
<ActionIcon
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '.5rem',
|
||||
right: '2.5rem',
|
||||
zIndex: 3,
|
||||
}}
|
||||
onClick={() => {
|
||||
setFileName(background);
|
||||
setEditing(true);
|
||||
}}
|
||||
>
|
||||
<FiEdit />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
color='var(--mantine-color-red-6)'
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '.5rem',
|
||||
right: '.5rem',
|
||||
zIndex: 3,
|
||||
}}
|
||||
onClick={() => {
|
||||
setFileName(background);
|
||||
setConfirm(true);
|
||||
}}
|
||||
>
|
||||
<FiTrash color='black' />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
)}
|
||||
{adding && (
|
||||
<Stack
|
||||
display={'flex'}
|
||||
pos={'relative'}
|
||||
w={'100%'}
|
||||
align={'center'}
|
||||
justify='space-between'
|
||||
p={16}
|
||||
>
|
||||
<Group gap={0}>
|
||||
<Stack gap={0} w={'60%'}>
|
||||
<FileInput
|
||||
clearable
|
||||
accept='image/png,image/jpeg'
|
||||
value={background}
|
||||
onChange={handleFileUpload}
|
||||
label={'Upload Background'}
|
||||
placeholder={'Select...'}
|
||||
error={err && 'Please upload a background'}
|
||||
description={
|
||||
'Max size: 50MB for upload. Images are resized to 300kb after upload.'
|
||||
}
|
||||
pr={'xl'}
|
||||
pl={0}
|
||||
styles={{
|
||||
input: {
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
borderColor: 'var(--mantine-color-primary-0)',
|
||||
},
|
||||
placeholder: {
|
||||
color: 'var(--mantine-color-accent-0)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'File Name'}
|
||||
placeholder={fileName}
|
||||
value={newFileName}
|
||||
onChange={(e) => setNewFileName(e.target.value)}
|
||||
pr={'xl'}
|
||||
pl={0}
|
||||
styles={{
|
||||
input: {
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
borderColor: 'var(--mantine-color-primary-0)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
width: '35%',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
marginRight: 0,
|
||||
}}
|
||||
>
|
||||
{background ? (
|
||||
<Image
|
||||
src={URL.createObjectURL(background)}
|
||||
w={'100%'}
|
||||
h={'100%'}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
|
||||
w={'100%'}
|
||||
h={'100%'}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Button
|
||||
w={'min-content'}
|
||||
disabled={!background}
|
||||
onClick={() => {
|
||||
if (background) {
|
||||
const newBackground = new File(
|
||||
[background],
|
||||
newFileName || background.name,
|
||||
{ type: background.type },
|
||||
);
|
||||
fd.append('background', newBackground || '');
|
||||
uploadAsync({
|
||||
method: 'POST',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: fd,
|
||||
});
|
||||
setAdding(false);
|
||||
setBackground(null);
|
||||
setNewFileName('');
|
||||
setErr(false);
|
||||
} else {
|
||||
setErr(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
<Button
|
||||
w={'min-content'}
|
||||
color='var(--mantine-color-red-6)'
|
||||
onClick={() => {
|
||||
setAdding(false);
|
||||
setBackground(null);
|
||||
setNewFileName('');
|
||||
setErr(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Button, Card, Group, Stack, Text } from '@mantine/core';
|
||||
import { useMutationAPI } from 'hooks';
|
||||
|
||||
export function DeleteBackground({
|
||||
fileName,
|
||||
setFileName,
|
||||
inUseBackgrounds,
|
||||
setBackground,
|
||||
setNewFileName,
|
||||
setConfirm,
|
||||
}: {
|
||||
fileName: string;
|
||||
setFileName: (searchValue: string) => void;
|
||||
inUseBackgrounds: string[];
|
||||
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
||||
setNewFileName: (searchValue: string) => void;
|
||||
setConfirm: (value: boolean) => void;
|
||||
}) {
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
return (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Are you sure you want to delete {fileName}?
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
This background is currently in use! This will result in a blank background on
|
||||
the theme.
|
||||
</Text>
|
||||
)}
|
||||
<Text fw={600} fz={'3rem'}>
|
||||
THIS ACTION CANNOT BE UNDONE!!!
|
||||
</Text>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='red'
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
mutateAsync({
|
||||
method: 'DELETE',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: { fileName },
|
||||
});
|
||||
}}
|
||||
>
|
||||
DELETE
|
||||
</Button>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useCommonHooks, useMutationAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { textInputClasses } from 'styles';
|
||||
|
||||
export function EditBackground({
|
||||
fileName,
|
||||
setFileName,
|
||||
inUseBackgrounds,
|
||||
setBackground,
|
||||
setNewFileName,
|
||||
setEditing,
|
||||
}: {
|
||||
fileName: string;
|
||||
setFileName: (searchValue: string) => void;
|
||||
inUseBackgrounds: string[];
|
||||
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
||||
setNewFileName: (searchValue: string) => void;
|
||||
setEditing: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const [rename, setRename] = useState<string>('');
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const { theme } = useCommonHooks();
|
||||
return (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Editing {fileName}
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
Updating the name will update the associated themes.
|
||||
</Text>
|
||||
)}
|
||||
<Group h={'100%'} mb={'1rem'}>
|
||||
<TextInput
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
label='New Name'
|
||||
onChange={(e) => setRename(e.target.value)}
|
||||
styles={
|
||||
theme.textShadowsEnabled && {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='green'
|
||||
onClick={() => {
|
||||
if (
|
||||
!rename.endsWith('.png') &&
|
||||
!rename.endsWith('.jpg') &&
|
||||
!rename.endsWith('.jpeg')
|
||||
) {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: `${rename}${fileName.substring(
|
||||
fileName.lastIndexOf('.'),
|
||||
fileName.length,
|
||||
)}`,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: rename,
|
||||
},
|
||||
});
|
||||
}
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color={'var(--mantine-color-red-6)'}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
setFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { BackgroundModal } from './BackgroundModal';
|
||||
export { DeleteBackground } from './DeleteBackground';
|
||||
export { EditBackground } from './EditBackground';
|
||||
Reference in New Issue
Block a user