feat: patch params editor (#428)

* feat: configure params in views
cpvalente · Jun 6, 2023 · cf6ce88 · cf6ce88
1 parent a3487e7
commit cf6ce88
Show file tree

Hide file tree

Showing 21 changed files with 150 additions and 294 deletions.
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -27,6 +27,7 @@ $button-size: 48px;
   position: fixed;
   left: 0;
   top: 0;
+  z-index: 2;
 
   &.hidden {
     opacity: 0;
@@ -46,7 +47,7 @@ $button-size: 48px;
 
 .navButton {
   @extend .button;
-  z-index: 2;
+  z-index: 3;
 }
 
 .menuContainer {

diff --git a/apps/client/src/common/components/progress-bar/ProgressBar.scss b/apps/client/src/common/components/progress-bar/ProgressBar.scss
@@ -18,5 +18,6 @@ $progress-bar-br: 6px;
   height: $progress-bar-size;
   background-color: var(--timer-progress-override, $accent-color);
   transition: 1s linear;
+  border-radius: $progress-bar-br 0 0 $progress-bar-br;
   transition-property: width;
 }
diff --git a/...onents/edit-form-drawer/EditFormInput.tsx → ...ponents/view-params-editor/ParamInput.tsx b/...onents/edit-form-drawer/EditFormInput.tsx → ...ponents/view-params-editor/ParamInput.tsx
@@ -9,7 +9,7 @@ interface EditFormInputProps {
   paramField: ParamField;
 }
 
-export default function EditFormInput({ paramField }: EditFormInputProps) {
+export default function ParamInput({ paramField }: EditFormInputProps) {
   const [searchParams] = useSearchParams();
   const { id, type } = paramField;
 
@@ -38,7 +38,7 @@ export default function EditFormInput({ paramField }: EditFormInputProps) {
   if (type === 'number') {
     const defaultNumberValue = searchParams.get(id) ?? '';
 
-    return <Input type='number' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
   }
 
   const defaultStringValue = searchParams.get(id) ?? '';

diff --git a/...it-form-drawer/EditFormDrawer.module.scss → ...arams-editor/ViewParamsEditor.module.scss b/...it-form-drawer/EditFormDrawer.module.scss → ...arams-editor/ViewParamsEditor.module.scss
@@ -13,8 +13,14 @@
 .drawerFooter {
   @extend .drawerContent;
   display: flex;
+  justify-content: start;
   gap: $element-spacing;
 
+  button[type='reset'] {
+    padding: 0 2em;
+    margin-right: auto;
+  }
+
   button[type='submit'] {
     padding: 0 2em;
   }

diff --git a/...nents/edit-form-drawer/EditFormDrawer.tsx → ...s/view-params-editor/ViewParamsEditor.tsx b/...nents/edit-form-drawer/EditFormDrawer.tsx → ...s/view-params-editor/ViewParamsEditor.tsx
@@ -12,16 +12,16 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import EditFormInput from './EditFormInput';
+import ParamInput from './ParamInput';
 import { ParamField } from './types';
 
-import style from './EditFormDrawer.module.scss';
+import style from './ViewParamsEditor.module.scss';
 
 interface EditFormDrawerProps {
   paramFields: ParamField[];
 }
 
-export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
+export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
@@ -40,6 +40,11 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
     setSearchParams(searchParams);
   };
 
+  const clearParams = () => {
+    setSearchParams();
+    onClose();
+  };
+
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
     formEvent.preventDefault();
 
@@ -53,8 +58,6 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
 
       return newSearchParams;
     }, new URLSearchParams());
-
-    onEditDrawerClose();
     setSearchParams(newSearchParams);
   };
 
@@ -74,14 +77,17 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
                 <label className={style.label}>
                   <span className={style.title}>{field.title}</span>
                   <span className={style.description}>{field.description}</span>
-                  <EditFormInput key={field.title} paramField={field} />
+                  <ParamInput key={field.title} paramField={field} />
                 </label>
               </div>
             ))}
           </form>
         </DrawerBody>
 
         <DrawerFooter className={style.drawerFooter}>
+          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
+            Clear
+          </Button>
           <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
             Cancel
           </Button>

diff --git a/.../components/edit-form-drawer/constants.ts → ...omponents/view-params-editor/constants.ts b/.../components/edit-form-drawer/constants.ts → ...omponents/view-params-editor/constants.ts
@@ -9,9 +9,10 @@ export const TIME_FORMAT_OPTION: ParamField = {
 };
 
 export const CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Background colour in hexadecimal',
     type: 'string',
   },
@@ -65,30 +66,14 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
   },
-  {
-    id: 'hidenav',
-    title: 'Hide Nav',
-    description: 'Whether to hide the nav logo in the right corner',
-    type: 'boolean',
-  },
-  TIME_FORMAT_OPTION,
 ];
 
-export const TIMER_OPTIONS: ParamField[] = [
-  {
-    id: 'progress',
-    title: 'Progress Bar',
-    description: 'Whether bar counts up or down',
-    type: 'option',
-    values: ['up', 'down'],
-  },
-  TIME_FORMAT_OPTION,
-];
+export const TIMER_OPTIONS: ParamField[] = [TIME_FORMAT_OPTION];
 
 export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Background colour in hexadecimal',
     type: 'string',
   },
@@ -142,12 +127,6 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
   },
-  {
-    id: 'hidenav',
-    title: 'Hide Nav',
-    description: 'Whether to hide the nav logo in the right corner',
-    type: 'boolean',
-  },
   {
     id: 'hideovertime',
     title: 'Hide Overtime',
@@ -160,13 +139,19 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Whether to hide the overlay from showing timer screen messages',
     type: 'boolean',
   },
+  {
+    id: 'hideendmessage',
+    title: 'Hide End Message',
+    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+    type: 'boolean',
+  },
 ];
 
 export const LOWER_THIRDS_OPTIONS: ParamField[] = [
   {
     id: 'preset',
     title: 'Preset',
-    description: 'Selects a style preset',
+    description: 'Selects a style preset (0-1)',
     type: 'number',
   },
   {
@@ -183,19 +168,19 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
   },
   {
     id: 'text',
-    title: 'Text',
+    title: 'Text Colour',
     description: 'Text colour in hexadecimal',
     type: 'string',
   },
   {
     id: 'bg',
-    title: 'BG',
+    title: 'Text Background',
     description: 'Text background colour in hexadecimal',
     type: 'string',
   },
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Screen background colour in hexadecimal',
     type: 'string',
   },
@@ -205,15 +190,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     description: 'Time (in seconds) the lower third displays before fading out',
     type: 'number',
   },
-  TIME_FORMAT_OPTION,
 ];
 
 export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     id: 'seconds',
-    title: 'Seconds',
+    title: 'Show Seconds',
     description: 'Shows seconds in clock',
     type: 'boolean',
   },
-  TIME_FORMAT_OPTION,
 ];
diff --git a/...mmon/components/edit-form-drawer/types.ts → ...on/components/view-params-editor/types.ts b/...mmon/components/edit-form-drawer/types.ts → ...on/components/view-params-editor/types.ts
diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -5,14 +5,14 @@ import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
-import { TIME_FORMAT_OPTION } from '../../../common/components/edit-form-drawer/constants';
-import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
 import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
+import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-editor/constants';
+import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { getEventsWithDelay } from '../../../common/utils/eventsManager';
@@ -79,7 +79,7 @@ export default function Backstage(props: BackstageProps) {
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
-      <EditFormDrawer paramFields={[TIME_FORMAT_OPTION]} />
+      <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
       <div className='event-header'>
         {general.title}
         <div className='clock-container'>

diff --git a/apps/client/src/features/viewers/clock/Clock.tsx b/apps/client/src/features/viewers/clock/Clock.tsx
@@ -3,9 +3,9 @@ import { useSearchParams } from 'react-router-dom';
 import { ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
-import { CLOCK_OPTIONS } from '../../../common/components/edit-form-drawer/constants';
-import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
+import { CLOCK_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
@@ -129,12 +129,12 @@ export default function Clock(props: ClockProps) {
       style={{
         backgroundColor: userOptions.keyColour,
         justifyContent: userOptions.justifyContent,
-        alignItems: userOptions.alignItems,
+        alignContent: userOptions.alignItems,
       }}
       data-testid='clock-view'
     >
       <NavigationMenu />
-      <EditFormDrawer paramFields={CLOCK_OPTIONS} />
+      <ViewParamsEditor paramFields={CLOCK_OPTIONS} />
       <div
         className='clock'
         style={{

diff --git a/apps/client/src/features/viewers/countdown/Countdown.tsx b/apps/client/src/features/viewers/countdown/Countdown.tsx
@@ -4,9 +4,9 @@ import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent, ViewSettings
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
-import { TIME_FORMAT_OPTION } from '../../../common/components/edit-form-drawer/constants';
-import EditFormDrawer from '../../../common/components/edit-form-drawer/EditFormDrawer';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
+import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-editor/constants';
+import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import getDelayTo from '../../../common/utils/getDelayTo';
@@ -112,7 +112,7 @@ export default function Countdown(props: CountdownProps) {
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <NavigationMenu />
-      <EditFormDrawer paramFields={[TIME_FORMAT_OPTION]} />
+      <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
       {follow === null ? (
         <CountdownSelect events={backstageEvents} />
       ) : (