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

Theme modal changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-12 15:08:33 -05:00
parent 95b124a94b
commit d55021b9b5
1 changed files with 99 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/settings/components/ThemeModal.tsx
View File

@@ -39,14 +39,23 @@ function ThemeModal({
const filtered = backgroundList.filter((item: any) =>
item.toLowerCase().includes(query.toLowerCase()),
);
const re = /(?:\.([^.]+))?$/;
const items = filtered.map((item: any, index: any) => (
<UnstyledButton
data-list-item
key={item}
display='block'
bg={index === hovered ? `no-repeat center url(/backgrounds/${item})` : `no-repeat center url(/backgrounds/${item})`}
p={50}
w={'90%'}
style={{
width: '100%',
height: '75px',
background:
index === hovered
? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})`
: `no-repeat center url(/backgrounds/${item})`,
backgroundSize: 'cover',
backgroundColor: item === 'None' ? '#00000088' : undefined,
paddingLeft: 8,
alignItems: 'center',
}}
onClick={() =>
setSelectedTheme({
...selectedTheme,
@@ -54,13 +63,43 @@ function ThemeModal({
})
}
>
{item}
<Group h={'100%'} w={'100%'} justify='space-between'>
<Text
style={{
width: 'min-content',
height: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: 8,
borderRadius: 4,
}}
>
{item.replace(/\.[^/.]+$/, '')}
</Text>
{item !== 'None' && (
<Text
style={{
width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: 8,
marginTop: 34,
borderTopLeftRadius: 4,
color: theme.accentColor,
}}
>
{re.exec(item.toUpperCase())?.[1]}
</Text>
)}
</Group>
</UnstyledButton>
));
useEffect(() => {
if (selectedTheme) {
setQuery(selectedTheme?.backgroundImage || '');
if (selectedTheme?.backgroundImage === 'none') {
setQuery('');
} else {
setQuery(selectedTheme?.backgroundImage || '');
}
}
}, [selectedTheme]);
@@ -273,44 +312,65 @@ function ThemeModal({
)}
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
value={query}
onChange={(event) => {
setQuery(event.currentTarget.value);
setHovered(-1);
}}
onKeyDown={(event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
setHovered((current) => {
const nextIndex =
current + 1 >= filtered.length ? current : current + 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
<Group gap={0}>
<Text mr={8}>Search:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
value={query.replace(/\.[^/.]+$/, '')}
rightSection={
<FiX
style={{
cursor: 'pointer',
margin: '4px',
}}
onClick={() => {
setQuery('');
}}
/>
}
onChange={(event) => {
setQuery(event.currentTarget.value);
setHovered(-1);
}}
onKeyDown={(event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
setHovered((current) => {
const nextIndex =
current + 1 >= filtered.length ? current : current + 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setHovered((current) => {
const nextIndex = current - 1 < 0 ? current : current - 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setHovered((current) => {
const nextIndex = current - 1 < 0 ? current : current - 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
}}
/>
</Group>
<ScrollArea.Autosize
viewportRef={viewportRef}
style={{
height: 150,
width: '90%',
borderRadius: 8,
}}
/>
<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
<Stack gap={0} align='center'>
>
<Stack gap={0} align='center' display={'block'}>
{items}
</Stack>
</ScrollArea>
</ScrollArea.Autosize>
</Stack>
</Group>
<Divider color='black' my='sm' />