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
8414b9b2
Commit
8414b9b2
authored
Sep 05, 2018
by
Florent Chehab
Browse files
Darkmode managed ; simplier ColorDemo
parent
909be99e
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/settings/ColorDemo.js
View file @
8414b9b2
...
...
@@ -17,7 +17,7 @@ const styles = theme => ({
},
appFrame
:
{
position
:
'
relative
'
,
height
:
39
0
,
height
:
20
0
,
backgroundColor
:
theme
.
palette
.
background
.
paper
,
},
statusBar
:
{
...
...
@@ -42,35 +42,14 @@ const styles = theme => ({
});
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
);
const
{
classes
}
=
props
;
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
}}
>
<
div
className
=
{
classes
.
statusBar
}
/
>
<
AppBar
position
=
"
static
"
>
<
Toolbar
>
<
IconButton
className
=
{
classes
.
menuButton
}
color
=
"
inherit
"
aria
-
label
=
"
Menu
"
>
<
MenuIcon
/>
<
/IconButton
>
...
...
@@ -79,20 +58,8 @@ function ColorDemo(props) {
<
/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
variant
=
"
fab
"
className
=
{
classes
.
fab
}
color
=
"
secondary
"
>
<
AddIcon
/>
<
/Button
>
<
/div
>
<
/div
>
...
...
@@ -101,7 +68,6 @@ function ColorDemo(props) {
ColorDemo
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
data
:
PropTypes
.
object
.
isRequired
,
theme
:
PropTypes
.
object
.
isRequired
,
};
...
...
frontend/src/components/settings/ColorTools.js
View file @
8414b9b2
//
Taken
from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
//
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
'
;
...
...
@@ -20,6 +20,12 @@ 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
'
];
...
...
@@ -67,8 +73,8 @@ class ColorTool extends React.Component {
componentWillUnmount
()
{
this
.
props
.
saveColorPicker
(
this
.
state
);
}
componentDidMount
(){
if
(
JSON
.
stringify
(
this
.
props
.
state
)
!=
JSON
.
stringify
(
this
.
state
)){
componentDidMount
()
{
if
(
JSON
.
stringify
(
this
.
props
.
state
)
!=
JSON
.
stringify
(
this
.
state
))
{
this
.
setState
(
this
.
props
.
state
);
}
}
...
...
@@ -117,6 +123,12 @@ class ColorTool extends React.Component {
});
};
handleChangeNightMode
()
{
this
.
setState
({
darkModeActivated
:
!
this
.
state
.
darkModeActivated
})
}
handleChangeDocsColors
=
()
=>
{
this
.
props
.
saveTheme
(
this
.
getThemeFromState
());
};
...
...
@@ -126,6 +138,7 @@ class ColorTool extends React.Component {
palette
:
{
primary
:
{
main
:
this
.
state
.
primary
},
secondary
:
{
main
:
this
.
state
.
secondary
},
type
:
this
.
state
.
darkModeActivated
?
'
dark
'
:
'
light
'
},
}
}
...
...
@@ -229,18 +242,34 @@ class ColorTool extends React.Component {
}
const
hasChanges
=
JSON
.
stringify
(
tmp
)
!=
JSON
.
stringify
(
this
.
getThemeFromState
());
return
(
<
Grid
container
spacing
=
{
40
}
className
=
{
classes
.
root
}
>
<
Grid
item
xs
=
{
12
}
>
<
FormControlLabel
labelPlacement
=
'
start
'
label
=
{
this
.
state
.
darkModeActivated
?
'
Désactiver le mode nuit :
'
:
'
Activer le monde nuit :
'
}
control
=
{
<
Switch
checked
=
{
this
.
state
.
darkModeActivated
}
onChange
=
{()
=>
this
.
handleChangeNightMode
()}
value
=
"
Nimportequoi
"
/>
}
/
>
<
/Grid
>
{
colorPicker
(
'
primary
'
)}
{
colorPicker
(
'
secondary
'
)}
<
Grid
item
xs
=
{
12
}
sm
=
{
6
}
md
=
{
4
}
>
<
ColorDemo
data
=
{
this
.
state
}
/
>
<
MuiThemeProvider
theme
=
{
createMuiTheme
(
this
.
getThemeFromState
())}
>
<
ColorDemo
/>
<
/MuiThemeProvider
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
>
<
Grid
item
xs
=
{
6
}
>
<
Button
variant
=
"
contained
"
color
=
"
secondary
"
disabled
=
{
!
hasChanges
}
onClick
=
{
this
.
handleChangeDocsColors
}
>
Appliquer
à
tout
le
site
<
/Button
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
>
<
Grid
item
xs
=
{
6
}
>
<
Button
variant
=
"
contained
"
color
=
"
primary
"
disabled
=
{
true
}
onClick
=
{
console
.
log
(
"
click
"
)}
>
Sauvegarder
...
...
frontend/src/reducers/theme.js
View file @
8414b9b2
...
...
@@ -29,7 +29,7 @@ const defaultColorPicker = {
secondaryHue
:
'
pink
'
,
primaryShade
:
4
,
secondaryShade
:
11
,
applied
:
false
,
darkModeActivated
:
defaultTheme
.
palette
.
type
==
'
dark
'
};
export
function
saveAppColorPicker
(
state
=
defaultColorPicker
,
action
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a 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