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

Theme updates and style fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-05-23 13:32:38 -05:00
parent ee69cc9d09
commit 79ebb1b9e9
16 changed files with 488 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -2,7 +2,6 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import {
Box,
Button,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
Divider,
@@ -281,142 +280,104 @@ const ApplicationSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
w={'75%'}
align='center'
justify='center'
ref={provided.innerRef}
{...provided.droppableProps}
>
{applications?.map((app: Application) => (
<Draggable
key={app.id}
draggableId={`${app.id}`}
index={Number(app.index)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card
w={'400px'}
style={{
backgroundColor: 'var(--mantine-color-search-0)',
border: '1px solid var(--mantine-color-border-0)',
borderRadius: '8px',
}}
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}
>
{app.name}
</Text>
</Stack>
<Stack gap={0}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}
>
{app.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>
)}
</Droppable>
</Stack>
</DragDropContext>
) : (
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{applications.length > 0 ? (
applications?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover
withArrow
withOverlay
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<AppSettingsItem
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
/>
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}
allIcons={allIcons}
/>
</Popover.Dropdown>
</Popover>
</GridCol>
))
) : (
<GridCol
w={'100%'}
span={18}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
)}
</Grid>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
<Grid
columns={18}
w={dragging ? '30%' : '75%'}
ref={provided.innerRef}
{...provided.droppableProps}
>
{applications?.map((application: Application, index: number) => (
<GridCol span={dragging ? 18 : 6} key={application.id}>
{dragging ? (
<Draggable
key={application.id}
draggableId={`${application.id}`}
index={Number(application.index)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Box pos={'relative'} h={'100%'}>
<Text
style={{
color: 'var(--mantine-color-primary-0)',
zIndex: 1,
alignContent: 'center',
fontSize: '1.5em',
position: 'absolute',
right: 0,
paddingRight: '1rem',
height: '100%',
}}
>
#{index + 1}
</Text>
<AppSettingsItem
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
/>
</Box>
</Box>
)}
</Draggable>
) : (
<Popover
withArrow
withOverlay
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<AppSettingsItem
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
/>
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}
allIcons={allIcons}
/>
</Popover.Dropdown>
</Popover>
)}
</GridCol>
))}
{provided.placeholder}
</Grid>
)}
</Droppable>
) : (
<NoItemsFound />
)}
</Stack>
)}
</DragDropContext>
</Stack>
);
};