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