Feature: Inverted editor layout (#322)

ls1intum · Nov 27, 2023 · b524d20 · b524d20
1 parent 8eec92a
commit b524d20
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/public/index.html.ejs b/public/index.html.ejs
@@ -19,7 +19,6 @@
     </a>
   </header>
   <div class="container">
-    <main id="apollon"></main>
     <aside class="sidebar">
       <section>
         <h3 class="header">Diagram Type</h3>
@@ -86,6 +85,9 @@
         </div>
       </section>
     </aside>
+    <div class="apollon-container">
+    <main id="apollon"></main>
+    </div>
   </div>
 </body>
 

diff --git a/public/styles.css b/public/styles.css
@@ -22,8 +22,14 @@ body {
 .container {
   background-color: var(--apollon-background);
   display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.apollon-container {
+  padding: 20px 20px 20px 0px;
+  display: flex;
   flex-grow: 2;
-  padding: 20px;
 }
 
 main {
@@ -33,7 +39,10 @@ main {
 
 aside.sidebar {
   flex: 0 0 10em;
-  margin-left: 1em;
+  padding: 14px;
+  border-right-color: var(--apollon-gray);
+  border-right-width: 1px;
+  border-right-style: solid;
 }
 
 aside.sidebar section {

diff --git a/src/main/components/canvas/zoom-pane.tsx b/src/main/components/canvas/zoom-pane.tsx
@@ -8,6 +8,7 @@ type Props = {
   step?: number;
   value: number;
   onChange: (value: number) => void;
+  style?: React.CSSProperties | undefined;
 };
 
 const ZoomButton = styled.button`
@@ -35,11 +36,20 @@ const ZoomButton = styled.button`
 `;
 
 export const ZoomPaneComponent: FunctionComponent<Props> = (props) => {
-  const { min = 0.5, max = 5, step = 0.5, value, onChange } = props;
+  const { min = 0.5, max = 5, step = 0.5, value, onChange, style } = props;
 
   return (
-    <div style={{ position: 'absolute', left: '0.75em', bottom: '0.75em', display: 'flex' }}>
-      <ZoomButton style={{ marginRight: '0.5em' }} onClick={() => onChange(clamp(value + step, min, max))}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+        right: '0.75em',
+        bottom: '0.75em',
+        ...style,
+      }}
+    >
+      <ZoomButton style={{ marginBottom: '0.5em' }} onClick={() => onChange(clamp(value + step, min, max))}>
         +
       </ZoomButton>
       <ZoomButton onClick={() => onChange(clamp(value - step, min, max))}>-</ZoomButton>

diff --git a/src/main/scenes/application.tsx b/src/main/scenes/application.tsx
@@ -75,16 +75,16 @@ export class Application extends React.Component<Props, State> {
                 <Layout className="apollon-editor" ref={this.setLayout}>
                   {rootContext && (
                     <DraggableLayer>
-                      <Editor>
-                        <Canvas ref={this.setCanvas} />
-                      </Editor>
                       {canvasContext && (
                         <>
-                          <Sidebar />
                           <UpdatePane />
+                          <Sidebar />
                           <KeyboardEventListener />
                         </>
                       )}
+                      <Editor>
+                        <Canvas ref={this.setCanvas} />
+                      </Editor>
                     </DraggableLayer>
                   )}
                 </Layout>

diff --git a/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap b/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap
@@ -466,11 +466,11 @@ exports[`test update pane render with element 1`] = `
           </svg>
         </div>
         <div
-          style="position: absolute; left: 0.75em; bottom: 0.75em; display: flex;"
+          style="display: flex; flex-direction: column; position: absolute; right: 0.75em; bottom: 0.75em;"
         >
           <button
             class="c3"
-            style="margin-right: 0.5em;"
+            style="margin-bottom: 0.5em;"
           >
             +
           </button>
@@ -1065,11 +1065,11 @@ exports[`test update pane render with relationship 1`] = `
           </svg>
         </div>
         <div
-          style="position: absolute; left: 0.75em; bottom: 0.75em; display: flex;"
+          style="display: flex; flex-direction: column; position: absolute; right: 0.75em; bottom: 0.75em;"
         >
           <button
             class="c3"
-            style="margin-right: 0.5em;"
+            style="margin-bottom: 0.5em;"
           >
             +
           </button>