Skip to content

Commit

Permalink
draggable cards now work
Browse files Browse the repository at this point in the history
  • Loading branch information
@scrummish
scrummish committed Apr 21, 2023
1 parent 9553a66 commit cd14846
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 75 deletions.
23 changes: 16 additions & 7 deletions lib/Views/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ body {
flex-direction: column;
}

// .ExperimentalFeatures__ControlsWrapper {
// display: none !important;
// }
.ExperimentalFeatures__ControlsWrapper {
display: none !important;
}

.tjs-experimental-features__control {
margin: 5px 0;
Expand All @@ -52,13 +52,22 @@ body {
fill: white !important;
}

// .SidePanelContainer-sc-133gx1j-0 {
// display: none !important;
// }
.SidePanelContainer-sc-133gx1j-0 {
display: none !important;
}

// Disables the terria logo and leaflet navigation menu above the expanded chart
.bVQaev {
display: none !important;
}

.hucuvM {
background-color: $color-custom !important;
}
// This disables the amount of selected layers on map notice
.dqbhbK {
display: none !important;
}

//.tjs-standard-user-interface__sidePanel {
// background: white;
Expand All @@ -84,7 +93,7 @@ body {
color: black !important;
}
.tjs-feature-info-panel__header {
background: $color-primary !important;
background: #56a0d3 !important;
}
.ceRfzL {
color: black !important;
Expand Down
118 changes: 80 additions & 38 deletions lib/Views/selectedLayers/draggableCards.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import * as React from "react";
import { sortable } from "react-anything-sortable";
import Box, { BoxSpan } from "terriajs/lib/Styled/Box";
import getPath from "terriajs/lib/Core/getPath";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
Expand All @@ -9,11 +12,16 @@ 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 Legend from "terriajs/lib/ReactViews/Workbench/Controls/Legend";
import FilterSection from "terriajs/lib/ReactViews/Workbench/Controls/FilterSection";
import ChartItemSelector from "terriajs/lib/ReactViews/Workbench/Controls/ChartItemSelector";
// 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";
import { Li } from "terriajs/lib/Styled/List";
import { number } from "yargs";
const label = { inputProps: { "aria-label": "Size switch demo" } };

const PinkSwitch = styled(Switch)(({ theme }) => ({
Expand All @@ -28,54 +36,88 @@ const PinkSwitch = styled(Switch)(({ theme }) => ({
}
}));

export default function DraggableCard(props) {
const DraggableBox = styled(Box)`
cursor: move;
`;

const StyledLi = styled(Li)`
border-radius: 4px;
margin-bottom: 5px;
width: 100%;
`;

function DraggableCard(props) {
const handleCheckboxChange = (event) => {
props.data.setTrait(CommonStrata.user, "show", !props.data.show);
};
console.log(props.viewState);
return (
<Card sx={{ width: 345, backgroundColor: "#76a3de26" }}>
<CardContent>
<div style={{ display: "inline-flex" }}>
<PinkSwitch
{...label}
size="small"
defaultChecked
onChange={(e) => handleCheckboxChange(e)}
/>
<Typography variant="body2" color="#fff" sx={{ fontWeight: "bold" }}>
{props.data.name}
</Typography>
</div>
</CardContent>
<hr></hr>
{/* <CardActions>
<Button size="small" variant="contained">
Ideal Zoom
</Button>
<Button size="small" variant="contained">
About Data
</Button>
<Button size="small" variant="contained">
Remove
</Button>
</CardActions> */}
{/* <WorkbenchItemControls
<StyledLi
style={props.style}
className={props.className}
key={props.data.name}
>
<DraggableBox
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}
title={getPath(props.data, " → ")}
fullWidth
>
<Card sx={{ minWidth: 345, width: 345, backgroundColor: "#76a3de26" }}>
<CardContent>
<div style={{ display: "inline-flex" }}>
<PinkSwitch
{...label}
size="small"
defaultChecked
onChange={(e) => handleCheckboxChange(e)}
/>
<Typography
variant="body2"
color="#fff"
sx={{ fontWeight: "bold" }}
>
{props.data.name}
</Typography>
</div>
</CardContent>
<hr></hr>
<CardActions>
{/* <Button size="small" variant="contained">
Ideal Zoom
</Button> */}
{/* <Button size="small" variant="contained">
About Data
</Button> */}
{/* <Button size="small" variant="contained">
Compare
</Button> */}
<Button size="small" variant="contained">
Remove
</Button>
</CardActions>
{/* <WorkbenchItemControls
item={props.data.item}
viewState={props.viewState}
/> */}

{/* <WorkbenchItemControls
{/* <WorkbenchItemControls
item={props.data}
viewState={props.viewState}
/> */}
{/* <ViewingControls item={props.data} viewState={props.viewState} /> */}
{/* <ShortReport item={props.data} /> */}
{/* <ScaleWorkbenchInfo item={props.data} /> */}
{/* <FilterSection item={props.data} />
<Legend item={props.data} />
<ChartItemSelector item={props.data} /> */}
{/* <ViewingControls item={props.data} viewState={props.viewState} /> */}
{/* <ShortReport item={props.data} /> */}
{/* <ScaleWorkbenchInfo item={props.data} /> */}

<CardActions>
<NonLinearSlider data={props.data} />
</CardActions>
</Card>
<CardActions>
<NonLinearSlider data={props.data} />
</CardActions>
</Card>
</DraggableBox>
</StyledLi>
);
}

export default sortable(DraggableCard);
77 changes: 56 additions & 21 deletions lib/Views/selectedLayers/swipeableDrawer.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react";
import { useState, useContext } from "react";
import Sortable from "react-anything-sortable";
import PropTypes from "prop-types";
import { Global } from "@emotion/react";
import { styled } from "@mui/material/styles";
Expand All @@ -13,8 +14,18 @@ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import { Context } from "../../context/context";
import DraggableCard from "./draggableCards";
// import Paper from "@mui/material/Paper";
import WorkbenchSplitScreen from "terriajs/lib/ReactViews/Workbench/WorkbenchSplitScreen";
import Ul from "terriajs/lib/Styled/List";

const drawerBleeding = 30;
const StyledUl = styled(Ul)`
margin: 5px 0;
li {
&:first-child {
margin-top: 0;
}
}
`;

const Root = styled("div")(({ theme }) => ({
height: "100%",
Expand Down Expand Up @@ -45,6 +56,17 @@ function SwipeableEdgeDrawer(props) {
const container =
window !== undefined ? () => window().document.body : undefined;

const onSort = (
sortedArray,
currentDraggingSortData,
currentDraggingIndex
) => {
props.data.terria.workbench.moveItemToIndex(
currentDraggingSortData,
currentDraggingIndex
);
};

return (
<Root>
<CssBaseline />
Expand Down Expand Up @@ -86,44 +108,57 @@ function SwipeableEdgeDrawer(props) {
onClick={props.toggleDrawer(!props.open)}
/>
<Typography sx={{ p: 1, pl: 2, color: "#e0e0e0" }}>
{"Selected layers " + props.data.terria.workbench.items.length}
{props.data.terria.workbench.items.length +
" datasets selected on map"}
</Typography>
</StyledBox>
<br></br>
<div>
<div
style={{
width: "100%",
margin: "0px 0 0 17px",
margin: "0px 0 0 12px",
height: "367px",
display: "inline-flex",
paddingRight: "33px"
}}
>
<div
style={{
overflow: "auto",
minWidth: "363px"
}}
{/* <WorkbenchSplitScreen terria={props.data.terria} /> */}
<StyledUl
overflowY="auto"
overflowX="hidden"
scroll
paddedHorizontally
fullHeight
column
style={{ minWidth: 390, width: 390 }}
>
{props.data.terria.workbench.items.map((layer) => {
return (
<>
<DraggableCard data={layer} viewState={props.data} />
<br></br>
</>
);
})}
</div>
<Sortable
onSort={onSort}
direction="vertical"
dynamic={true}
// css={`
// width: 100%;
// `}
>
{props.data.terria.workbench.items.map((layer) => {
return (
<DraggableCard
sortData={layer}
data={layer}
viewState={props.data}
/>
);
})}
</Sortable>
</StyledUl>
<div
style={{
width: "-webkit-fill-available",
height: "295px"
width: "-webkit-fill-available"
// height: "295px",
// background: "#76a3de4a"
}}
>
about data goes here
</div>
></div>
</div>
</div>
</SwipeableDrawer>
Expand Down
18 changes: 9 additions & 9 deletions wwwroot/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
"storyEnabled": false,

"supportEmail": "[email protected]",
// "show-workbench": {
// "disabled": true
// },
// "map-navigation": {
// "disabled": true
// },
// "menu-bar": {
// "disabled": true
// },
"show-workbench": {
"disabled": true
},
"map-navigation": {
"disabled": true
},
"menu-bar": {
"disabled": true
},
"map-data-count": {
"disabled": true
},
Expand Down

0 comments on commit cd14846

Please sign in to comment.