initilization layers now show up in swipeable drawer, the drawer is n…

…ow styled, opacity control works, layer switch now works
RENCI · Apr 18, 2023 · 9553a66 · 9553a66
1 parent 9273c64
commit 9553a66
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/lib/Views/UserInterface.jsx b/lib/Views/UserInterface.jsx
@@ -37,7 +37,11 @@ export default function UserInterface(props) {
           version={version}
           style={{ maxHeight: "400px !important" }}
         />
-        <SwipeableEdgeDrawer open={open} toggleDrawer={toggleDrawer} />
+        <SwipeableEdgeDrawer
+          data={props.viewState}
+          open={open}
+          toggleDrawer={toggleDrawer}
+        />
       </Context.Provider>
     </>
   );

diff --git a/lib/Views/selectedLayers/draggableCards.js b/lib/Views/selectedLayers/draggableCards.js
@@ -8,7 +8,12 @@ import Switch from "@mui/material/Switch";
 import NonLinearSlider from "./opacityScale";
 import { alpha, styled } from "@mui/material/styles";
 import CommonStrata from "terriajs/lib/Models/Definition/CommonStrata";
-
+import WorkbenchItemControls from "terriajs/lib/ReactViews/Workbench/Controls/WorkbenchItemControls";
+import { Box } from "terriajs-plugin-api";
+import Loader from "terriajs/lib/ReactViews/Loader";
+import ShortReport from "terriajs/lib/ReactViews/Workbench/Controls/ShortReport";
+import { ScaleWorkbenchInfo } from "terriajs/lib/ReactViews/Workbench/Controls/ScaleWorkbenchInfo";
+import ViewingControls from "terriajs/lib/ReactViews/Workbench/Controls/ViewingControls";
 const label = { inputProps: { "aria-label": "Size switch demo" } };
 
 const PinkSwitch = styled(Switch)(({ theme }) => ({
@@ -27,9 +32,9 @@ export default function DraggableCard(props) {
   const handleCheckboxChange = (event) => {
     props.data.setTrait(CommonStrata.user, "show", !props.data.show);
   };
-
+  console.log(props.viewState);
   return (
-    <Card sx={{ maxWidth: 345, backgroundColor: "#76a3de4a" }}>
+    <Card sx={{ width: 345, backgroundColor: "#76a3de26" }}>
       <CardContent>
         <div style={{ display: "inline-flex" }}>
           <PinkSwitch
@@ -44,17 +49,30 @@ export default function DraggableCard(props) {
         </div>
       </CardContent>
       <hr></hr>
-      <CardActions>
+      {/* <CardActions>
         <Button size="small" variant="contained">
           Ideal Zoom
         </Button>
         <Button size="small" variant="contained">
           About Data
         </Button>
         <Button size="small" variant="contained">
-          more
+          Remove
         </Button>
-      </CardActions>
+      </CardActions> */}
+      {/* <WorkbenchItemControls
+        item={props.data.item}
+        viewState={props.viewState}
+      /> */}
+
+      {/* <WorkbenchItemControls
+          item={props.data}
+          viewState={props.viewState}
+        /> */}
+      {/* <ViewingControls item={props.data} viewState={props.viewState} /> */}
+      {/* <ShortReport item={props.data} /> */}
+      {/* <ScaleWorkbenchInfo item={props.data} /> */}
+
       <CardActions>
         <NonLinearSlider data={props.data} />
       </CardActions>

diff --git a/lib/Views/selectedLayers/swipeableDrawer.js b/lib/Views/selectedLayers/swipeableDrawer.js
@@ -51,7 +51,7 @@ function SwipeableEdgeDrawer(props) {
       <Global
         styles={{
           ".MuiDrawer-root > .MuiPaper-root": {
-            height: `calc(50% - ${drawerBleeding}px)`,
+            height: `calc(60% - ${drawerBleeding}px)`,
             overflow: "visible",
             background: "#414141"
           }
@@ -86,39 +86,45 @@ function SwipeableEdgeDrawer(props) {
             onClick={props.toggleDrawer(!props.open)}
           />
           <Typography sx={{ p: 1, pl: 2, color: "#e0e0e0" }}>
-            {"Selected layers " + selectedLayers.length}
+            {"Selected layers " + props.data.terria.workbench.items.length}
           </Typography>
         </StyledBox>
         <br></br>
-        <div style={{ display: "inline-flex" }}>
+        <div>
           <div
             style={{
-              overflow: "auto",
-              width: "526px",
-              paddingLeft: "17px",
-              height: "292px"
+              width: "100%",
+              margin: "0px 0 0 17px",
+              height: "367px",
+              display: "inline-flex",
+              paddingRight: "33px"
             }}
           >
-            {selectedLayers.map((layer) => {
-              return (
-                <>
-                  <DraggableCard data={layer} />
-                  <br></br>
-                </>
-              );
-            })}
+            <div
+              style={{
+                overflow: "auto",
+                minWidth: "363px"
+              }}
+            >
+              {props.data.terria.workbench.items.map((layer) => {
+                return (
+                  <>
+                    <DraggableCard data={layer} viewState={props.data} />
+                    <br></br>
+                  </>
+                );
+              })}
+            </div>
+            <div
+              style={{
+                width: "-webkit-fill-available",
+                height: "295px"
+                // background: "#76a3de4a"
+              }}
+            >
+              about data goes here
+            </div>
           </div>
-          {/* <div
-            style={{
-              width: "-webkit-fill-available",
-              marginLeft: "12px",
-              marginRight: "12px",
-              height: "100px",
-              background: "#76a3de4a"
-            }}
-          >
-            test
-          </div> */}
         </div>
       </SwipeableDrawer>
     </Root>