Verified Commit abfdb8b5 authored by Estelle Veisemburger's avatar Estelle Veisemburger Committed by Florent Chehab
Browse files

refacto(Legend): optimize style

parent cd89a8cc
......@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
import ReactMapboxGl, { Feature, Layer, Popup } from "react-mapbox-gl";
import { makeStyles, useTheme } from "@material-ui/styles";
import UnivMapPopup from "./UnivMapPopup";
import Legend from "./Legend";
import Legend, { getLegendColorOpacity } from "./Legend";
const Map = ReactMapboxGl({
dragRotate: false,
......@@ -83,10 +83,8 @@ function BaseMap({ id, campuses }) {
type="circle"
id={`campuses${selected ? "selected" : "notSelected"}`}
paint={{
"circle-color": selected
? theme.palette.primary.main
: theme.palette.action.disabled,
"circle-opacity": selected ? 0.8 : 0.5,
"circle-color": getLegendColorOpacity(theme, selected).color,
"circle-opacity": getLegendColorOpacity(theme, selected).opacity,
"circle-radius": 8
}}
>
......
import React from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconAdd from "@material-ui/icons/Add";
import IconClose from "@material-ui/icons/Close";
import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/styles";
import classNames from "../../utils/classNames";
import { makeStyles, useTheme } from "@material-ui/styles";
export function getLegendColorOpacity(theme, selected) {
const color = selected
? theme.palette.primary.main
: theme.palette.action.disabled;
const opacity = selected ? 0.8 : 0.5;
return { color, opacity };
}
const useStyles = makeStyles(theme => {
const {
color: colorSelected,
opacity: opacitySelected
} = getLegendColorOpacity(theme, true);
const {
color: colorNotSelected,
opacity: opacityNotSelected
} = getLegendColorOpacity(theme, false);
const circleSize = theme.typography.caption.fontSize;
import MyCardMedia from "./MyCardMedia";
import APP_ROUTES from "../../config/appRoutes";
return {
legendContainer: {
padding: theme.spacing(1),
backgroundColor: theme.palette.background.default,
borderRadius: theme.spacing(1)
},
legendItemContainer: {
display: "flex",
alignItems: "center",
padding: theme.spacing(0.5)
},
legendItemCircle: {
borderRadius: circleSize,
width: circleSize,
height: circleSize,
marginRight: theme.spacing(0.5)
},
selectedLegendItemCircle: {
backgroundColor: colorSelected,
opacity: opacitySelected
},
notSelectedLegendItemCircle: {
backgroundColor: colorNotSelected,
opacity: opacityNotSelected
}
};
});
function LegendItem({ color, opacity, label }) {
const theme = useTheme();
const size = theme.typography.caption.fontSize;
function LegendItem({ selected, label }) {
const classes = useStyles();
return (
<div
style={{
display: "flex",
alignItems: "center",
padding: theme.spacing(0.5)
}}
>
<div className={classes.legendItemContainer}>
<div
style={{
backgroundColor: color,
borderRadius: size,
width: size,
height: size,
marginRight: theme.spacing(0.5),
opacity: opacity
}}
className={classNames(
classes.legendItemCircle,
selected
? classes.selectedLegendItemCircle
: classes.notSelectedLegendItemCircle
)}
/>
<Typography variant="caption">{label}</Typography>
</div>
......@@ -45,34 +70,22 @@ function LegendItem({ color, opacity, label }) {
}
LegendItem.propTypes = {
color: PropTypes.string.isRequired,
opacity: PropTypes.number.isRequired,
label: PropTypes.string.isRequired
label: PropTypes.string.isRequired,
selected: PropTypes.bool.isRequired
};
LegendItem.defaultProps = {
opacity: 1,
label: "actif"
};
LegendItem.defaultProps = {};
/**
* Custom component to create the legend on the map
*/
function Legend({}) {
const theme = useTheme();
const color = theme.palette.primary.main;
const color2 = theme.palette.action.disabled;
function Legend() {
const classes = useStyles();
return (
<div
style={{
padding: theme.spacing(1),
backgroundColor: theme.palette.background.default,
borderRadius: theme.spacing(1)
}}
>
<LegendItem color={color} label="Actif" opacity="0.8" />
<LegendItem color={color2} label="Inactif" opacity="0.5" />
<div className={classes.legendContainer}>
<LegendItem label="L'univ. correspond aux filtres" selected />
<LegendItem label="Autres universités" selected={false} />
</div>
);
}
......@@ -81,6 +94,4 @@ Legend.propTypes = {};
Legend.defaultProps = {};
const styles = {};
export default Legend;
Supports Markdown
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