scott/crabfit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve highlight colours

Browse source
This commit is contained in:
Benji Grant 2023-06-09 16:18:06 +10:00
parent 25d029ba57
commit fee7122bfe
8 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -115,7 +115,7 @@ const AvailabilityEditor = ({
backgroundColor: (
(!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized))
|| (mode.current === 'add' && selecting.includes(cell.serialized))
) ? palette[1] : palette[0],
) ? palette[1].string : palette[0].string,
...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
...cell.minute === 30 && { borderTopStyle: 'dotted' },
}}

4
frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
View file

@ -113,8 +113,8 @@
45deg,
transparent,
transparent 4.3px,
rgba(0,0,0,.5) 4.3px,
rgba(0,0,0,.5) 8.6px
var(--highlight-color, rgba(0,0,0,.5)) 4.3px,
var(--highlight-color, rgba(0,0,0,.5)) 8.6px
);
}

6
frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -79,6 +79,7 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps
if (tempFocus) {
peopleHere = peopleHere.filter(p => p === tempFocus)
}
const color = palette[tempFocus && peopleHere.length ? max : peopleHere.length]
return <div
key={y}
@ -87,10 +88,11 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps
(focusCount === undefined || focusCount === peopleHere.length) && highlight && (peopleHere.length === max || tempFocus) && peopleHere.length > 0 && styles.highlight,
)}
style={{
backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? palette[tempFocus && peopleHere.length ? max : peopleHere.length] : 'transparent',
backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? color.string : 'transparent',
'--highlight-color': color.highlight,
...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
...cell.minute === 30 && { borderTopStyle: 'dotted' },
}}
} as React.CSSProperties}
aria-label={peopleHere.join(', ')}
onMouseEnter={e => {
const cellBox = e.currentTarget.getBoundingClientRect()

4
frontend/src/components/Legend/Legend.module.scss
View file

@ -39,7 +39,7 @@
45deg,
transparent,
transparent 4.5px,
rgba(0,0,0,.5) 4.5px,
rgba(0,0,0,.5) 9px
var(--highlight-color, rgba(0,0,0,.5)) 4.5px,
var(--highlight-color, rgba(0,0,0,.5)) 9px
);
}

4
frontend/src/components/Legend/Legend.tsx
View file

@ -8,7 +8,7 @@ interface LegendProps {
min: number
max: number
total: number
palette: string[]
palette: { string: string, highlight: string }[]
onSegmentFocus: (segment: number | undefined) => void
}
@ -29,7 +29,7 @@ const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
{[...Array(max + 1 - min).keys()].map(i => i + min).map(i =>
<div
key={i}
style={{ flex: 1, backgroundColor: palette[i] }}
style={{ flex: 1, backgroundColor: palette[i].string, '--highlight-color': palette[i].highlight } as React.CSSProperties}
className={highlight && i === max && max > 0 ? styles.highlight : undefined}
onMouseOver={() => onSegmentFocus(i)}
/>