mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 21:24:11 +00:00
Improve change api (#628)
* fix: jsdoc comments * more human casting of string values to boolean * add coerceColour to get named colors to work * cue can't pass isKeyOfType event check * dont mutate value * alloow cue in eventDef * lint * css named or hex formatting * "sideEffects": false * test colour hex regex * roll eventDef back to master * parse property * don't export cssColour names * remove import * only allow string types to colour * handle transparent colour * mix alpha with bg colour * only allow updating events * descriptive names * add test for getAccessibleColour * readability * move isColourHex to regex-utils * simplify and add test
This commit is contained in:
committed by
GitHub
parent
a93cd3e9b1
commit
1343818917
@@ -5,6 +5,7 @@ import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundo
|
||||
|
||||
import useFollowComponent from '../../common/hooks/useFollowComponent';
|
||||
import { useLocalStorage } from '../../common/hooks/useLocalStorage';
|
||||
import { getAccessibleColour } from '../../common/utils/styleUtils';
|
||||
|
||||
import BlockRow from './cuesheet-table-elements/BlockRow';
|
||||
import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
|
||||
@@ -120,8 +121,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
|
||||
} else if (row.original.colour) {
|
||||
try {
|
||||
// the colour is user defined and might be invalid
|
||||
const colour = new Color(row.original.colour).alpha(0.25);
|
||||
rowBgColour = colour.hsl().string();
|
||||
const accessibleBackgroundColor = Color(getAccessibleColour(row.original.colour).backgroundColor);
|
||||
rowBgColour = accessibleBackgroundColor.fade(0.75).hexa();
|
||||
} catch (_error) {
|
||||
/* we do not handle errors here */
|
||||
}
|
||||
|
||||
@@ -19,8 +19,8 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
|
||||
const ownRef = useRef<HTMLTableRowElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const bgColour = colour;
|
||||
const textColour = getAccessibleColour(bgColour);
|
||||
const textColour = getAccessibleColour(colour);
|
||||
const bgColour = textColour.backgroundColor;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
@@ -55,7 +55,7 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
|
||||
style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
|
||||
ref={selectedRef ?? ownRef}
|
||||
>
|
||||
<td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
|
||||
<td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
|
||||
{eventIndex}
|
||||
</td>
|
||||
{isVisible ? children : null}
|
||||
|
||||
Reference in New Issue
Block a user