refactor: time input labels on hover (#1855)

apps/client/src/features/rundown/rundown-event/RundownEvent.module.scss

@@ -134,6 +134,13 @@ $skip-opacity: 0.2;
   height: 100%;
 }
 
+.eventTimers.editMode:hover {
+  [class*="hoverLabel"] {
+    opacity: 1;
+    transition: opacity 0.15s 0.5s ease;
+  }
+}
+
 .chipSection {
   grid-area: chip;
 }

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -10,10 +10,12 @@ import {
   IoTime,
 } from 'react-icons/io5';
 import { LuArrowDownToLine } from 'react-icons/lu';
+import { useSessionStorage } from '@mantine/hooks';
 import { EndAction, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { cx } from '../../../common/utils/styleUtils';
+import { AppMode, sessionKeys } from '../../../ontimeConfig';
 import TitleEditor from '../common/TitleEditor';
 import TimeInputFlow from '../time-input-flow/TimeInputFlow';
 
@@ -76,6 +78,11 @@ function RundownEventInner({
 }: RundownEventInnerProps) {
   const [renderInner, setRenderInner] = useState(false);
 
+  const [editorMode] = useSessionStorage({
+    key: sessionKeys.editorMode,
+    defaultValue: AppMode.Edit,
+  });
+
   useEffect(() => {
     setRenderInner(true);
   }, []);
@@ -92,7 +99,7 @@ function RundownEventInner({
 
   return !renderInner ? null : (
     <>
-      <div className={style.eventTimers}>
+      <div className={cx([style.eventTimers, editorMode === AppMode.Edit && style.editMode])}>
         <TimeInputFlow
           eventId={eventId}
           timeStart={timeStart}

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss

@@ -15,3 +15,26 @@
 .active {
   color: $active-indicator;
 }
+
+.inputWrapper {
+  position: relative;
+}
+
+.hoverLabel {
+  position: absolute;
+  top: -1.5rem;
+  background-color: $ui-white;
+  padding: 0.125rem 0.5rem;
+  color: $ui-black;
+  left: 0;
+  opacity: 0;
+  border-radius: $component-border-radius-md;
+  transition: opacity 0.15s ease;  // no delay on fade out
+  pointer-events: none;
+  z-index: $zindex-floating;
+
+  &.visible {
+    opacity: 1;
+    transition: opacity 0.15s 0.5s ease; // small delay before fade in
+  }
+}

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -67,8 +67,9 @@ function TimeInputFlow({
 
   return (
     <>
-      <div>
+      <div className={style.inputWrapper}>
         {showLabels && <Editor.Label className={style.sectionTitle}>Start time</Editor.Label>}
+        <Editor.Label className={style.hoverLabel}>Start</Editor.Label>
         <TimeInputGroup hasDelay={hasDelay}>
           <TimeInput
             name='timeStart'
@@ -88,8 +89,9 @@ function TimeInputFlow({
         </TimeInputGroup>
       </div>
 
-      <div>
+      <div className={style.inputWrapper}>
         {showLabels && <Editor.Label>End time</Editor.Label>}
+        <Editor.Label className={style.hoverLabel}>End</Editor.Label>
         <TimeInputGroup hasDelay={hasDelay}>
           <TimeInput
             name='timeEnd'
@@ -110,8 +112,9 @@ function TimeInputFlow({
         </TimeInputGroup>
       </div>
 
-      <div>
+      <div className={style.inputWrapper}>
         {showLabels && <Editor.Label>Duration</Editor.Label>}
+        <Editor.Label className={style.hoverLabel}>Duration</Editor.Label>
         <TimeInputGroup hasDelay={hasDelay}>
           <TimeInput
             name='duration'