jonas/donetick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

make choosing color match advance filter color selector

Browse Source
This commit is contained in:
Mo Tarbin
2026-07-12 23:34:47 -04:00
parent 5332d0ac62
commit d21ec9d727
2 changed files with 47 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/Modals/Inputs/LabelModal.jsx
View File

@@ -1,12 +1,4 @@
import { import { Box, Button, FormControl, Input, Typography } from '@mui/joy'
Box,
Button,
FormControl,
Input,
Option,
Select,
Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query'
@@ -125,39 +117,30 @@ function LabelModal({ isOpen, onClose, label }) {
<Typography gutterBottom level='body-sm' alignSelf='start'> <Typography gutterBottom level='body-sm' alignSelf='start'>
Color Color
</Typography> </Typography>
<Select <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
value={color} {LABEL_COLORS.map(colorOption => (
onChange={(e, value) => value && setColor(value)} <Box
renderValue={selected => ( key={colorOption.value}
<Typography title={colorOption.name}
startDecorator={ onClick={() => setColor(colorOption.value)}
<Box sx={{
className='size-4' width: 26,
borderRadius={10} height: 26,
sx={{ background: selected.value }} borderRadius: '50%',
/> background: colorOption.value,
} cursor: 'pointer',
> outline:
{selected.label} color === colorOption.value
</Typography> ? '3px solid var(--joy-palette-primary-500)'
)} : '2px solid transparent',
> outlineOffset: '2px',
{LABEL_COLORS.map(val => ( transition: 'all 0.15s ease',
<Option key={val.value} value={val.value}> flexShrink: 0,
<Box className='flex items-center justify-between'> '&:hover': { transform: 'scale(1.2)' },
<Box }}
width={20} />
height={20}
borderRadius={10}
sx={{ background: val.value }}
/>
<Typography sx={{ ml: 1 }} variant='caption'>
{val.name}
</Typography>
</Box>
</Option>
))} ))}
</Select> </Box>
</FormControl> </FormControl>
{error && ( {error && (

57
src/views/Modals/Inputs/ProjectModal.jsx
View File

@@ -5,8 +5,6 @@ import {
FormControl, FormControl,
FormLabel, FormLabel,
Input, Input,
Option,
Select,
Stack, Stack,
Textarea, Textarea,
Typography, Typography,
@@ -223,39 +221,30 @@ const ProjectModal = ({ isOpen, onClose, onSave, project }) => {
{/* Color Selection */} {/* Color Selection */}
<FormControl> <FormControl>
<FormLabel>Project Color</FormLabel> <FormLabel>Project Color</FormLabel>
<Select <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
value={projectColor} {PROJECT_COLORS.map(colorOption => (
onChange={(e, value) => value && setProjectColor(value)} <Box
renderValue={selected => ( key={colorOption.value}
<Typography title={colorOption.name}
startDecorator={ onClick={() => setProjectColor(colorOption.value)}
<Box sx={{
className='size-4' width: 26,
borderRadius={10} height: 26,
sx={{ background: selected.value }} borderRadius: '50%',
/> background: colorOption.value,
} cursor: 'pointer',
> outline:
{selected.label} projectColor === colorOption.value
</Typography> ? '3px solid var(--joy-palette-primary-500)'
)} : '2px solid transparent',
> outlineOffset: '2px',
{PROJECT_COLORS.map(color => ( transition: 'all 0.15s ease',
<Option key={color.value} value={color.value}> flexShrink: 0,
<Box className='flex items-center justify-between'> '&:hover': { transform: 'scale(1.2)' },
<Box }}
width={20} />
height={20}
borderRadius={10}
sx={{ background: color.value }}
/>
<Typography sx={{ ml: 1 }} variant='caption'>
{color.name}
</Typography>
</Box>
</Option>
))} ))}
</Select> </Box>
</FormControl> </FormControl>
{/* Error Message */} {/* Error Message */}