Event editor continue (#722)

* refactor: remove info panel

* feat: editor panel

* wip: event info in drawer

* chore: update tests

* chore: add scss to processor

apps/client/src/features/editors/Editor.module.scss

@@ -1,28 +1,10 @@
-@use '../../theme/ontimeColours' as *;
-@use '../../theme/v2Styles' as *;
+@use './EditorMixin' as editor;
 
 $menu-width: 2.75rem;
-$rundown-width: 44.5rem;
 $playback-width: 26rem;
 
-@mixin absolute-top-right($distance) {
-  position: absolute;
-  top: $distance;
-  right: $distance;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 .corner {
-  display: none;
-  @include absolute-top-right(0.5rem);
-  transform: rotate(45deg);
+  @include editor.corner;
 }
 
 .mainContainer {
@@ -53,6 +35,12 @@ $playback-width: 26rem;
   gap: 0.5rem;
   overflow: hidden;
 
+
+  .corner {
+    /* we show this if the component hasnt been extracted */
+    display: inline;
+  }
+
   .rundown,
   .playback,
   .messages {
@@ -61,21 +49,6 @@ $playback-width: 26rem;
     height: 100%;
     background-color: $bg-container-l2;
     padding: 1rem;
-
-    .corner {
-      /* we show this if the component hasnt been extracted */
-      display: inline;
-    }
-  }
-}
-
-.rundown {
-  grid-area: rundown;
-  min-width: $rundown-width;
-
-  .content {
-    height: calc(100% - 1.5rem);
-    overflow: hidden;
   }
 }
 
@@ -93,9 +66,3 @@ $playback-width: 26rem;
 .content {
   padding-top: 1.5rem;
 }
-
-.rundown {
-  .content {
-    padding-top: 0.5rem;
-  }
-}

apps/client/src/features/editors/Editor.tsx

@@ -16,7 +16,6 @@ import styles from './Editor.module.scss';
 const Rundown = lazy(() => import('../rundown/RundownExport'));
 const TimerControl = lazy(() => import('../control/playback/TimerControlExport'));
 const MessageControl = lazy(() => import('../control/message/MessageControlExport'));
-const EventEditor = lazy(() => import('../event-editor/EventEditorExport'));
 
 const IntegrationModal = lazy(() => import('../modals/integration-modal/IntegrationModal'));
 const SettingsModal = lazy(() => import('../modals/settings-modal/SettingsModal'));
@@ -88,7 +87,6 @@ export default function Editor() {
         )}
         <Overview />
       </div>
-      <EventEditor />
     </>
   );
 }

apps/client/src/features/editors/EditorMixin.scss

@@ -0,0 +1,37 @@
+@use '../../theme/ontimeColours' as *;
+@use '../../theme/ontimeStyles' as *;
+
+@mixin absolute-top-right($distance) {
+  position: absolute;
+  top: $distance;
+  right: $distance;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
+
+@mixin corner() {
+  display: none;
+  @include absolute-top-right(0.5rem);
+  transform: rotate(45deg);
+}
+
+@mixin panel() {
+  display: flex;
+
+  position: relative;
+  border-radius: 8px;
+  height: 100%;
+  background-color: $bg-container-l2;
+  padding: 1rem;
+
+  .corner {
+    /* we show this if the component hasnt been extracted */
+    display: inline;
+  }
+}