refactor: improve visibility of extract element

2026-08-08 08:53:51 +00:00 · 2024-10-26 13:36:10 +02:00
parent 37974df5c6
commit 83b9fde45e
11 changed files with 44 additions and 61 deletions
@@ -21,22 +21,6 @@
  position: relative;
 }

-.corner {
-  @include rotate-fourty-five;
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 .options {
  display: flex;
  flex-direction: column;
@@ -1,20 +1,21 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';

 import MessageControl from './MessageControl';

 import style from '../../editors/Editor.module.scss';

 const MessageControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/messagecontrol');
  const classes = cx([style.content, style.contentColumnLayout]);

  return (
    <div className={style.messages} data-testid='panel-messages-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'messagecontrol')} />}
      <div className={classes}>
        <ErrorBoundary>
          <MessageControl />
@@ -10,6 +10,7 @@ import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
+import { Corner } from '../../editors/editor-utils/EditorUtils';

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

@@ -48,7 +49,7 @@ export default function TimerPreview() {

  return (
    <div className={style.preview}>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timer')} />
+      <Corner onClick={(event) => handleLinks(event, 'timer')} />
      <div className={contentClasses}>
        <div
          className={style.mainContent}
@@ -1,17 +1,18 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';

 import PlaybackControl from './PlaybackControl';

 import style from '../../editors/Editor.module.scss';

 const TimerControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/timercontrol');
  return (
    <div className={style.playback} data-testid='panel-timer-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'timercontrol')} />}
      <div className={style.content}>
        <ErrorBoundary>
          <PlaybackControl />
@@ -4,10 +4,6 @@ $min-playback-width: 27rem;
 $max-playback-width: 30rem;
 $panel-gap: 0.5rem;

-.corner {
-  @include editor.corner;
-}
-
 .mainContainer {
  background-color: $ui-black;
  width: 100%;
@@ -31,11 +27,6 @@ $panel-gap: 0.5rem;
  gap: $panel-gap;
  overflow: hidden;

-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
-
  .rundown,
  .playback,
  .messages {
@@ -6,23 +6,6 @@
  --editor--panel__br: 8px;
 }

-@mixin corner() {
-  display: none;
-  transform: rotate(45deg);
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
@mixin panel() {
  display: flex;

@@ -31,9 +14,4 @@
  height: 100%;
  background-color: $bg-container-l2;
  padding: 1rem;
-
-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
 }
@@ -0,0 +1,22 @@
+.corner {
+  transform: rotate(45deg);
+
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+  border-radius: 99px;
+
+  // similar styles to ontime-button-subtle
+  background-color: $gray-1050;
+  outline: 2px solid $gray-1050;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1000;
+    outline: 2px solid $gray-1000;
+  }
+}
@@ -0,0 +1,10 @@
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { type IconBaseProps } from '@react-icons/all-files/lib';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './EditorUtils.module.scss';
+
+export function Corner({ className, ...elementProps }: IconBaseProps) {
+  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
+}
@@ -22,12 +22,6 @@
  height: 100%;
 }

-.corner {
-  @include editor.corner;
-  display: inline;
-  z-index: 2;
-}
-
 .list {
  @include editor.panel;
  height: inherit;
@@ -1,11 +1,11 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

 import { ContextMenu } from '../../common/components/context-menu/ContextMenu';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
+import { Corner } from '../editors/editor-utils/EditorUtils';

 import EventEditor from './event-editor/EventEditor';
 import RundownWrapper from './RundownWrapper';
@@ -24,7 +24,7 @@ const RundownExport = () => {
      <div className={style.rundown}>
        <div className={style.list}>
          <ErrorBoundary>
-            {!isExtracted && <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />}
+            {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'rundown')} />}
            <ContextMenu>
              <RundownWrapper />
            </ContextMenu>
@@ -158,7 +158,8 @@ function TimerIcon(props: { type: TimerType; className: string }) {
    return <IoTime className={className} />;
  }
  if (type === TimerType.TimeToEnd) {
-    return <IoFlag className={className} />;
+    const classes = cx([style.active, className]);
+    return <IoFlag className={classes} />;
  }
  return <IoArrowDown className={className} />;
 }