Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
abfdb8b5
Verified
Commit
abfdb8b5
authored
Apr 25, 2020
by
Estelle Veisemburger
Committed by
Florent Chehab
Apr 25, 2020
Browse files
refacto(Legend): optimize style
parent
cd89a8cc
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/map/BaseMap.jsx
View file @
abfdb8b5
...
...
@@ -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
}
}
>
...
...
frontend/src/components/map/Legend.jsx
View file @
abfdb8b5
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
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment