Merge pull request #12639 from CesiumGS/sandcastle-react-structure

Solidify new Sandcastle React structure

Author: ggetz

packages/sandcastle/public/Sandcastle-client.js

@@ -1,6 +1,6 @@
 (function () {
   "use strict";
-  window.parent.postMessage("reload", "*");
+  window.parent.postMessage({ type: "reload" }, "*");
 
   function defined(value) {
     return value !== undefined;
@@ -20,6 +20,7 @@
     originalLog.apply(console, arguments);
     window.parent.postMessage(
       {
+        type: "consoleLog",
         log: print(d1),
       },
       "*",
@@ -31,6 +32,7 @@
     originalWarn.apply(console, arguments);
     window.parent.postMessage(
       {
+        type: "consoleWarn",
         warn: defined(d1) ? d1.toString() : "undefined",
       },
       "*",
@@ -49,6 +51,7 @@
     if (!defined(d1)) {
       window.parent.postMessage(
         {
+          type: "consoleError",
           error: "undefined",
         },
         "*",
@@ -93,6 +96,7 @@
     if (lineNumber >= 0) {
       window.parent.postMessage(
         {
+          type: "consoleError",
           error: errorMsg,
           lineNumber: lineNumber,
         },
@@ -101,6 +105,7 @@
     } else {
       window.parent.postMessage(
         {
+          type: "consoleError",
           error: errorMsg,
         },
         "*",
@@ -131,6 +136,7 @@
       }
       window.parent.postMessage(
         {
+          type: "consoleError",
           error: errorMsg,
           url: url,
           lineNumber: lineNumber,
@@ -140,6 +146,7 @@
     } else {
       window.parent.postMessage(
         {
+          type: "consoleError",
           error: errorMsg,
           url: url,
         },

packages/sandcastle/public/templates/bucket.css

@@ -15,6 +15,27 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
+
+  background-color: white;
+  background-image: var(--_rings), var(--_gradient);
+
+  /* TODO: these should pull from the stratakit directly somehow eventually */
+  --ids-color-border-neutral-muted: oklch(91.52% 0.005 258.33);
+  --ids-color-bg-page-base: oklch(99.06% 0.002 247.84);
+  --ids-color-bg-page-depth: oklch(94.86% 0.002 247.84);
+
+  --_rings: repeating-radial-gradient(
+    circle at center,
+    var(--ids-color-border-neutral-muted) 1px,
+    var(--ids-color-border-neutral-muted) 3px,
+    transparent 3px,
+    transparent 10px
+  );
+  --_gradient: linear-gradient(
+    180deg,
+    var(--ids-color-bg-page-base) 0%,
+    var(--ids-color-bg-page-depth) 100%
+  );
 }
 
 .fullSize {

packages/sandcastle/src/App.css

@@ -7,9 +7,11 @@
     "code viewer"
     "gallery gallery";
   grid-template-columns: 50% 50%;
-  grid-template-rows: max-content auto 150px;
-  /* TODO: this shouldn't be needed but it works for hacky code */
-  overflow: hidden;
+  /* 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 {
@@ -24,11 +26,21 @@
   }
 }
 
+.tabs {
+  background: var(--ids-color-bg-page-base);
+}
+
 .editor-container {
   grid-area: code;
+  display: flex;
+  flex-direction: column;
 
   section {
     border-top: 1px solid grey;
+    flex-shrink: 1;
+    /* Monaco needs a defined height for dynamic resizing to work */
+    --tabs-height: 1.5rem;
+    height: calc(100% - var(--tabs-height)) !important;
   }
 }