forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Add color selector (mui#12053)
* [docs] Add color chooser Add color swatches Checkmark for selected colors Fix imports Add shade slider basically working Fix indigo glitch * Add ColorDemo component * Remove google color tool support * Fix TextField input * Rename ColorChooser to ColorTool * Improve the layout * Address the rest of Olivier's feedback * Add toolbar icon * Add docs-style-color to regression test blacklist * Optimize sample palette * Use MarkdownElement for code sample * Add dark / main / light colorBar * Display hex values in colorBar * fix code layout * Fix size limits * DRY the colorPicker Does this make the code to dense / hard to read? * Hacky fix for layout at small screen size * looking at the PR
- Loading branch information
Showing
18 changed files
with
476 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| const actionTypes = { | ||
| THEME_CHANGE_PALETTE_TYPE: 'THEME_CHANGE_PALETTE_TYPE', | ||
| THEME_CHANGE_DIRECTION: 'THEME_CHANGE_DIRECTION', | ||
| THEME_CHANGE_PALETTE_COLORS: 'THEME_CHANGE_PALETTE_COLORS', | ||
| THEME_CHANGE_PALETTE_TYPE: 'THEME_CHANGE_PALETTE_TYPE', | ||
| }; | ||
|
|
||
| export default actionTypes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| 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: 360, | ||
| 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); |
Oops, something went wrong.