V2 monorepo (#285)

* refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-17 21:24:11 +00:00 · 2023-02-14 22:02:15 +01:00
parent 3918758d32
commit de9a7a87fd
439 changed files with 11381 additions and 14294 deletions
@@ -0,0 +1,214 @@
+@use '../../theme/ontimeColours' as *;
+@use '../../theme/v2Styles' as *;
+
+$menu-width: 48px;
+$rundown-width: 46em;
+$playback-width: 450px;
+
+@mixin absolute-top-right($distance) {
+  position: absolute;
+  top: $distance;
+  right: $distance;
+  cursor: pointer;
+  color: $ui-white;
+}
+
+.corner {
+  display: none;
+  @include absolute-top-right(8px);
+  transform: rotate(45deg);
+}
+
+.mainContainer {
+  background: $ui-black;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  color: $ui-white;
+  padding: 16px 8px;
+  font-family: $ontime-font-family;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: $menu-width $rundown-width $playback-width auto;
+  grid-template-areas:
+    'sett even play info'
+    'sett even mess info';
+  gap: 8px;
+
+  .editor,
+  .playback,
+  .messages,
+  .info,
+  .settings {
+    position: relative;
+
+    .corner {
+      display: inline;
+    }
+  }
+}
+
+/* 2/3 window, hide info */
+@media (max-width: 1450px) and (min-height: 700px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: $menu-width $rundown-width auto;
+
+    .info {
+      visibility: hidden;
+    }
+  }
+}
+
+/* 1/2 window, event list only */
+@media (max-width: 1100px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: 100%;
+    grid-template-columns: $menu-width $rundown-width;
+    grid-template-areas:
+      'sett even';
+
+    .info,
+    .messages,
+    .playback {
+      visibility: hidden;
+    }
+  }
+}
+
+/* 1/3 window, show control only */
+@media (max-width: 850px) and (min-height: 500px) {
+  .mainContainer {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      'play'
+      'mess';
+
+    .playback,
+    .messages {
+      visibility: visible;
+    }
+
+    .editor,
+    .info,
+    .settings {
+      visibility: hidden;
+    }
+  }
+}
+
+/* 1/3 corner window, playback only */
+@media (max-width: 850px) and (max-height: 500px) {
+  .mainContainer {
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+    grid-template-areas: 'play';
+
+    .playback {
+      visibility: visible;
+    }
+
+    .editor,
+    .messages,
+    .info,
+    .settings {
+      visibility: hidden;
+    }
+  }
+}
+
+.mainContainer {
+  .settings,
+  .editor,
+  .messages,
+  .playback,
+  .info {
+    border-radius: 8px;
+    height: 100%;
+    background-color: $bg-container-l2;
+    padding: 0.8em 1.5em;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.eventEditor {
+  border-radius: 8px 8px 0 0;
+  background-color: $bg-container-l2;
+  box-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
+  border-top: 1px solid $white-10;
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  left: 0;
+  z-index: 10;
+  color: white;
+  transition: bottom $transition-time-feedback;
+
+  &.noEvent {
+    bottom: -500px;
+    transition: bottom 0.7s;
+  }
+
+  .eventEditorLayout {
+    display: flex;
+  }
+
+  .header {
+    background-color: #202020;
+    padding: 8px;
+    border-left: 1px solid $white-10;
+  }
+}
+
+.editor {
+  grid-area: even;
+  height: calc(100% - 24px);
+
+  .content {
+    height: calc(100% - 24px);
+    overflow: hidden;
+  }
+}
+
+.info {
+  grid-area: info;
+  min-width: 17em;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 24px);
+    overflow: hidden;
+  }
+}
+
+.messages {
+  grid-area: mess;
+}
+
+.playback {
+  grid-area: play;
+  min-height: 250px;
+  max-height: 380px;
+  min-width: 450px;
+}
+
+.mainContainer > .settings {
+  grid-area: sett;
+  background-color: transparent;
+  margin: 0;
+  padding: 0 8px 0 0;
+  width: fit-content;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  padding-top: 24px;
+}