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

Add a hover effect when editing availabilities

Browse source
This commit is contained in:
Benji Grant 2023-06-09 16:44:56 +10:00
parent fee7122bfe
commit 19c5c51b42
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -108,17 +108,20 @@ const AvailabilityEditor = ({
title={t<string>('greyed_times')} title={t<string>('greyed_times')}
/> />
const isSelected = (
(!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized))
|| (mode.current === 'add' && selecting.includes(cell.serialized))
)
return <div return <div
key={y} key={y}
className={styles.time} className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
style={{ style={{
backgroundColor: ( backgroundColor: isSelected ? palette[1].string : palette[0].string,
(!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized)) '--hover-color': isSelected ? palette[0].highlight : palette[1].highlight,
|| (mode.current === 'add' && selecting.includes(cell.serialized))
) ? palette[1].string : palette[0].string,
...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' }, ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
...cell.minute === 30 && { borderTopStyle: 'dotted' }, ...cell.minute === 30 && { borderTopStyle: 'dotted' },
}} } as React.CSSProperties}
onPointerDown={e => { onPointerDown={e => {
e.preventDefault() e.preventDefault()
startPos.current = { x, y } startPos.current = { x, y }
@ -132,6 +135,7 @@ const AvailabilityEditor = ({
} else if (mode.current === 'remove') { } else if (mode.current === 'remove') {
onChange(value.filter(t => !selectingRef.current.includes(t))) onChange(value.filter(t => !selectingRef.current.includes(t)))
} }
setSelecting([])
mode.current = undefined mode.current = undefined
}, { once: true }) }, { once: true })
}} }}

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

@ -108,6 +108,15 @@
} }
} }
.editable {
@media (hover: hover) {
&:hover:not(:active) {
opacity: .8;
background-image: linear-gradient(var(--hover-color), var(--hover-color));
}
}
}
.highlight { .highlight {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
45deg, 45deg,