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
Julien Jerphanion
Rex Dri
Commits
05513735
Commit
05513735
authored
Sep 05, 2018
by
Florent Chehab
Browse files
Merge branch 'frontend_color' into 'master'
Frontend color See merge request chehabfl/outgoing_rex!31
parents
b822f1d8
8414b9b2
Changes
20
Hide whitespace changes
Inline
Side-by-side
frontend/src/actions/action-types.js
View file @
05513735
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
'
;
export
const
SAVE_APP_COLOR_PICKER
=
'
SAVE_APP_COLOR_PICKER
'
;
frontend/src/actions/theme.js
0 → 100644
View file @
05513735
import
{
SAVE_APP_THEME
,
SAVE_APP_COLOR_PICKER
}
from
"
./action-types
"
;
export
function
saveAppTheme
(
theme
)
{
return
{
type
:
SAVE_APP_THEME
,
theme
};
}
export
function
saveAppColorPicker
(
s
)
{
return
{
type
:
SAVE_APP_COLOR_PICKER
,
state
:
s
};
}
frontend/src/components/App.js
View file @
05513735
...
...
@@ -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 @
05513735
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 @
05513735
...
...
@@ -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 @
05513735
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/search/Search.js
View file @
05513735
...
...
@@ -31,7 +31,6 @@ class Search extends MyComponent {
}
getSuggestions
(
value
)
{
console
.
log
(
value
)
const
{
universities
}
=
this
.
getAllFetchedData
();
const
filter
=
fuzzysort
.
go
(
value
,
_
.
map
(
universities
,
(
univ
)
=>
univ
),
{
keys
:
[
'
name
'
,
'
acronym
'
]
});
let
out
;
...
...
frontend/src/components/search/UnivList.js
View file @
05513735
...
...
@@ -46,21 +46,18 @@ class UnivList extends React.Component {
handleNext
=
()
=>
{
console
.
log
(
"
next
"
)
this
.
setState
(
prevState
=>
({
activeStep
:
prevState
.
activeStep
+
1
,
}));
};
handleBack
=
()
=>
{
console
.
log
(
"
back
"
)
this
.
setState
(
prevState
=>
({
activeStep
:
prevState
.
activeStep
-
1
,
}));
};
handleStepChange
=
activeStep
=>
{
console
.
log
(
"
step change
"
)
this
.
setState
({
activeStep
});
};
...
...
@@ -75,7 +72,6 @@ class UnivList extends React.Component {
}
const
maxSteps
=
Math
.
ceil
(
numberOfItems
/
itemsPerPage
);
console
.
log
(
"
maxSteps
"
,
maxSteps
,
"
numberOfItems
"
,
numberOfItems
,
"
itemsPerPage
"
);
return
(
<
div
className
=
{
classes
.
root
}
>
<
SwipeableViews
...
...
frontend/src/components/settings/ColorDemo.js
0 → 100644
View file @
05513735
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
:
200
,
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
}
=
props
;
return
(
<
div
className
=
{
classes
.
root
}
>
<
div
className
=
{
classes
.
appFrame
}
>
<
div
className
=
{
classes
.
statusBar
}
/
>
<
AppBar
position
=
"
static
"
>
<
Toolbar
>
<
IconButton
className
=
{
classes
.
menuButton
}
color
=
"
inherit
"
aria
-
label
=
"
Menu
"
>
<
MenuIcon
/>
<
/IconButton
>
<
Typography
variant
=
"
title
"
color
=
"
inherit
"
>
Color
sample
<
/Typography
>
<
/Toolbar
>
<
/AppBar
>
<
Button
variant
=
"
fab
"
className
=
{
classes
.
fab
}
color
=
"
secondary
"
>
<
AddIcon
/>
<
/Button
>
<
/div
>
<
/div
>
);
}
ColorDemo
.
propTypes
=
{
classes
:
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 @
05513735
// Inspired by 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
,
saveAppColorPicker
}
from
'
../../actions/theme
'
;
import
FormGroup
from
'
@material-ui/core/FormGroup
'
;
import
FormControlLabel
from
'
@material-ui/core/FormControlLabel
'
;
import
Switch
from
'
@material-ui/core/Switch
'
;
import
createMuiTheme
from
'
@material-ui/core/styles/createMuiTheme
'
;
import
MuiThemeProvider
from
'
@material-ui/core/styles/MuiThemeProvider
'
;
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
,