Migrating project editor to resizable panels

dsi-icl · Jan 2, 2024 · 17e5b65 · 17e5b65
1 parent bb3b37d
commit 17e5b65
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 82 deletions.
diff --git a/apps/ove-core-ui/src/pages/project-editor/actions/actions.module.scss b/apps/ove-core-ui/src/pages/project-editor/actions/actions.module.scss
@@ -1,7 +1,7 @@
 #actions {
-  width: 5vw;
-  border-left: 1px solid black;
+  width: 100%;
   padding: 1rem;
+  height: 100%;
 
   .actions {
     display: grid;

diff --git a/apps/ove-core-ui/src/pages/project-editor/page.module.scss b/apps/ove-core-ui/src/pages/project-editor/page.module.scss
@@ -1,26 +1,13 @@
 .main {
+  width: 100%;
+  height: 90vh;
+
   & h2 {
     text-align: center;
     font-weight: 700;
   }
 }
 
-#top {
-  height: calc(90vh * 0.6);
-  display: flex;
-}
-
-#preview {
-  height: 100%;
-  width: 75vw;
-}
-
-#configuration {
-  border-top: 1px solid black;
-  height: calc(90vh * 0.4);
-  display: flex;
-}
-
 #mask {
   background: rgba(0, 0, 0, 0.75);
   position: fixed;

diff --git a/apps/ove-core-ui/src/pages/project-editor/page.tsx b/apps/ove-core-ui/src/pages/project-editor/page.tsx
@@ -29,6 +29,11 @@ import ControllerEditor from "./controller-editor/controller-editor";
 import Metadata, { type ProjectMetadata } from "./metadata/metadata";
 
 import styles from "./page.module.scss";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from "@ove/ui-base-components";
 
 const getDialogStyling = (action: ActionsT | null): CSSProperties | undefined => {
   if (action === "launch") return {
@@ -158,56 +163,79 @@ const ProjectEditor = ({
   };
 
   return <main className={styles.main}>
-    <div style={{ display: "flex" }}>
-      <div>
-        <div id={styles["top"]}>
-          <section id={styles["preview"]}>
-            <StateTabs selected={states.selected}
-                       removeState={states.removeState}
-                       states={states.states} formatState={states.format}
-                       addState={states.addState}
-                       updateState={states.updateState}
-                       setState={states.select}
-                       currentState={states.selected} />
-            <ResizeContainer container={container}>
-              <Canvas sections={sections.getSections(states.selected)}
-                      space={space}
-                      container={container}
-                      dragSection={sections.dragSection}
-                      select={sections.select}
-                      selected={sections.selected} />
-            </ResizeContainer>
-          </section>
-          <Sections sections={sections.getSections(states.selected)}
-                    generateSection={sections.generateSection}
-                    select={sections.select} state={states.selected}
-                    removeFromState={sections.removeFromState}
-                    selected={sections.selected}
-                    setSections={sections.setSections}
-                    setAction={setAction} numStates={states.states.length} />
-        </div>
-        <section id={styles["configuration"]}>
-          <SpaceConfig space={space} presets={observatories} />
-          <SectionConfig sections={sections.getSections(states.selected)}
-                         setAction={setAction} files={assets} fromURL={fromURL}
-                         selected={sections.selected} space={space}
-                         toURL={toURL}
-                         state={states.selected} projectId={project.id}
-                         getLatest={getLatest}
-                         updateSection={sections.updateSection} />
-        </section>
-      </div>
-      <Actions setAction={setAction}
-               save={() => toProject(project, sections.all)} />
-    </div>
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={95}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={60}>
+            <ResizablePanelGroup direction="horizontal">
+              <ResizablePanel defaultSize={75}>
+                <StateTabs selected={states.selected}
+                           removeState={states.removeState}
+                           states={states.states} formatState={states.format}
+                           addState={states.addState}
+                           updateState={states.updateState}
+                           setState={states.select}
+                           currentState={states.selected} />
+                <ResizeContainer container={container}>
+                  <Canvas sections={sections.getSections(states.selected)}
+                          space={space}
+                          container={container}
+                          dragSection={sections.dragSection}
+                          select={sections.select}
+                          selected={sections.selected} />
+                </ResizeContainer>
+              </ResizablePanel>
+              <ResizableHandle withHandle={true} />
+              <ResizablePanel defaultSize={25}>
+                <Sections sections={sections.getSections(states.selected)}
+                          generateSection={sections.generateSection}
+                          select={sections.select} state={states.selected}
+                          removeFromState={sections.removeFromState}
+                          selected={sections.selected}
+                          setSections={sections.setSections}
+                          setAction={setAction}
+                          numStates={states.states.length} />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+          <ResizableHandle withHandle={true} />
+          <ResizablePanel defaultSize={40}>
+            <ResizablePanelGroup direction="horizontal">
+              <ResizablePanel defaultSize={40}>
+                <SpaceConfig space={space} presets={observatories} />
+              </ResizablePanel>
+              <ResizableHandle withHandle={true} />
+              <ResizablePanel defaultSize={60}>
+                <SectionConfig sections={sections.getSections(states.selected)}
+                               setAction={setAction} files={assets}
+                               fromURL={fromURL}
+                               selected={sections.selected} space={space}
+                               toURL={toURL}
+                               state={states.selected} projectId={project.id}
+                               getLatest={getLatest}
+                               updateSection={sections.updateSection} />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+      <ResizableHandle withHandle={true} />
+      <ResizablePanel defaultSize={5}>
+        <Actions setAction={setAction}
+                 save={() => toProject(project, sections.all)} />
+      </ResizablePanel>
+    </ResizablePanelGroup>
     <Dialog ref={dialog} closeDialog={() => setAction(null)}
             title={getDialogTitle(action, project.title)}
             style={getDialogStyling(action)}
             hiddenStyle={innerDialogStyle ?? getInnerDialogStyling(action)}>
       {getDialogContent()}
     </Dialog>
-    {isOpen ? <div id={styles["mask"]}></div> : <></>}
-  </main>;
+    {
+      isOpen ? <div id={styles["mask"]}></div> : <></>
+    }
+  </main>
+    ;
 };
 
 export default ProjectEditor;
diff --git a/apps/ove-core-ui/src/pages/project-editor/section-config/section-config.module.scss b/apps/ove-core-ui/src/pages/project-editor/section-config/section-config.module.scss
@@ -1,14 +1,13 @@
 #section-config {
-  width: 57vw;
+  height: 100%;
   padding: 0 1rem;
-  border-left: 1px solid black;
 
   & form {
     display: flex;
-    width: calc(57vw - 2rem);
+    width: calc(100% - 2rem);
 
     #geometry {
-      width: calc((57vw - 2rem) * 0.66 - 0.5rem);
+      width: calc((100% - 2rem) - 0.5rem);
 
       & fieldset {
         display: grid;
@@ -68,7 +67,6 @@
     }
 
     & label {
-      width: 10vw;
       font-weight: 700;
     }
 
@@ -124,27 +122,26 @@
       border: 1px solid black;
       border-radius: 0.25rem;
       height: 2rem;
-      width: calc((57vw - 2rem) * 0.34 - 0.5rem);
+      width: 100%;
       background-color: #002147;
       color: white;
     }
 
     #left-container {
       display: flex;
       flex-direction: column;
-      width: calc((57vw - 2rem) * 0.66 - 0.5rem);
+      width: 100%;
     }
 
     #config-container {
       display: flex;
       flex-direction: column;
-      width: calc((57vw - 2rem) * 0.66 - 0.5rem);
+      width: calc(100% - 2.5rem);
     }
 
     #assets {
-      margin-left: 1rem;
-      margin-top: 1.25rem;
-      width: calc((57vw - 2rem) * 0.34 - 0.5rem);
+      padding-top: 1.25rem;
+      width: 33%;
     }
   }
 }
diff --git a/apps/ove-core-ui/src/pages/project-editor/sections/sections.module.scss b/apps/ove-core-ui/src/pages/project-editor/sections/sections.module.scss
@@ -1,15 +1,13 @@
 #sections {
-  width: 20vw;
   height: 100%;
-  border-left: 1px solid black;
   position: relative;
 
   & h2 {
     height: 2rem;
     line-height: 2rem;
     text-align: center;
     vertical-align: middle;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid #dadedf;
   }
 
   & ul {

diff --git a/apps/ove-core-ui/src/pages/project-editor/space-config/space-config.module.scss b/apps/ove-core-ui/src/pages/project-editor/space-config/space-config.module.scss
@@ -1,5 +1,4 @@
 #space {
-  width: 38vw;
   height: 100%;
   padding: 0 1rem;
 
@@ -20,20 +19,18 @@
     height: calc(100% - 2rem);
 
     & label {
-      width: 10vw;
       font-weight: 700;
       font-size: 1rem;
     }
 
     .col {
       display: flex;
       flex-direction: column;
-      width: calc(19vw - 1.5rem);
+      width: calc(50% - 1.5rem);
     }
 
     .ratio {
       width: 100%;
-      max-width: 10vw;
       display: flex;
       justify-content: space-between;
 
@@ -43,7 +40,7 @@
       }
 
       & input {
-        width: calc(9.5vw - 1rem);
+        width: calc(100% - 1rem);
       }
 
       .left {

diff --git a/apps/ove-core-ui/src/pages/project-editor/state-tabs/state-tabs.module.scss b/apps/ove-core-ui/src/pages/project-editor/state-tabs/state-tabs.module.scss
@@ -1,6 +1,6 @@
 .container {
   overflow-x: scroll;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid #dadedf;
   height: 2rem;
 }