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

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

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