Commit c5f7aaf7 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Dashboard: transform existing ShowNext component show tabs instead (issue #83)

parent 2ca87c34
import React from "react";
import { Card, IconButton } from "@material-ui/core";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
import { Card } from "@material-ui/core";
import { useStyles } from "../../styles";
export const DashboardTile = (props) => {
......@@ -11,20 +9,11 @@ export const DashboardTile = (props) => {
const classes = useStyles();
return (
<>
<div className={classes.dashboardTile}>
{showNext}
<Card className={showNext ? classes.cardOfTileWithShowNext : classes.cardOfTileWithoutShowNext}>
<IconButton
onClick={() => dispatch({type: "UPDATE_INPUT", payload: {field: "bigTileArea", value: input.bigTileArea === area ? "" : area}})}
style={{backgroundColor: "rgba(171,134,97,0.18)"/*, position: "relative", left: "20px", top: "70px"*/}}
>
{input.bigTileArea === area
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{content}
</Card>
{showNext}
</>
</div>
);
}
\ No newline at end of file
import React from "react";
import { Button, Card, Grid } from "@material-ui/core";
import { IconButton, Tab, Tabs } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { ArrowLeft, ArrowRight } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import { useStyles } from "../../styles";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
// additional styling for this component only
const localStyles = makeStyles(theme => ({
showNextCard: {
backgroundColor: "rgba(171,134,97,0.18)",
//width: "100%",
width: "99.5%",
marginLeft: "0.25%",
borderBottomRightRadius: "30px",
borderBottomLeftRadius: "30px"
//backgroundColor: "rgba(171,134,97,0.18)",
width: "100%",
//width: "99.5%",
//marginLeft: "0.25%",
//borderBottomRightRadius: "30px",
//borderBottomLeftRadius: "30px"
},
showNextGrid: {
height: "35px",
justifyContent:"space-between",
alignItems:"center",
}
}));
export const ShowNext = (props) => {
const [input, dispatch] = props.reducer;
const { labels, area } = props;
const numberOfValues = labels.length;
//const numberOfValues = labels.length;
const { t, i18n } = useTranslation();
const localClasses = localStyles();
const classes = useStyles();
const handleChange = (event, newValue) => {
dispatch({type: "UPDATE_INPUT", payload: {field: area, value: newValue}})
};
return (
<Card className={localClasses.showNextCard} square>
<Grid className={localClasses.showNextGrid} item xs={12} container direction="row">
<Grid item>
<Button
onClick={() => {
dispatch({type: "UPDATE_INPUT", payload: {
field: area,
value: input[area]===0
? numberOfValues-1
: input[area]-1
}})
}}
>
<ArrowLeft/>
</Button>
</Grid>
<Grid item>
<span>{t(labels[input[area]])}</span>
</Grid>
<Grid item>
<Button
onClick={() => {
dispatch({type: "UPDATE_INPUT", payload: {
field: area,
value: input[area]===numberOfValues-1
? 0
: input[area]+1
}})
}}
>
<ArrowRight/>
</Button>
</Grid>
</Grid>
</Card>
<div style={{display: "flex", width: "100%", height: "35px", minHeight: "35px",}}>
<Tabs
value={input[area]}
onChange={handleChange}
textColor="primary"
//indicatorColor="primary"
TabIndicatorProps={{
style: {
display: "none"
}
}}
variant="scrollable"
scrollButtons="auto"
aria-label={`${area} selection tabs`}
className={classes.tabs}
>
{labels.map((label, idx) => <Tab
key={idx}
value={idx}
label={t(label)}
variant={"outlined"}
className={input[area]===idx ? classes.tabSelected : classes.tab}
/>
)}
</Tabs>
<IconButton
onClick={() => dispatch({type: "UPDATE_INPUT", payload: {field: "bigTileArea", value: input.bigTileArea === area ? "" : area}})}
style={{backgroundColor: "rgba(171,134,97,0.18)"/*, position: "relative", left: "20px", top: "70px"*/}}
>
{input.bigTileArea === area
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
</div>
)
};
......@@ -49,8 +49,14 @@ const useStyles = makeStyles(theme => ({
height: "calc(85% - 6vh - 6px)",
overflow: "scroll"
},
dashboardTile: {
padding: theme.spacing(1),
height: "100%",
width: "100%"
},
cardOfTileWithShowNext: {
padding: theme.spacing(2),
//height: "100%",
height: "calc(100% - 35px)", //35px is the height of the ShowNext bar
width: "100%"
},
......@@ -74,6 +80,39 @@ const useStyles = makeStyles(theme => ({
//justifyContent: "space-between",
//alignItems: "center"
},
tabs: {
height: "35px",
minHeight: "35px",
width: "100%",
//paddingTop: theme.spacing(0.5),
//marginRight: "-5%",
//justifyContent:"space-between",
//alignItems:"center",
},
tab: {
height: "35px",
minHeight: "35px",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
marginRight: "0.5%",
marginTop: theme.spacing(1),
backgroundColor: "rgba(171,134,97,0.08)",
//borderRight: "solid 1px grey",
//borderLeft: "solid 1px grey",
//borderTop: "solid 1px grey",
},
tabSelected: {
height: "35px",
minHeight: "35px",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
marginRight: "0.5%",
marginTop: theme.spacing(0),
backgroundColor: "rgba(171,134,97,0.18)",
//borderRight: "solid 1px grey",
//borderLeft: "solid 1px grey",
//borderTop: "solid 1px grey",
},
h1: {
fontSize: "1.25rem"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment