refactor: small style tweaks

refactor: consistent font size on inputs

refactor: style tweaks for block spacing

refactor: improve skipped styles

fix: improve responsiveness in extracted rundown

refactor: style tweaks to overview

refactor: simplify group target duration

apps/client/src/features/rundown/entry-editor/BlockEditor.tsx

@@ -1,25 +1,25 @@
 import { useCallback } from 'react';
-import { OntimeBlock } from 'ontime-types';
-import { millisToString, parseUserTime } from 'ontime-utils';
+import { MaybeNumber, OntimeBlock } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
 
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
-import NullableTimeInput from '../../../common/components/input/time-input/NullableTimeInput';
 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getOffsetState } from '../../../common/utils/offset';
-import { enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
+import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import TextLikeInput from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput';
 
 import EntryEditorCustomFields from './composite/EventEditorCustomFields';
 import EventTextArea from './composite/EventTextArea';
 import EntryEditorTextInput from './composite/EventTextInput';
+import TargetDurationInput from './composite/TargetDurationInput';
 
 import style from './EntryEditor.module.scss';
 
 // title + colour + custom field labels
-export type BlockEditorUpdateTextFields = 'targetDuration' | 'title' | 'colour' | string;
+export type BlockEditorUpdateTextFields = 'title' | 'colour' | string;
 export type BlockEditorUpdateMaybeNumberFields = 'targetDuration';
 
 interface BlockEditorProps {
@@ -31,7 +31,7 @@ export default function BlockEditor({ block }: BlockEditorProps) {
   const { updateEntry } = useEntryActions();
 
   const handleSubmit = useCallback(
-    (field: BlockEditorUpdateTextFields | BlockEditorUpdateMaybeNumberFields, value: string | boolean) => {
+    (field: BlockEditorUpdateTextFields | BlockEditorUpdateMaybeNumberFields, value: string | MaybeNumber) => {
       // Handle custom fields
       if (typeof field === 'string' && field.startsWith('custom-')) {
         const fieldLabel = field.split('custom-')[1];
@@ -40,11 +40,7 @@ export default function BlockEditor({ block }: BlockEditorProps) {
       }
 
       if (field === 'targetDuration') {
-        if (value === '') {
-          return updateEntry({ id: block.id, targetDuration: null });
-        }
-
-        return updateEntry({ id: block.id, targetDuration: parseUserTime(value as string) });
+        return updateEntry({ id: block.id, targetDuration: value as MaybeNumber });
       }
 
       // all other strings are text fields
@@ -85,22 +81,22 @@ export default function BlockEditor({ block }: BlockEditorProps) {
           </div>
         </div>
         <div className={style.inline}>
-          <div>
-            <Editor.Label htmlFor='targetDuration'>Target duration</Editor.Label>
-            <NullableTimeInput
-              name='targetDuration'
-              time={block.targetDuration}
-              submitHandler={handleSubmit}
-              emptyDisplay={enDash}
-            />
-          </div>
           <div>
             <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
-            <TextLikeInput offset={planOffsetLabel} className={style.textLikeInput} tabIndex={-1}>
+            <TextLikeInput
+              offset={planOffsetLabel}
+              className={cx([style.textLikeInput, planOffset === null && style.inactive])}
+              tabIndex={-1}
+            >
               {planOffset !== null && planOffset > 0 ? '+' : ''}
               {millisToString(planOffset, { fallback: enDash })}
             </TextLikeInput>
           </div>
+          <TargetDurationInput
+            duration={block.duration}
+            targetDuration={block.targetDuration}
+            submitHandler={handleSubmit}
+          />
         </div>
       </div>
 

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -94,16 +94,21 @@
 
 /* approximating the style of a disabled input */
 .textLikeInput {
-  background-color: rgba($gray-1200, 0.4);
-  font-weight: 400;
-  color: $gray-200;
-  border: 1px solid transparent;
-
-  justify-content: center;
-
+  background: transparent;
+  justify-content: start;
   width: 7.5em;
+  border: 1px solid transparent;
+  border-bottom: 1px solid $gray-1100;
 
   &:hover {
-    background-color: rgba($gray-1200, 0.4);
+    background: transparent;
   }
 }
+
+.inactive {
+  color: $muted-gray;
+}
+
+.active {
+  color: $active-indicator;
+}

apps/client/src/features/rundown/entry-editor/composite/TargetDurationInput.tsx

@@ -0,0 +1,45 @@
+import { IoLockClosed, IoLockOpenOutline } from 'react-icons/io5';
+import { MaybeNumber } from 'ontime-types';
+
+import IconButton from '../../../../common/components/buttons/IconButton';
+import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
+import NullableTimeInput from '../../../../common/components/input/time-input/NullableTimeInput';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
+import { cx, enDash } from '../../../../common/utils/styleUtils';
+import TimeInputGroup from '../../time-input-flow/TimeInputGroup';
+
+import style from '../EntryEditor.module.scss';
+
+interface TargetDurationInputProps {
+  duration: MaybeNumber;
+  targetDuration: MaybeNumber;
+  submitHandler: (field: 'targetDuration', value: MaybeNumber) => void;
+}
+
+export default function TargetDurationInput({ duration, targetDuration, submitHandler }: TargetDurationInputProps) {
+  const isBlocked = targetDuration !== null;
+
+  return (
+    <div>
+      <Editor.Label htmlFor='targetDuration'>Target duration</Editor.Label>
+      <TimeInputGroup hasDelay={isBlocked && targetDuration !== duration}>
+        <NullableTimeInput
+          name='targetDuration'
+          time={targetDuration}
+          submitHandler={submitHandler}
+          emptyDisplay={enDash}
+          className={isBlocked ? '' : style.inactive}
+        />
+        <Tooltip
+          text='Lock to target duration'
+          className={cx([style.timeAction, isBlocked && style.active])}
+          onClick={() => submitHandler('targetDuration', isBlocked ? null : duration)}
+          data-testid='lock__duration'
+          render={<IconButton variant='subtle-white' className={isBlocked ? style.active : style.inactive} />}
+        >
+          {isBlocked ? <IoLockClosed /> : <IoLockOpenOutline />}
+        </Tooltip>
+      </TimeInputGroup>
+    </div>
+  );
+}