Theme designer updates
This commit is contained in:
Sean Edmunds
@@ -1,11 +1,13 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
ColorPicker,
|
||||
ColorSwatch,
|
||||
Group,
|
||||
Image,
|
||||
Overlay,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
@@ -14,9 +16,11 @@ import {
|
||||
UnstyledButton,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import FontPicker from 'react-fontpicker-ts';
|
||||
import { FaClipboard, FaFont, FaGoogle } from 'react-icons/fa';
|
||||
import { FaShuffle } from 'react-icons/fa6';
|
||||
import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
|
||||
import {
|
||||
@@ -27,7 +31,7 @@ import {
|
||||
textInputClasses,
|
||||
toolTipClasses,
|
||||
} from 'styles';
|
||||
import { BackgroundProperties, type Theme } from 'types';
|
||||
import { type Theme, ThemeProperties } from 'types';
|
||||
import { ThemeModalContent } from './ThemeModalContent';
|
||||
|
||||
export function ThemeEditor({
|
||||
@@ -61,31 +65,40 @@ export function ThemeEditor({
|
||||
}) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [hovered, setHovered] = useState(-1);
|
||||
const { isMobile, theme, getObjectDiff, textShadowStyle } = useCommonHooks();
|
||||
const { currentUser, isMobile, theme, getObjectDiff, textShadowStyle } =
|
||||
useCommonHooks();
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
const [colorId, setColorId] = useState<string>('');
|
||||
const [colorValue, setColorValue] = useState('#000000');
|
||||
const [font, setFont] = useState<Theme['themeFont']>();
|
||||
const [customFontEnabled, setCustomFontEnabled] = useState<boolean>(false);
|
||||
const re = /(?:\.([^.]+))?$/;
|
||||
const [backgroundPicker, { open: openBackgroundPicker, close: closeBackgroundPicker }] =
|
||||
useDisclosure(false);
|
||||
const filtered = backgroundList.filter((item: string) =>
|
||||
item.toLowerCase().includes(query.toLowerCase()),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (font) {
|
||||
setCustomFontEnabled(true);
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
themeFont: font,
|
||||
});
|
||||
} else {
|
||||
setCustomFontEnabled(false);
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
themeFont: null,
|
||||
});
|
||||
}
|
||||
}, [font]);
|
||||
useEffect(() => {
|
||||
if (selectedTheme) {
|
||||
setCustomFontEnabled(selectedTheme.themeFont !== null);
|
||||
setFont(selectedTheme.themeFont);
|
||||
}
|
||||
}, [selectedTheme]);
|
||||
const items = filtered.map((item: string, index: number) => {
|
||||
return (
|
||||
<UnstyledButton
|
||||
@@ -171,6 +184,7 @@ export function ThemeEditor({
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group p={'2rem'} w={'100%'} justify='space-between'>
|
||||
@@ -289,10 +303,10 @@ export function ThemeEditor({
|
||||
<Stack
|
||||
w={isMobile ? '100%' : '28%'}
|
||||
h={'450px'}
|
||||
p={'1rem'}
|
||||
style={{
|
||||
borderRadius: '1rem',
|
||||
backgroundColor: 'var(--mantine-color-accent-0)',
|
||||
overflow: 'clip',
|
||||
}}
|
||||
>
|
||||
{pickerOpen && (
|
||||
@@ -305,8 +319,7 @@ export function ThemeEditor({
|
||||
textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
|
||||
}}
|
||||
>
|
||||
Change{' '}
|
||||
{BackgroundProperties[colorId as keyof typeof BackgroundProperties]}
|
||||
Change {ThemeProperties[colorId as keyof typeof ThemeProperties]}
|
||||
</Text>
|
||||
{colorId === 'searchColor' && (
|
||||
<ColorPicker
|
||||
@@ -492,79 +505,200 @@ export function ThemeEditor({
|
||||
)}
|
||||
{!pickerOpen && !backgroundPicker && (
|
||||
<Stack h={'100%'} justify='space-between' align='center' gap={4}>
|
||||
<Stack w={'100%'} align='center' gap={4}>
|
||||
<Checkbox
|
||||
label='Text Shadows'
|
||||
checked={selectedTheme.textShadowsEnabled === 1}
|
||||
c={'var(--mantine-color-background-0)'}
|
||||
onChange={(e) => {
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
textShadowsEnabled: e.target.checked ? 1 : 0,
|
||||
});
|
||||
}}
|
||||
styles={{
|
||||
root: { width: '50%' },
|
||||
body: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Checkbox
|
||||
label='App Shadows'
|
||||
checked={selectedTheme.appShadowsEnabled === 1}
|
||||
c={'var(--mantine-color-background-0)'}
|
||||
onChange={(e) => {
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
appShadowsEnabled: e.target.checked ? 1 : 0,
|
||||
});
|
||||
}}
|
||||
styles={{
|
||||
root: { width: '50%' },
|
||||
body: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<FontPicker
|
||||
style={{ width: '75%' }}
|
||||
autoLoad
|
||||
defaultValue={
|
||||
selectedTheme.themeFont === null ? 'Jost' : selectedTheme.themeFont
|
||||
}
|
||||
value={(font: string) => setFont(font)}
|
||||
/>
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setFont(null);
|
||||
<Stack w={'100%'} align='center' gap={0} h={'min-content'}>
|
||||
<Group gap={2} w={'100%'} justify='space-between' align='center'>
|
||||
<Checkbox.Card
|
||||
w={'calc(50% - 1px)'}
|
||||
checked={selectedTheme.textShadowsEnabled === 1}
|
||||
c={'var(--mantine-color-background-0)'}
|
||||
onChange={(e) => {
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
textShadowsEnabled: e ? 1 : 0,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
filter: `grayscale(${selectedTheme.textShadowsEnabled === 1 ? 0 : '75%'}) brightness(${selectedTheme.textShadowsEnabled === 1 ? '1' : '1.5'})`,
|
||||
transition: 'all 1s ease',
|
||||
}}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
<Tooltip
|
||||
label='Text Shadows'
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
style={{
|
||||
backgroundColor: selectedTheme.backgroundColor,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
classNames={textClasses}
|
||||
className={textClasses.sectionTitle}
|
||||
style={{
|
||||
color: selectedTheme.accentColor,
|
||||
textShadow: `2px 2px ${selectedTheme.primaryColor}`,
|
||||
}}
|
||||
>
|
||||
Shadows
|
||||
</Text>
|
||||
</Group>
|
||||
</Tooltip>
|
||||
</Checkbox.Card>
|
||||
<Checkbox.Card
|
||||
w={'calc(50% - 1px)'}
|
||||
checked={selectedTheme.appShadowsEnabled === 1}
|
||||
c={'var(--mantine-color-background-0)'}
|
||||
onChange={(e) => {
|
||||
setSelectedTheme({
|
||||
...selectedTheme,
|
||||
appShadowsEnabled: e ? 1 : 0,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
filter: `grayscale(${selectedTheme.appShadowsEnabled === 1 ? 0 : '75%'}) brightness(${selectedTheme.appShadowsEnabled === 1 ? '1' : '1.5'})`,
|
||||
transition: 'all 1s ease',
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
label='Icon Shadows'
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
backgroundColor: selectedTheme.backgroundColor,
|
||||
overflow: 'clip',
|
||||
}}
|
||||
>
|
||||
<FaGoogle
|
||||
style={{
|
||||
marginTop: '12px',
|
||||
marginBottom: '7px',
|
||||
color: selectedTheme.primaryColor,
|
||||
height: 32,
|
||||
width: 32,
|
||||
filter: `drop-shadow(2px 2px color-mix(in srgb, ${selectedTheme.accentColor}, transparent 30%))`,
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</Tooltip>
|
||||
</Checkbox.Card>
|
||||
</Group>
|
||||
<Group w={'100%'} gap={0} justify='center'>
|
||||
<Tooltip
|
||||
label={`Custom Font ${customFontEnabled ? 'Enabled' : 'Disabled'}`}
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<ActionIcon
|
||||
color={'red'}
|
||||
size={32}
|
||||
onClick={() => {
|
||||
setCustomFontEnabled(!customFontEnabled);
|
||||
setFont(null);
|
||||
}}
|
||||
style={{
|
||||
borderRadius: '0px',
|
||||
filter: `grayscale(${customFontEnabled ? 0 : '75%'})`,
|
||||
}}
|
||||
>
|
||||
<FaFont />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Box
|
||||
w={'calc(100% - 64px)'}
|
||||
onClick={(e) => {
|
||||
if (!customFontEnabled) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
pos={'relative'}
|
||||
>
|
||||
{!customFontEnabled && <Overlay pos={'absolute'} />}
|
||||
<FontPicker
|
||||
autoLoad
|
||||
defaultValue={
|
||||
selectedTheme.themeFont === null
|
||||
? 'Jost'
|
||||
: selectedTheme.themeFont
|
||||
}
|
||||
value={(font: string) => {
|
||||
if (customFontEnabled) {
|
||||
setFont(font);
|
||||
} else {
|
||||
setFont(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Tooltip
|
||||
label='Reset to use default'
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<ActionIcon
|
||||
disabled={!customFontEnabled}
|
||||
color={'red'}
|
||||
size={32}
|
||||
onClick={() => {
|
||||
setFont(null);
|
||||
setCustomFontEnabled(false);
|
||||
}}
|
||||
style={{
|
||||
borderRadius: '0px',
|
||||
}}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
{JSON.stringify(defaultTheme) !== JSON.stringify(selectedTheme) && (
|
||||
<>
|
||||
<Text c={'var(--mantine-color-background-0)'} fz={'1.5rem'}>
|
||||
Changes:
|
||||
<Stack
|
||||
gap={0}
|
||||
w={'95%'}
|
||||
h={'calc(100% - 144px)'}
|
||||
align='center'
|
||||
style={{
|
||||
backgroundColor: 'var(--mantine-color-background-0)',
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
fz={'1.5rem'}
|
||||
w={'100%'}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
borderBottom: '1px solid var(--mantine-color-primary-0',
|
||||
}}
|
||||
>
|
||||
Changes
|
||||
</Text>
|
||||
<ScrollArea.Autosize
|
||||
w={'100%'}
|
||||
className={scrollAreaClasses.default}
|
||||
classNames={scrollAreaClasses}
|
||||
style={{
|
||||
backgroundColor: 'var(--mantine-color-background-0)',
|
||||
borderRadius: 8,
|
||||
padding: '1rem',
|
||||
}}
|
||||
styles={{
|
||||
scrollbar: {
|
||||
position: 'absolute',
|
||||
right: -2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack w={'100%'} gap={0}>
|
||||
<Stack w={'95%'} gap={2}>
|
||||
{getObjectDiff(defaultTheme, designerTheme) !== null &&
|
||||
Object.keys(getObjectDiff(defaultTheme, designerTheme)).map(
|
||||
(key: any) => {
|
||||
@@ -576,22 +710,115 @@ export function ThemeEditor({
|
||||
gap={0}
|
||||
key={key}
|
||||
>
|
||||
<Text key={key}>
|
||||
{
|
||||
BackgroundProperties[
|
||||
key as keyof typeof BackgroundProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
<Group w={'100%'} justify='space-between'>
|
||||
<Text
|
||||
key={key}
|
||||
pl={2}
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
backgroundColor:
|
||||
'var(--mantine-color-background-0)',
|
||||
}}
|
||||
>
|
||||
{ThemeProperties[key as keyof typeof ThemeProperties]}
|
||||
</Text>
|
||||
<Tooltip
|
||||
label={`Reset ${
|
||||
ThemeProperties[key as keyof typeof ThemeProperties]
|
||||
}`}
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ActionIcon
|
||||
variant='subtle'
|
||||
color='red'
|
||||
onClick={() => {
|
||||
setSelectedTheme({
|
||||
...designerTheme,
|
||||
[key]: defaultTheme[key as keyof Theme],
|
||||
});
|
||||
if (key.includes('Font')) {
|
||||
setFont(defaultTheme.themeFont);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
{key === 'name' && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
h={48}
|
||||
>
|
||||
<Text>{defaultTheme[key as keyof Theme]}</Text>
|
||||
<Text>→</Text>
|
||||
<Text>{designerTheme[key as keyof Theme]}</Text>
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Shadow') && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
h={48}
|
||||
>
|
||||
{defaultTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
<Text>→</Text>
|
||||
{designerTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Font') && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
h={48}
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily:
|
||||
(defaultTheme[key as keyof Theme] as string) ??
|
||||
undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
{defaultTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
<Text>→</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: selectedTheme.themeFont ?? undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
{designerTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
{key === 'backgroundImage' && (
|
||||
<Group w={'100%'} justify='center' gap={4}>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
gap={4}
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Image
|
||||
w={'40%'}
|
||||
src={
|
||||
@@ -616,39 +843,133 @@ export function ThemeEditor({
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Color') && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
<ColorSwatch
|
||||
color={defaultTheme[key as keyof Theme] as string}
|
||||
/>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='space-between'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[key as keyof Theme] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text c={'var(--mantine-color-primary-0)'}>
|
||||
{
|
||||
defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={defaultTheme[key as keyof Theme] as string}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Text>→</Text>
|
||||
<ColorSwatch
|
||||
color={designerTheme[key as keyof Theme] as string}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Shadow') && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
{defaultTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
<Text>→</Text>
|
||||
{designerTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Font') && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Text>
|
||||
{defaultTheme[key as keyof Theme] ||
|
||||
'Default (Jost)'}
|
||||
</Text>
|
||||
<Text>→</Text>
|
||||
<Text>{designerTheme[key as keyof Theme]}</Text>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[key as keyof Theme] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text c={'var(--mantine-color-primary-0)'}>
|
||||
{
|
||||
designerTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={
|
||||
designerTheme[key as keyof Theme] as string
|
||||
}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
)}
|
||||
</Stack>
|
||||
@@ -657,9 +978,9 @@ export function ThemeEditor({
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea.Autosize>
|
||||
</>
|
||||
</Stack>
|
||||
)}
|
||||
<Group mih={'36px'}>
|
||||
<Group mih={'36px'} pb={'1.5rem'}>
|
||||
<Tooltip
|
||||
label={'Randomize Colors!'}
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
|
||||
Reference in New Issue
Block a user