cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 22:49:18 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: implement colour picker

Browse Source
This commit is contained in:
Carlos Valente
2024-10-12 14:33:24 +02:00
committed by Carlos Valente
parent 687ad68726
commit b73448f827
4 changed files with 68 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/view-params-editor/ParamInput.tsx
+3 -7
View File
@@ -16,6 +16,7 @@ import {
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import InlineColourPicker from './InlineColourPicker';
import { ParamField } from './types';
interface EditFormInputProps {
@@ -23,8 +24,8 @@ interface EditFormInputProps {
}
export default function ParamInput(props: EditFormInputProps) {
const [searchParams] = useSearchParams();
const { paramField } = props;
const [searchParams] = useSearchParams();
const { id, type, defaultValue } = paramField;
if (type === 'persist') {
@@ -84,12 +85,7 @@ export default function ParamInput(props: EditFormInputProps) {
if (type === 'colour') {
const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
return (
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<Input type='color' variant='ontime-filled' name={id} defaultValue={currentvalue} />
<span>{`Current colour: ${currentvalue.toUpperCase()}`}</span>
</div>
);
return <InlineColourPicker name={id} value={currentvalue} />;
}
const defaultStringValue = searchParams.get(id) ?? defaultValue;