Skip to content
GitLab
Menu
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
70d6f0b6
Commit
70d6f0b6
authored
Sep 05, 2018
by
Florent Chehab
Browse files
Settings added, color selection operationnal
parent
b822f1d8
Pipeline
#26940
passed with stages
in 2 minutes and 17 seconds
Changes
18
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/actions/action-types.js
View file @
70d6f0b6
export
const
SAVE_MAIN_MAP_POSITION
=
'
SAVE_MAIN_MAP_POSITION
'
;
export
const
SAVE_SELECTED_UNIVERSITIES
=
'
SAVE_SELECTED_UNIVERSITIES
'
;
export
const
SAVE_FILTER_CONFIG
=
'
SAVE_FILTER_CONFIG
'
;
export
const
SAVE_APP_THEME
=
'
SAVE_APP_THEME
'
;
frontend/src/actions/theme.js
0 → 100644
View file @
70d6f0b6
import
{
SAVE_APP_THEME
}
from
"
./action-types
"
;
export
function
saveAppTheme
(
theme
)
{
return
{
type
:
SAVE_APP_THEME
,
theme
};
}
frontend/src/components/App.js
View file @
70d6f0b6
...
...
@@ -22,12 +22,12 @@ import MyComponent from './MyComponent'
// import route Components here
import
{
Route
,
Route
,
}
from
'
react-router-dom
'
;
import
{
countriesFetchData
,
currenciesFetchData
,
countriesFetchData
,
currenciesFetchData
,
}
from
'
../generated/actions
'
;
...
...
@@ -35,160 +35,160 @@ import PageMap from './pages/PageMap';
import
PageHome
from
'
./pages/PageHome
'
;
import
PageFilter
from
'
./pages/PageFilter
'
;
import
PageSearch
from
'
./pages/PageSearch
'
;
import
PageSettings
from
'
./pages/PageSettings
'
;
const
drawerWidth
=
240
;
const
styles
=
theme
=>
({
root
:
{
display
:
'
flex
'
,
root
:
{
display
:
'
flex
'
,
},
toolbar
:
{
paddingRight
:
24
,
// keep right padding when drawer closed
},
toolbarIcon
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
flex-end
'
,
padding
:
'
0 8px
'
,
...
theme
.
mixins
.
toolbar
,
},
chip
:
{
margin
:
theme
.
spacing
.
unit
,
},
menuButton
:
{
marginRight
:
4
,
},
hideIt
:
{
display
:
'
none
'
,
},
title
:
{
flexGrow
:
1
,
},
drawerPaper
:
{
position
:
'
relative
'
,
whiteSpace
:
'
nowrap
'
,
width
:
drawerWidth
,
transition
:
theme
.
transitions
.
create
(
'
width
'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
enteringScreen
,
}),
},
drawerPaperClose
:
{
overflowX
:
'
hidden
'
,
transition
:
theme
.
transitions
.
create
(
'
width
'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
leavingScreen
,
}),
width
:
theme
.
spacing
.
unit
*
7
,
[
theme
.
breakpoints
.
up
(
'
sm
'
)]:
{
width
:
theme
.
spacing
.
unit
*
9
,
},
toolbar
:
{
paddingRight
:
24
,
// keep right padding when drawer closed
},
toolbarIcon
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
flex-end
'
,
padding
:
'
0 8px
'
,
...
theme
.
mixins
.
toolbar
,
},
chip
:
{
margin
:
theme
.
spacing
.
unit
,
},
menuButton
:
{
marginRight
:
4
,
},
hideIt
:
{
display
:
'
none
'
,
},
title
:
{
flexGrow
:
1
,
},
drawerPaper
:
{
position
:
'
relative
'
,
whiteSpace
:
'
nowrap
'
,
width
:
drawerWidth
,
transition
:
theme
.
transitions
.
create
(
'
width
'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
enteringScreen
,
}),
},
drawerPaperClose
:
{
overflowX
:
'
hidden
'
,
transition
:
theme
.
transitions
.
create
(
'
width
'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
leavingScreen
,
}),
width
:
theme
.
spacing
.
unit
*
7
,
[
theme
.
breakpoints
.
up
(
'
sm
'
)]:
{
width
:
theme
.
spacing
.
unit
*
9
,
},
},
content
:
{
flexGrow
:
1
,
padding
:
theme
.
spacing
.
unit
*
3
,
height
:
'
100vh
'
,
overflow
:
'
auto
'
,
},
chartContainer
:
{
marginLeft
:
-
22
,
},
tableContainer
:
{
height
:
320
,
},
myPaper
:
{
padding
:
16
},
null
:
{}
},
content
:
{
flexGrow
:
1
,
padding
:
theme
.
spacing
.
unit
*
3
,
height
:
'
100vh
'
,
overflow
:
'
auto
'
,
},
chartContainer
:
{
marginLeft
:
-
22
,
},
tableContainer
:
{
height
:
320
,
},
myPaper
:
{
padding
:
16
},
null
:
{}
});
class
App
extends
MyComponent
{
state
=
{
open
:
true
,
};
handleDrawerOpen
=
()
=>
{
this
.
setState
({
open
:
true
});
};
handleDrawerClose
=
()
=>
{
this
.
setState
({
open
:
false
});
};
myRender
()
{
const
{
classes
}
=
this
.
props
;
return
(
<
React
.
Fragment
>
<
CssBaseline
/>
<
div
className
=
{
classes
.
root
}
>
<
Drawer
variant
=
"
permanent
"
classes
=
{{
paper
:
classNames
(
classes
.
drawerPaper
,
!
this
.
state
.
open
&&
classes
.
drawerPaperClose
),
}}
open
=
{
this
.
state
.
open
}
>
<
div
className
=
{
classNames
(
classes
.
toolbarIcon
)}
>
<
div
className
=
{
classNames
((
!
this
.
state
.
open
)
&&
classes
.
hideIt
,
classes
.
null
)}
>
<
Chip
avatar
=
{
<
Avatar
>
<
SchoolIcon
/>
<
/Avatar>
}
label
=
"
Outgoing REX
"
className
=
{
classes
.
chip
}
color
=
"
primary
"
/>
<
/div
>
<
IconButton
onClick
=
{
this
.
handleDrawerOpen
}
className
=
{
classNames
(
classes
.
menuButton
,
this
.
state
.
open
&&
classes
.
hideIt
)}
>
<
MenuIcon
/>
<
/IconButton
>
<
IconButton
onClick
=
{
this
.
handleDrawerClose
}
className
=
{
classNames
(
classes
.
menuButton
,
(
!
this
.
state
.
open
)
&&
classes
.
hideIt
)}
>
<
ChevronLeftIcon
/>
<
/IconButton
>
<
/div
>
<
Divider
/>
<
List
>
{
mainListItems
}
<
/List
>
<
Divider
/>
<
List
>
{
secondaryListItems
}
<
/List
>
<
/Drawer
>
<
main
className
=
{
classes
.
content
}
>
<
Route
path
=
"
/app/
"
exact
=
{
true
}
component
=
{
PageHome
}
/
>
<
Route
path
=
"
/app/search
"
component
=
{
PageSearch
}
/
>
<
Route
path
=
"
/app/map
"
component
=
{
PageMap
}
/
>
<
Route
path
=
"
/app/filter
"
component
=
{
PageFilter
}
/
>
<
/main
>
<
/div
>
<
/React.Fragment
>
);
}
state
=
{
open
:
true
,
};
handleDrawerOpen
=
()
=>
{
this
.
setState
({
open
:
true
});
};
handleDrawerClose
=
()
=>
{
this
.
setState
({
open
:
false
});
};
myRender
()
{
const
{
classes
}
=
this
.
props
;
return
(
<
React
.
Fragment
>
<
CssBaseline
/>
<
div
className
=
{
classes
.
root
}
>
<
Drawer
variant
=
"
permanent
"
classes
=
{{
paper
:
classNames
(
classes
.
drawerPaper
,
!
this
.
state
.
open
&&
classes
.
drawerPaperClose
),
}}
open
=
{
this
.
state
.
open
}
>
<
div
className
=
{
classNames
(
classes
.
toolbarIcon
)}
>
<
div
className
=
{
classNames
((
!
this
.
state
.
open
)
&&
classes
.
hideIt
,
classes
.
null
)}
>
<
Chip
avatar
=
{
<
Avatar
>
<
SchoolIcon
/>
<
/Avatar>
}
label
=
"
Outgoing REX
"
className
=
{
classes
.
chip
}
color
=
"
primary
"
/>
<
/div
>
<
IconButton
onClick
=
{
this
.
handleDrawerOpen
}
className
=
{
classNames
(
classes
.
menuButton
,
this
.
state
.
open
&&
classes
.
hideIt
)}
>
<
MenuIcon
/>
<
/IconButton
>
<
IconButton
onClick
=
{
this
.
handleDrawerClose
}
className
=
{
classNames
(
classes
.
menuButton
,
(
!
this
.
state
.
open
)
&&
classes
.
hideIt
)}
>
<
ChevronLeftIcon
/>
<
/IconButton
>
<
/div
>
<
Divider
/>
<
List
>
{
mainListItems
}
<
/List
>
<
Divider
/>
<
List
>
{
secondaryListItems
}
<
/List
>
<
/Drawer
>
<
main
className
=
{
classes
.
content
}
>
<
Route
path
=
"
/app/
"
exact
=
{
true
}
component
=
{
PageHome
}
/
>
<
Route
path
=
"
/app/search
"
component
=
{
PageSearch
}
/
>
<
Route
path
=
"
/app/map
"
component
=
{
PageMap
}
/
>
<
Route
path
=
"
/app/filter
"
component
=
{
PageFilter
}
/
>
<
Route
path
=
"
/app/settings
"
component
=
{
PageSettings
}
/
>
<
/main
>
<
/div
>
<
/React.Fragment
>
);
}
}
App
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
classes
:
PropTypes
.
object
.
isRequired
,
};
const
mapStateToProps
=
(
state
)
=>
{
return
{
countries
:
state
.
countries
,
currencies
:
state
.
currencies
}
return
{
countries
:
state
.
countries
,
currencies
:
state
.
currencies
}
};
const
mapDispatchToProps
=
(
dispatch
)
=>
{
return
{
fetchData
:
{
countries
:
()
=>
dispatch
(
countriesFetchData
()),
currencies
:
()
=>
dispatch
(
currenciesFetchData
()),
}
};
return
{
fetchData
:
{
countries
:
()
=>
dispatch
(
countriesFetchData
()),
currencies
:
()
=>
dispatch
(
currenciesFetchData
()),
}
};
};
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withStyles
(
styles
)(
App
));
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withStyles
(
styles
,
{
withTheme
:
true
}
)(
App
));
frontend/src/components/ThemeProvider.js
0 → 100644
View file @
70d6f0b6
import
React
from
"
react
"
;
import
MuiThemeProvider
from
'
@material-ui/core/styles/MuiThemeProvider
'
;
import
createMuiTheme
from
'
@material-ui/core/styles/createMuiTheme
'
;
import
{
connect
}
from
"
react-redux
"
;
import
{
BrowserRouter
as
Router
,
Route
}
from
'
react-router-dom
'
;
class
ThemeProvider
extends
React
.
Component
{
render
()
{
console
.
log
(
"
ici
"
)
return
(
<
div
>
<
MuiThemeProvider
theme
=
{
createMuiTheme
(
this
.
props
.
theme
)}
>
<
Router
>
{
this
.
props
.
children
}
<
/Router
>
<
/MuiThemeProvider
>
<
/div
>
)
}
}
const
mapStateToProps
=
(
state
)
=>
{
return
{
theme
:
state
.
app
.
appTheme
};
};
export
default
connect
(
mapStateToProps
)(
ThemeProvider
);
frontend/src/components/map/UnivMap.js
View file @
70d6f0b6
...
...
@@ -36,13 +36,13 @@ class UnivMap extends MyComponent {
}
saveLeafletInstance
=
(
l
)
=>
{
this
.
setState
(
Object
.
assign
(
this
.
state
,
{
this
.
setState
(
Object
.
assign
(
{},
this
.
state
,
{
leaflet_instance
:
l
,
}))
}
saveSelectedLayer
=
(
e
)
=>
{
this
.
setState
(
Object
.
assign
(
this
.
state
,
{
this
.
setState
(
Object
.
assign
(
{},
this
.
state
,
{
selected_layer
:
e
.
name
,
}))
}
...
...
frontend/src/components/pages/PageSettings.js
0 → 100644
View file @
70d6f0b6
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Settings
from
'
../settings/Settings
'
;
import
Paper
from
'
@material-ui/core/Paper
'
;
const
styles
=
theme
=>
({
myPaper
:
{
padding
:
16
}
});
class
PageSettings
extends
React
.
Component
{
render
()
{
const
{
classes
}
=
this
.
props
;
return
(
<
Paper
className
=
{
classes
.
myPaper
}
>
<
Grid
container
spacing
=
{
24
}
>
<
Grid
item
xs
=
{
11
}
>
<
Typography
variant
=
"
display1
"
gutterBottom
>
Paramètres
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
Settings
/>
<
/Paper
>
);
}
}
PageSettings
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
};
export
default
withStyles
(
styles
)(
PageSettings
);
frontend/src/components/settings/ColorDemo.js
0 → 100644
View file @
70d6f0b6
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
AppBar
from
'
@material-ui/core/AppBar
'
;
import
Toolbar
from
'
@material-ui/core/Toolbar
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
import
MenuIcon
from
'
@material-ui/icons/Menu
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
AddIcon
from
'
@material-ui/icons/Add
'
;
// import MarkdownElement from '@material-ui/docs/MarkdownElement';
const
styles
=
theme
=>
({
root
:
{
position
:
'
relative
'
,
overflow
:
'
hidden
'
,
},
appFrame
:
{
position
:
'
relative
'
,
height
:
390
,
backgroundColor
:
theme
.
palette
.
background
.
paper
,
},
statusBar
:
{
width
:
'
100%
'
,
height
:
24
,
},
menuButton
:
{
marginLeft
:
-
12
,
marginRight
:
20
,
},
code
:
{
marginTop
:
theme
.
spacing
.
unit
,
'
& pre
'
:
{
margin
:
'
0px !important
'
,
},
},
fab
:
{
position
:
'
absolute
'
,
bottom
:
theme
.
spacing
.
unit
*
2
,
right
:
theme
.
spacing
.
unit
*
2
,
},
});
function
ColorDemo
(
props
)
{
const
{
classes
,
data
,
theme
}
=
props
;
const
primary
=
{
main
:
data
.
primary
,
output
:
data
.
primaryShade
===
4
?
`
${
data
.
primaryHue
}
`
:
`{
main: '
${
data
.
primary
}
',
}`
,
};
const
secondary
=
{
main
:
data
.
secondary
,
output
:
data
.
secondaryShade
===
11
?
`
${
data
.
secondaryHue
}
`
:
`{
main: '
${
data
.
secondary
}
',
}`
,
};
theme
.
palette
.
augmentColor
(
primary
);
theme
.
palette
.
augmentColor
(
secondary
);
return
(
<
div
className
=
{
classes
.
root
}
>
<
div
className
=
{
classes
.
appFrame
}
>
<
div
className
=
{
classes
.
statusBar
}
style
=
{{
backgroundColor
:
primary
.
dark
}}
/
>
<
AppBar
position
=
"
static
"
style
=
{{
backgroundColor
:
primary
.
main
}}
>
<
Toolbar
style
=
{{
color
:
primary
.
contrastText
}}
>
<
IconButton
className
=
{
classes
.
menuButton
}
color
=
"
inherit
"
aria
-
label
=
"
Menu
"
>
<
MenuIcon
/>
<
/IconButton
>
<
Typography
variant
=
"
title
"
color
=
"
inherit
"
>
Color
sample
<
/Typography
>
<
/Toolbar
>
<
/AppBar
>
{
/* <MarkdownElement
dir="ltr"
className={classes.code}
text={`\`\`\`jsx
{
palette: {
primary: ${primary.output},
secondary: ${secondary.output},
},
}
\`\`\``}
/> */
}
<
Button
variant
=
"
fab
"
className
=
{
classes
.
fab
}
style
=
{{
backgroundColor
:
secondary
.
main
}}
>
<
AddIcon
nativeColor
=
{
secondary
.
contrastText
}
/
>
<
/Button
>
<
/div
>
<
/div
>
);
}
ColorDemo
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
data
:
PropTypes
.
object
.
isRequired
,
theme
:
PropTypes
.
object
.
isRequired
,
};
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
ColorDemo
);
\ No newline at end of file
frontend/src/components/settings/ColorTools.js
0 → 100644
View file @
70d6f0b6
// Taken from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
// MIT Licence and modified
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
connect
}
from
'
react-redux
'
;
import
compose
from
'
recompose/compose
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
*
as
colors
from
'
@material-ui/core/colors
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Input
from
'
@material-ui/core/Input
'
;
import
Radio
from
'
@material-ui/core/Radio
'
;
import
Tooltip
from
'
@material-ui/core/Tooltip
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
CheckIcon
from
'
@material-ui/icons/Check
'
;
import
Slider
from
'
@material-ui/lab/Slider
'
;
import
{
rgbToHex
}
from
'
@material-ui/core/styles/colorManipulator
'
;
import
{
capitalize
}
from
'
@material-ui/core/utils/helpers
'
;
// import actionTypes from 'docs/src/modules/redux/actionTypes';
import
ColorDemo
from
'
./ColorDemo
'
;
import
{
saveAppTheme
}
from
'
../../actions/theme
'
;
const
hues
=
Object
.
keys
(
colors
).
slice
(
1
,
17
);
const
shades
=
[
900
,
800
,
700
,
600
,
500
,
400
,
300
,
200
,
100
,
50
,
'
A700
'
,
'
A400
'
,
'
A200
'
,
'
A100
'
];
const
styles
=
theme
=>
({
radio
:
{
width
:
48
,
height
:
48
,
},
radioSelected
:
{
width
:
48
,
height
:
48
,
border
:
'
1px solid white
'
,
color
:
theme
.
palette
.
common
.
white
,
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
},
swatch
:
{
width
:
192
,
},
sliderContainer
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
marginTop
:
theme
.
spacing
.
unit
*
2
,
marginBottom
:
theme
.
spacing
.
unit
,
},
slider
:
{
width
:
'
calc(100% - 80px)
'
,
},
colorBar
:
{
marginTop
:
theme
.
spacing
.
unit
*
2
,
},
colorSquare
:
{
width
:
64
,
height
:
64
,
display
:
'
flex
'
,
justifyContent