Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-08-04 07:42:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated styling for group manager to better match other forms.

Browse source
This commit is contained in:
SergeantPanda 2025-07-18 19:38:27 -05:00
parent 0996d396cf
commit fc9b179e9a
1 changed files with 63 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

119
frontend/src/components/forms/GroupManager.jsx
View file

@ -14,6 +14,7 @@ import {
ScrollArea,
useMantineTheme,
Chip,
Box,
} from '@mantine/core';
import {
SquarePlus,
@ -73,64 +74,70 @@ const GroupItem = React.memo(({
};
return (
<Group justify="space-between" p="sm" style={{
border: '1px solid #e0e0e0',
borderRadius: '4px',
backgroundColor: editingGroup === group.id ? '#3f3f46' : 'transparent'
}}>
<Stack gap={4} style={{ flex: 1 }}>
{editingGroup === group.id ? (
<TextInput
value={editName}
onChange={onEditNameChange}
size="sm"
onKeyPress={(e) => e.key === 'Enter' && onSaveEdit()}
autoFocus
/>
) : (
<>
<Text size="sm" fw={500}>{group.name}</Text>
<Group gap={4}>
{getGroupBadges(group)}
</Group>
</>
)}
</Stack>
<Box
style={{
border: '1px solid #444',
borderRadius: '8px',
backgroundColor: editingGroup === group.id ? '#3f3f46' : (group.enabled ? '#2A2A2E' : '#1E1E22'),
padding: '8px',
marginBottom: '2px',
}}
>
<Group justify="space-between" gap="xs" align="flex-start">
<Stack gap={4} style={{ flex: 1 }}>
{editingGroup === group.id ? (
<TextInput
value={editName}
onChange={onEditNameChange}
size="sm"
onKeyPress={(e) => e.key === 'Enter' && onSaveEdit()}
autoFocus
/>
) : (
<>
<Text size="sm" fw={500}>{group.name}</Text>
<Group gap={4}>
{getGroupBadges(group)}
</Group>
</>
)}
</Stack>
<Group gap="xs">
{editingGroup === group.id ? (
<>
<ActionIcon color="green" size="sm" onClick={onSaveEdit}>
<Check size={14} />
</ActionIcon>
<ActionIcon color="gray" size="sm" onClick={onCancelEdit}>
<X size={14} />
</ActionIcon>
</>
) : (
<>
<ActionIcon
variant="transparent"
color={theme.tailwind.yellow[3]}
size="sm"
onClick={() => onEdit(group)}
disabled={!canEditGroup(group)}
>
<SquarePen size={18} />
</ActionIcon>
<ActionIcon
variant="transparent"
color={theme.tailwind.red[6]}
size="sm"
onClick={() => onDelete(group)}
disabled={!canDeleteGroup(group)}
>
<SquareMinus size="18" />
</ActionIcon>
</>
)}
<Group gap="xs">
{editingGroup === group.id ? (
<>
<ActionIcon color="green" size="sm" onClick={onSaveEdit}>
<Check size={14} />
</ActionIcon>
<ActionIcon color="gray" size="sm" onClick={onCancelEdit}>
<X size={14} />
</ActionIcon>
</>
) : (
<>
<ActionIcon
variant="transparent"
color={theme.tailwind.yellow[3]}
size="sm"
onClick={() => onEdit(group)}
disabled={!canEditGroup(group)}
>
<SquarePen size={18} />
</ActionIcon>
<ActionIcon
variant="transparent"
color={theme.tailwind.red[6]}
size="sm"
onClick={() => onDelete(group)}
disabled={!canDeleteGroup(group)}
>
<SquareMinus size="18" />
</ActionIcon>
</>
)}
</Group>
</Group>
</Group>
</Box>
);
});