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
4fe1bdf2
Commit
4fe1bdf2
authored
Feb 24, 2019
by
Florent Chehab
Browse files
Cleaning
parent
0e42118e
Changes
106
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/settings/ColorDemo.js
View file @
4fe1bdf2
...
...
@@ -3,12 +3,49 @@ import PropTypes from "prop-types";
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
AppBar
from
"
@material-ui/core/AppBar
"
;
import
Toolbar
from
"
@material-ui/core/Toolbar
"
;
import
Button
from
"
@material-ui/core/
Button
"
;
import
Fab
from
"
@material-ui/core/
Fab
"
;
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
"
;
/**
* React component for demo purposes
*
* @param {object} props
* @returns
*/
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
=
"
h6
"
color
=
"
inherit
"
>
Color
sample
<
/Typography
>
<
/Toolbar
>
<
/AppBar
>
<
Fab
className
=
{
classes
.
fab
}
color
=
"
secondary
"
>
<
AddIcon
/>
<
/Fab
>
<
/div
>
<
/div
>
);
}
ColorDemo
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
theme
:
PropTypes
.
object
.
isRequired
,
};
const
styles
=
theme
=>
({
root
:
{
position
:
"
relative
"
,
...
...
@@ -40,34 +77,4 @@ const styles = theme => ({
},
});
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
=
"
h6
"
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
);
frontend/src/components/settings/ColorTools.js
View file @
4fe1bdf2
/**
*
* WARNING THIS FILE HAS NOT BEEN FULLY REVIEWED AS OF 22.02.2019
* THINGS MIGHT NOT BE SUPER CLEAR OR BROKEN
*
*
*
*
*
*
*
* TODO
*
*
*
*
*/
// 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
"
;
...
...
@@ -14,7 +32,6 @@ 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 actionTypes from 'docs/src/modules/redux/actionTypes';
import
ColorDemo
from
"
./ColorDemo
"
;
import
FormControlLabel
from
"
@material-ui/core/FormControlLabel
"
;
import
Switch
from
"
@material-ui/core/Switch
"
;
...
...
@@ -22,7 +39,6 @@ import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
import
MuiThemeProvider
from
"
@material-ui/core/styles/MuiThemeProvider
"
;
import
areSameThemes
from
"
../../utils/areSameThemes
"
;
import
areSameObjects
from
"
../../utils/areSameObjets
"
;
import
CustomComponentForAPI
from
"
../CustomComponentForAPI
"
;
...
...
@@ -31,106 +47,65 @@ import { saveAppTheme, saveAppColorPicker } from "../../actions/theme";
import
getActions
from
"
../../api/getActions
"
;
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
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
:
"
center
"
,
alignItems
:
"
center
"
,
},
});
// TODO switch to my component
/**
* Component to handle website color customization
*
* @class ColorTool
* @extends {CustomComponentForAPI}
*/
class
ColorTool
extends
CustomComponentForAPI
{
state
=
this
.
props
.
state
state
=
this
.
props
.
state
;
componentWillUnmount
()
{
this
.
props
.
saveColorPicker
(
this
.
state
);
}
customComponentDidMount
()
{
if
(
areSameObjects
(
this
.
props
.
state
,
this
.
state
))
{
this
.
setState
(
this
.
props
.
state
);
}
}
customComponentDidUpdate
()
{
if
(
!
this
.
allApiDataIsReady
())
{
return
;
}
const
configOnServer
=
this
.
props
.
userData
.
readSucceeded
.
d
ata
.
config
;
const
themeOnServer
=
configOnServer
.
theme
;
const
colorPickerConfigOnServer
=
configOnServer
.
colorPicker
;
const
serverDataRetrievedAt
=
this
.
props
.
userData
.
readSucceeded
.
readAt
;
const
configOnServer
=
this
.
getReadData
(
"
userD
ata
"
)
.
config
,
themeOnServer
=
configOnServer
.
theme
,
colorPickerConfigOnServer
=
configOnServer
.
colorPicker
,
serverDataRetrievedAt
=
this
.
getReadTime
(
"
userData
"
)
;
if
(
!
themeOnServer
)
{
// we need to initialize it
this
.
handleSendToServer
(
true
,
false
);
return
;
}
if
(
!
colorPickerConfigOnServer
)
{
this
.
handleSendToServer
(
false
,
true
);
if
((
!
themeOnServer
)
||
(
!
colorPickerConfigOnServer
))
{
// There is nothing to restore
return
;
}
if
(
serverDataRetrievedAt
>
this
.
state
.
updatedAt
)
{
// we need to set the color picker colors from server color
const
primary
=
themeOnServer
.
palette
.
primary
.
main
;
const
secondary
=
themeOnServer
.
palette
.
secondary
.
main
;
const
primary
=
themeOnServer
.
palette
.
primary
.
main
,
secondary
=
themeOnServer
.
palette
.
secondary
.
main
,
{
primaryHue
,
secondaryHue
,
primaryShade
,
secondaryShade
}
=
colorPickerConfigOnServer
;
this
.
setState
({
updatedAt
:
Date
.
now
(),
primary
,
secondary
,
primaryHue
:
colorPickerConfigOnServer
.
primaryHue
,
secondaryHue
:
colorPickerConfigOnServer
.
secondaryHue
,
primaryShade
:
colorPickerConfigOnServer
.
primaryShade
,
secondaryShade
:
colorPickerConfigOnServer
.
secondaryShade
,
primaryHue
,
secondaryHue
,
primaryShade
,
secondaryShade
,
darkModeActivated
:
themeOnServer
.
palette
.
type
==
"
light
"
?
false
:
true
});
}
}
handleChangeHue
=
name
=>
event
=>
{
const
{
target
:
{
value
:
hue
},
}
=
event
;
const
hue
=
event
.
target
.
value
;
this
.
setState
(
state
=>
{
const
color
=
colors
[
hue
][
shades
[
state
[
`
${
name
}
Shade`
]]];
const
color
=
colors
[
hue
][
SHADES
[
state
[
`
${
name
}
Shade`
]]];
return
{
[
`
${
name
}
Hue`
]:
hue
,
[
name
]:
color
,
...
...
@@ -141,7 +116,7 @@ class ColorTool extends CustomComponentForAPI {
handleChangeShade
=
name
=>
(
event
,
shade
)
=>
{
this
.
setState
(
state
=>
{
const
color
=
colors
[
state
[
`
${
name
}
Hue`
]][
shades
[
shade
]];
const
color
=
colors
[
state
[
`
${
name
}
Hue`
]][
SHADES
[
shade
]];
return
{
[
`
${
name
}
Shade`
]:
shade
,
[
name
]:
color
,
...
...
@@ -161,6 +136,12 @@ class ColorTool extends CustomComponentForAPI {
this
.
props
.
saveTheme
(
this
.
getThemeFromState
());
};
/**
* Function used to extract the theme configuration from the state
*
* @returns {object}
* @memberof ColorTool
*/
getThemeFromState
()
{
return
{
palette
:
{
...
...
@@ -171,6 +152,13 @@ class ColorTool extends CustomComponentForAPI {
};
}
/**
* Function used to extract the theme information from the current Ui Theme
* set through the props
*
* @returns
* @memberof ColorTool
*/
getThemeFromProps
()
{
const
{
currentUiTheme
}
=
this
.
props
;
const
currentTheme
=
{
...
...
@@ -183,20 +171,24 @@ class ColorTool extends CustomComponentForAPI {
return
currentTheme
;
}
handleSendToServer
=
(
saveTheme
=
true
,
saveColorPicker
=
true
)
=>
{
const
userData
=
this
.
props
.
userData
.
readSucceeded
.
d
ata
;
handleSendToServer
=
()
=>
{
const
userData
=
this
.
getReadData
(
"
userD
ata
"
)
;
let
newUserData
=
Object
.
assign
({},
userData
);
if
(
saveTheme
)
{
newUserData
.
config
.
theme
=
this
.
getThemeFromProps
();
}
if
(
saveColorPicker
)
{
newUserData
.
config
.
colorPicker
=
{
primaryHue
:
this
.
state
.
primaryHue
,
secondaryHue
:
this
.
state
.
secondaryHue
,
primaryShade
:
this
.
state
.
primaryShade
,
secondaryShade
:
this
.
state
.
secondaryShade
,
};
}
newUserData
.
config
.
theme
=
this
.
getThemeFromProps
();
const
{
primaryHue
,
secondaryHue
,
primaryShade
,
secondaryShade
,
}
=
this
.
state
;
newUserData
.
config
.
colorPicker
=
{
primaryHue
,
secondaryHue
,
primaryShade
,
secondaryShade
,
};
this
.
props
.
saveToServer
(
newUserData
);
}
...
...
@@ -248,11 +240,11 @@ class ColorTool extends CustomComponentForAPI {
onChange
=
{
this
.
handleChangeShade
(
intent
)}
aria
-
labelledby
=
{
`
${
intent
}
ShadeSliderLabel`
}
/
>
<
Typography
>
{
shades
[
intentShade
]}
<
/Typography
>
<
Typography
>
{
SHADES
[
intentShade
]}
<
/Typography
>
<
/div
>
<
div
className
=
{
classes
.
swatch
}
>
{
hues
.
map
(
hue
=>
{
const
shade
=
intent
===
"
primary
"
?
shades
[
primaryShade
]
:
shades
[
secondaryShade
];
{
HUES
.
map
(
hue
=>
{
const
shade
=
intent
===
"
primary
"
?
SHADES
[
primaryShade
]
:
SHADES
[
secondaryShade
];
const
backgroundColor
=
colors
[
hue
][
shade
];
return
(
...
...
@@ -358,4 +350,45 @@ const mapDispatchToProps = (dispatch) => {
},
};
};
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
:
"
center
"
,
alignItems
:
"
center
"
,
},
});
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withStyles
(
styles
,
{
withTheme
:
true
})(
ColorTool
));
frontend/src/components/settings/Settings.js
View file @
4fe1bdf2
import
React
from
"
react
"
;
import
CustomComponentForAPI
from
"
../CustomComponentForAPI
"
;
import
React
,
{
Component
}
from
"
react
"
;
import
ColorTools
from
"
./ColorTools
"
;
class
Settings
extends
CustomComponentForAPI
{
customRender
()
{
/**
* React component to handle the site settings
*
* @class Settings
* @extends {Component}
*/
class
Settings
extends
Component
{
render
()
{
return
(
<
ColorTools
/>
//TODO fix backgroud
);
...
...
frontend/src/components/shared/Markdown.js
View file @
4fe1bdf2
...
...
@@ -4,6 +4,7 @@
import
React
from
"
react
"
;
import
ReactMarkdown
from
"
react-markdown
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
Typography
from
"
@material-ui/core/Typography
"
;
import
Table
from
"
@material-ui/core/Table
"
;
...
...
@@ -17,11 +18,13 @@ import { lighten, darken } from "@material-ui/core/styles/colorManipulator";
import
Divider
from
"
@material-ui/core/Divider
"
;
import
LinkText
from
"
../other/TextLink
"
;
const
styles
=
(
theme
)
=>
{
const
{
palette
}
=
theme
;
const
linkColor
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
secondary
.
main
,
0.8
)
:
darken
(
palette
.
secondary
.
main
,
0.3
);
const
backgroundTable
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
background
.
paper
,
0.07
)
:
darken
(
palette
.
background
.
paper
,
0.02
);
const
headerTable
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
background
.
paper
,
0.13
)
:
darken
(
palette
.
background
.
paper
,
0.07
);
// Custom styling for the rendered markdown
const
styles
=
theme
=>
{
const
{
palette
}
=
theme
,
linkColor
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
secondary
.
main
,
0.8
)
:
darken
(
palette
.
secondary
.
main
,
0.3
),
backgroundTable
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
background
.
paper
,
0.07
)
:
darken
(
palette
.
background
.
paper
,
0.02
),
headerTable
=
palette
.
type
==
"
dark
"
?
lighten
(
palette
.
background
.
paper
,
0.13
)
:
darken
(
palette
.
background
.
paper
,
0.07
);
return
{
list
:
{
color
:
palette
.
text
.
primary
,
...
...
@@ -65,12 +68,17 @@ const styles = (theme) => {
};
};
const
renderers
=
{
heading
:
({
level
,
...
props
})
=>
{
let
variant
;
let
paragraph
;
/////////////////////////////////////////
/// Renderers definition
////////////////////////////////////////
switch
(
level
)
{
const
HeadingRenderer
=
(
props
)
=>
{
const
{
level
}
=
props
;
let
variant
=
"
body2
"
,
paragraph
=
false
;
switch
(
level
)
{
case
1
:
variant
=
"
h5
"
;
break
;
...
...
@@ -87,59 +95,95 @@ const renderers = {
default
:
variant
=
"
body2
"
;
break
;
}
}
return
<
Typography
{...
props
}
gutterBottom
variant
=
{
variant
}
paragraph
=
{
paragraph
}
style
=
{{
fontWeight
:
700
}}
/>
;
},
// eslint-disable-next-line no-unused-vars
list
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
tight
,
ordered
,
...
props
})
=>
(
<
ul
className
=
{
classes
.
list
}
>
return
(
<
Typography
gutterBottom
variant
=
{
variant
}
paragraph
=
{
paragraph
}
>
{
props
.
children
}
<
/ul
>
)),
// eslint-disable-next-line no-unused-vars
listItem
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
tight
,
ordered
,
...
props
})
=>
(
<
li
className
=
{
classes
.
listItem
}
>
<
Typography
component
=
"
span
"
{...
props
}
/
>
<
/li
>
)),
paragraph
:
props
=>
<
Typography
{...
props
}
paragraph
/>
,
link
:
props
=>
<
LinkText
{...
props
}
/>
,
// eslint-disable-next-line no-unused-vars
code
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
...
props
})
=>
(
<
Typography
variant
=
{
"
body1
"
}
paragraph
>
<
pre
><
code
>
{
props
.
value
}
<
/code></
pre
>
<
/Typography
>
)),
inlineCode
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
...
props
})
=>
(
<
code
className
=
{
classes
.
code
}
>
);
};
const
ListRenderer
=
(
props
,
classes
)
=>
(
<
ul
className
=
{
classes
.
list
}
>
{
props
.
children
}
<
/ul
>
);
const
ListItemRenderer
=
(
props
,
classes
)
=>
(
<
li
className
=
{
classes
.
listItem
}
>
<
Typography
component
=
"
span
"
>
{
props
.
children
}
<
/code
>
)),
blockquote
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
...
props
})
=>
(
<
blockquote
className
=
{
classes
.
blockquote
}
>
<
em
>
{
props
.
children
}
<
/em
>
<
/blockquote
>
)),
table
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
...
props
})
=>
(
<
Paper
className
=
{
classes
.
backgroundTable
}
>
<
Table
className
=
{
classes
.
table
}
>
{
props
.
children
}
<
/Table
>
<
/Paper
>
)),
tableHead
:
withStyles
(
styles
,
{
withTheme
:
true
})(({
classes
,
...
props
})
=>
(
<
TableHead
classes
=
{{
root
:
classes
.
bold
}}
className
=
{
classes
.
tableHead
}
>
{
props
.
children
}
<
/TableHead
>
)),
<
/Typography
>
<
/li
>
);
const
CodeRenderer
=
(
props
)
=>
(
<
Typography
variant
=
{
"
body2
"
}
paragraph
>
<
pre
>
<
code
>
{
props
.
value
}
<
/code
>
<
/pre
>
<
/Typography
>
);
const
InlineCodeRenderer
=
(
props
,
classes
)
=>
(
<
code
className
=
{
classes
.
code
}
>
{
props
.
children
}
<
/code
>
);
const
BlockquoteRenderer
=
(
props
,
classes
)
=>
(
<
blockquote
className
=
{
classes
.
blockquote
}
>
<
em
>
{
props
.
children
}
<
/em
>
<
/blockquote
>
);
const
TableRenderer
=
(
props
,
classes
)
=>
(
<
Paper
className
=
{
classes
.
backgroundTable
}
>
<
Table
className
=
{
classes
.
table
}
>
{
props
.
children
}
<
/Table
>
<
/Paper
>
);
const
TableHeadRenderer
=
(
props
,
classes
)
=>
(
<
TableHead
classes
=
{{
root
:
classes
.
bold
}}
className
=
{
classes
.
tableHead
}
>
{
props
.
children
}
<
/TableHead
>
);
//// End of renderers definition
const
renderers
=
{
heading
:
HeadingRenderer
,
list
:
withStyles
(
styles
,
{
withTheme
:
true
})(
ListRenderer
),
listItem
:
withStyles
(
styles
,
{
withTheme
:
true
})(
ListItemRenderer
),
paragraph
:
(
props
)
=>
<
Typography
paragraph
>
{
props
.
children
}
<
/Typography>
,
link
:
props
=>
<
LinkText
{...
props
}
/>
,
code
:
withStyles
(
styles
,
{
withTheme
:
true
})(
CodeRenderer
),
inlineCode
:
withStyles
(
styles
,
{
withTheme
:
true
})(
InlineCodeRenderer
),
blockquote
:
withStyles
(
styles
,
{
withTheme
:
true
})(
BlockquoteRenderer
),
table
:
withStyles
(
styles
,
{
withTheme
:
true
})(
TableRenderer
),
tableHead
:
withStyles
(
styles
,
{
withTheme
:
true
})(
TableHeadRenderer
),
tableBody
:
props
=>
(
<
TableBody
>
{
props
.
children
}
<
/TableBody>
)
,
tableRow
:
props
=>
(
<
TableRow
hover
=
{
true
}
>
{
props
.
children
}
<
/TableRow>
)
,
tableCell
:
props
=>
(
<
TableCell
>
{
props
.
children
}
<
/TableCell>
)
,