Merge pull request #12672 from CesiumGS/sandcastle-resize

Add resizing panels to Sandcastle

Author: ggetz

packages/sandcastle/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@itwin/itwinui-react": "^5.0.0-alpha.14",
     "@monaco-editor/react": "^4.7.0",
+    "allotment": "^1.20.4",
     "monaco-editor": "^0.52.2",
     "pako": "^2.1.0",
     "prettier": "^3.5.3",

packages/sandcastle/src/App.css

@@ -3,15 +3,16 @@
   height: 100vh;
   display: grid;
   grid-template:
-    "toolbar toolbar"
-    "code viewer"
-    "gallery gallery";
-  grid-template-columns: 50% 50%;
-  /* Monaco needs a defined height for dynamic resizing to work */
-  --toolbar-height: 2.5rem;
-  grid-template-rows:
-    var(--toolbar-height) calc(100% - var(--toolbar-height) - 150px)
-    150px;
+    "toolbar"
+    "center"
+    "gallery";
+  grid-template-rows: max-content auto 150px;
+}
+
+.split-view {
+  /* These control the styling of the Allotment dividers */
+  --focus-border: var(--ids-color-border-accent-base);
+  --separator-border: var(--ids-color-border-neutral-base);
 }
 
 .toolbar {
@@ -32,22 +33,18 @@
 }
 
 .editor-container {
-  grid-area: code;
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   section {
-    border-top: 1px solid grey;
+    border-top: 1px solid var(--ids-color-border-neutral-base);
     flex-shrink: 1;
-    /* Monaco needs a defined height for dynamic resizing to work */
-    --tabs-height: 1.5rem;
-    height: calc(100% - var(--tabs-height)) !important;
   }
 }
 
 .viewer-bucket {
-  grid-area: viewer;
-  width: 50vw;
+  height: 100%;
   background-color: white;
   background-image: var(--_rings), var(--_gradient);
   --_rings: repeating-radial-gradient(
@@ -71,6 +68,6 @@
 
 .gallery {
   grid-area: gallery;
-  border-top: 1px solid grey;
+  border-top: 1px solid var(--ids-color-border-neutral-base);
   background: var(--ids-color-bg-page-depth);
 }

packages/sandcastle/src/App.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
 import "./App.css";
 
 import { Button, Root } from "@itwin/itwinui-react/bricks";
@@ -319,27 +321,33 @@ Sandcastle.addToolbarMenu(${variableName});`,
         {versionString && <pre>Commit: {versionString.substring(0, 7)}</pre>}
         <Button onClick={() => setDarkTheme(!darkTheme)}>Swap Theme</Button>
       </div>
-      <SandcastleEditor
-        ref={editorRef}
-        darkTheme={darkTheme}
-        onJsChange={(value: string = "") =>
-          dispatch({ type: "setCode", code: value })
-        }
-        onHtmlChange={(value: string = "") =>
-          dispatch({ type: "setHtml", html: value })
-        }
-        onRun={() => dispatch({ type: "runSandcastle" })}
-        js={codeState.code}
-        html={codeState.html}
-      />
-      <div className="viewer-bucket">
-        <Bucket
-          code={codeState.committedCode}
-          html={codeState.committedHtml}
-          runNumber={codeState.runNumber}
-          highlightLine={(lineNumber) => highlightLine(lineNumber)}
-        />
-      </div>
+      <Allotment>
+        <Allotment.Pane minSize={400}>
+          <SandcastleEditor
+            ref={editorRef}
+            darkTheme={darkTheme}
+            onJsChange={(value: string = "") =>
+              dispatch({ type: "setCode", code: value })
+            }
+            onHtmlChange={(value: string = "") =>
+              dispatch({ type: "setHtml", html: value })
+            }
+            onRun={() => dispatch({ type: "runSandcastle" })}
+            js={codeState.code}
+            html={codeState.html}
+          />
+        </Allotment.Pane>
+        <Allotment.Pane minSize={400}>
+          <div className="viewer-bucket">
+            <Bucket
+              code={codeState.committedCode}
+              html={codeState.committedHtml}
+              runNumber={codeState.runNumber}
+              highlightLine={(lineNumber) => highlightLine(lineNumber)}
+            />
+          </div>
+        </Allotment.Pane>
+      </Allotment>
       <div className="gallery">
         <Gallery
           demos={galleryItems}