style: editor tweaks (#736)

* style: menu tweaks * style: editor tweaks * style: freeze
2026-08-20 14:39:06 +00:00 · 2024-01-26 14:47:27 +01:00
parent c146954a2f
commit f6557a9814
32 changed files with 178 additions and 249 deletions
@@ -1,7 +1,6 @@
 .rundownWrapper {
  height: calc(100% - 1.5rem);
-  overflow: hidden;
-  padding-top: 0.5rem;
+  width: 100%;
 }

 .eventContainer {
@@ -248,7 +248,6 @@ export default function Rundown(props: RundownProps) {
                        previousEventId={previousEventId}
                        playback={isSelected ? featureData.playback : undefined}
                        isRolling={featureData.playback === Playback.Roll}
-                        disableEdit={appMode === AppMode.Run}
                      />
                    </div>
                  </div>
@@ -37,23 +37,11 @@ interface RundownEntryProps {
  previousEventId?: string;
  playback?: Playback; // we only care about this if this event is playing
  isRolling: boolean; // we need to know even if not related to this event
-  disableEdit: boolean;
 }

 export default function RundownEntry(props: RundownEntryProps) {
-  const {
-    isPast,
-    data,
-    selected,
-    hasCursor,
-    next,
-    previousEnd,
-    previousEventId,
-    playback,
-    isRolling,
-    disableEdit,
-    eventIndex,
-  } = props;
+  const { isPast, data, selected, hasCursor, next, previousEnd, previousEventId, playback, isRolling, eventIndex } =
+    props;
  const { emitError } = useEmitLog();
  const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
  const { cursor } = useAppMode();
@@ -173,7 +161,6 @@ export default function RundownEntry(props: RundownEntryProps) {
        playback={playback}
        isRolling={isRolling}
        actionHandler={actionHandler}
-        disableEdit={disableEdit}
      />
    );
  } else if (data.type === SupportedEvent.Block) {
@@ -0,0 +1,40 @@
+@use '../editors//EditorMixin' as editor;
+
+$rundown-width: 44.5rem;
+$editor-width: 25rem;
+
+.rundownExport {
+  grid-area: rundown;
+  max-height: 100%;
+  height: 100%;
+}
+
+.rundown {
+  display: flex;
+  max-height: 100%;
+  height: 100%;
+}
+
+.corner {
+  @include editor.corner;
+  display: inline;
+  z-index: 2;
+}
+
+.list {
+  @include editor.panel;
+  height: inherit;
+  box-shadow: $box-shadow-right;
+  min-width: $rundown-width;
+}
+
+.side {
+  margin: 2rem 0;
+  padding: 1rem;
+  background-color: $gray-1325;
+  border-radius: 0 8px 8px 0;
+  min-width: $editor-width;
+  flex: 1;
+  max-height: 100%;
+  overflow: auto;
+}
@@ -7,21 +7,25 @@ import { handleLinks } from '../../common/utils/linkUtils';
 import EventEditor from './event-editor/EventEditor';
 import RundownWrapper from './RundownWrapper';

-import style from './RundownWrapper.module.scss';
+import style from './RundownExport.module.scss';

 const RundownExport = () => {
  const isExtracted = window.location.pathname.includes('/rundown');

  return (
    <div className={style.rundownExport} data-testid='panel-rundown'>
-      {!isExtracted && <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />}
      <div className={style.rundown}>
-        <ErrorBoundary>
-          <RundownWrapper />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <EventEditor />
-        </ErrorBoundary>
+        <div className={style.list}>
+          <ErrorBoundary>
+            {!isExtracted && <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />}
+            <RundownWrapper />
+          </ErrorBoundary>
+        </div>
+        <div className={style.side}>
+          <ErrorBoundary>
+            <EventEditor />
+          </ErrorBoundary>
+        </div>
      </div>
    </div>
  );
@@ -1,21 +0,0 @@
-@use '../editors//EditorMixin' as editor;
-
-$rundown-width: 44.5rem;
-$editor-width: 25rem;
-
-.rundownExport {
-  grid-area: rundown;
-  min-width: calc($rundown-width + $editor-width);
-  max-height: 100%;
-  position: relative;
-}
-
-.rundown {
-  @include editor.panel;
-}
-
-.corner {
-  @include editor.corner;
-  display: inline;
-  z-index: 2;
-}
@@ -1,6 +1,5 @@
 import Empty from '../../common/components/state/Empty';
 import useRundown from '../../common/hooks-query/useRundown';
-import RundownMenu from '../menu/RundownMenu';

 import Rundown from './Rundown';

@@ -10,11 +9,8 @@ export default function RundownWrapper() {
  const { data, status } = useRundown();

  return (
-    <div>
-      <RundownMenu />
-      <div className={styles.rundownWrapper}>
-        {status === 'success' && data ? <Rundown entries={data} /> : <Empty text='Connecting to server' />}
-      </div>
+    <div className={styles.rundownWrapper}>
+      {status === 'success' && data ? <Rundown entries={data} /> : <Empty text='Connecting to server' />}
    </div>
  );
 }
@@ -66,7 +66,6 @@ interface EventBlockProps {
          value: unknown;
        },
  ) => void;
-  disableEdit: boolean;
 }

 export default function EventBlock(props: EventBlockProps) {
@@ -93,7 +92,6 @@ export default function EventBlock(props: EventBlockProps) {
    playback,
    isRolling,
    actionHandler,
-    disableEdit,
  } = props;
  const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
  const { selectedEvents, setSelectedEvents } = useEventSelection();
@@ -280,7 +278,6 @@ export default function EventBlock(props: EventBlockProps) {
          playback={playback}
          isRolling={isRolling}
          actionHandler={actionHandler}
-          disableEdit={disableEdit}
        />
      )}
    </div>
@@ -1,9 +1,8 @@
-import { memo, MouseEvent, useCallback, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { BiArrowToBottom } from '@react-icons/all-files/bi/BiArrowToBottom';
 import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
 import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoPlayForward } from '@react-icons/all-files/io5/IoPlayForward';
@@ -12,11 +11,9 @@ import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, Playback, TimerType } from 'ontime-types';

-import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 import { EventItemActions } from '../RundownEntry';
-import { useEventSelection } from '../useEventSelection';

 import BlockActionMenu from './composite/BlockActionMenu';
 import EventBlockPlayback from './composite/EventBlockPlayback';
@@ -25,10 +22,6 @@ import EventBlockTimers from './composite/EventBlockTimers';

 import style from './EventBlock.module.scss';

-const blockBtnStyle = {
-  size: 'sm',
-};
-
 const tooltipProps = {
  openDelay: tooltipDelayMid,
 };
@@ -51,7 +44,6 @@ interface EventBlockInnerProps {
  playback?: Playback;
  isRolling: boolean;
  actionHandler: (action: EventItemActions, payload?: any) => void;
-  disableEdit: boolean;
 }

 const EventBlockInner = (props: EventBlockInnerProps) => {
@@ -72,29 +64,14 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
    playback,
    isRolling,
    actionHandler,
-    disableEdit,
  } = props;

  const [renderInner, setRenderInner] = useState(false);
-  const { clearSelectedEvents, selectedEvents } = useEventSelection();
-
-  const isOpen = selectedEvents.size === 1 && selectedEvents.has(eventId);

  useEffect(() => {
    setRenderInner(true);
  }, []);

-  //TODO: fix this
-  const toggleOpenEvent = useCallback(
-    (_event: MouseEvent) => {
-      // if (isOpen) {
-      //   event.stopPropagation();
-      //   clearSelectedEvents();
-      // }
-    },
-    [clearSelectedEvents, isOpen],
-  );
-
  const eventIsPlaying = playback === Playback.Play;
  const eventIsPaused = playback === Playback.Pause;

@@ -149,19 +126,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
        </div>
      </div>
      <div className={style.eventActions}>
-        <TooltipActionBtn
-          {...blockBtnStyle}
-          variant='ontime-subtle-white'
-          size='sm'
-          icon={<IoOptions />}
-          clickHandler={toggleOpenEvent}
-          tooltip='Event options'
-          aria-label='Event options'
-          tabIndex={-1}
-          backgroundColor={isOpen ? '#2B5ABC' : undefined}
-          color={isOpen ? 'white' : '#f6f6f6'}
-          isDisabled={disableEdit}
-        />
        <BlockActionMenu showClone enableDelete={!selected} actionHandler={actionHandler} />
      </div>
    </>
@@ -1,20 +1,10 @@
-// TODO: unify with RundownWrapper.module.scss
-$editor-width: 25rem;
-
 .eventEditor {
-  min-width: $editor-width;
-  background-color: $gray-1350;
  max-height: 100%;
  overflow-y: auto;
  flex: 1;

  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.header {
-  padding: 1rem;
 }

 .content {
@@ -28,19 +18,23 @@ $editor-width: 25rem;
 }

 .footer {
-  padding: 1rem;
+  border-top: 1px solid $white-10;
+  padding-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }

 .timeSettings {
  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
 }

 .column {
  display: flex;
  flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
 }

 .inputLabel {
@@ -74,11 +68,5 @@ $editor-width: 25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
-  row-gap: 0.5rem;
-}
-
-.eventActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  row-gap: 1rem;
 }
@@ -50,6 +50,8 @@ export default function EventEditor() {

    if (event && isOntimeEvent(event)) {
      setEvent(event);
+    } else {
+      setEvent(null);
    }
  }, [data, selectedEvents]);

@@ -61,7 +63,11 @@ export default function EventEditor() {
  );

  if (!event) {
-    return <span data-testid='editor-container'>Loading...</span>;
+    return (
+      <div className={style.eventEditor} data-testid='editor-container'>
+        Select an event to edit
+      </div>
+    );
  }

  // Compositing user fields by hand
@@ -81,7 +87,6 @@ export default function EventEditor() {

  return (
    <div className={style.eventEditor} data-testid='editor-container'>
-      <div>HEADER ACTIONS?</div>
      <div className={style.content}>
        <EventEditorTimes
          key={`${event.id}-times`}
@@ -109,7 +114,7 @@ export default function EventEditor() {
        />
        <EventEditorUser key={`${event.id}-user`} userFields={userFields} handleSubmit={handleSubmit} />
      </div>
-      <div className={style.eventActions}>
+      <div className={style.footer}>
        <CopyTag label='OSC trigger by id'>{`/ontime/load/id "${event.id}"`}</CopyTag>
        <CopyTag label='OSC trigger by cue'>{`/ontime/load/cue "${event.cue}"`}</CopyTag>
      </div>