forked from feathericons/feathericons.com
-
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.
Add customization controls 🎛 (feathericons#297)
* Generate zip dynamically
* Set up sidebar layout
* Scaffold form
* Adjust layout
* Set up formik
* Virtualize grid
* Change form labels
* Default OptionsContext inital value to {}
* Disabled useQueryParam
* Don't display json of form values
* Make carbon ad width 100%
* Move customize controls into seperate component
* Download zip with customized icons
* Update download and copy calls to use custom options
* Add back query params
* Adjust search input bg gradient
* Fix build
* Update row height
* Remove cap and join options- Loading branch information
Showing
13 changed files
with
578 additions
and
163 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| import React from 'react' | ||
| import { globalHistory } from '@reach/router' | ||
| import { QueryParamProvider } from 'use-query-params' | ||
| import { OptionsProvider } from './src/components/OptionsContext' | ||
|
|
||
| export const wrapRootElement = ({ element }) => ( | ||
| <QueryParamProvider reachHistory={globalHistory}> | ||
| {element} | ||
| <OptionsProvider>{element}</OptionsProvider> | ||
| </QueryParamProvider> | ||
| ) |
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 |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| /** @jsx jsx */ | ||
| import { Input, Label, Select, Slider } from '@rebass/forms' | ||
| import { useFormik } from 'formik' | ||
| import isEqual from 'lodash.isequal' | ||
| import React from 'react' | ||
| import { jsx } from 'theme-ui' | ||
| import Button from './Button' | ||
| import { useOptions } from './OptionsContext' | ||
|
|
||
| const INITIAL_VALUES = { | ||
| size: 24, | ||
| strokeWidth: 2, | ||
| strokeColor: 'currentColor', | ||
| } | ||
|
|
||
| function Customize() { | ||
| const { values, handleChange, handleReset } = useFormik({ | ||
| initialValues: INITIAL_VALUES, | ||
| }) | ||
|
|
||
| const { setOptions } = useOptions() | ||
|
|
||
| React.useEffect(() => setOptions(values), [setOptions, values]) | ||
|
|
||
| return ( | ||
| <form sx={{ display: 'grid', gridGap: 4 }}> | ||
| <div | ||
| sx={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| }} | ||
| > | ||
| <h2 sx={{ margin: 0, fontSize: 4, fontWeight: 'bold' }}>Customize</h2> | ||
| <Button | ||
| onClick={handleReset} | ||
| disabled={isEqual(values, INITIAL_VALUES)} | ||
| sx={{ | ||
| variant: 'buttons.outline', | ||
| paddingY: 1, | ||
| paddingX: 2, | ||
| fontSize: 1, | ||
| }} | ||
| > | ||
| Reset | ||
| </Button> | ||
| </div> | ||
| <div> | ||
| <Label htmlFor="size">Size</Label> | ||
| <div | ||
| sx={{ | ||
| display: 'grid', | ||
| gridGap: 4, | ||
| gridTemplateColumns: '1fr 48px', | ||
| justifyItems: 'end', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Slider | ||
| id="size" | ||
| min="12" | ||
| max="100" | ||
| step="4" | ||
| value={values.size} | ||
| onChange={handleChange} | ||
| ></Slider> | ||
| {values.size}px | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <Label htmlFor="strokeWidth">Stroke width</Label> | ||
| <div | ||
| sx={{ | ||
| display: 'grid', | ||
| gridGap: 4, | ||
| gridTemplateColumns: '1fr 48px', | ||
| justifyItems: 'end', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Slider | ||
| id="strokeWidth" | ||
| min="0.5" | ||
| max="3" | ||
| step="0.5" | ||
| value={values.strokeWidth} | ||
| onChange={handleChange} | ||
| ></Slider> | ||
| {values.strokeWidth}px | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <Label htmlFor="strokeColor">Color</Label> | ||
| <div | ||
| sx={{ | ||
| display: 'grid', | ||
| gridGap: 4, | ||
| gridTemplateColumns: '1fr 48px', | ||
| }} | ||
| > | ||
| <Input | ||
| id="strokeColor" | ||
| placeholder="#000000" | ||
| value={values.strokeColor} | ||
| onChange={handleChange} | ||
| ></Input> | ||
| <div sx={{ backgroundColor: values.strokeColor, borderRadius: 1 }} /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
|
|
||
| export default Customize |
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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from 'react' | ||
|
|
||
| const OptionsContext = React.createContext({}) | ||
|
|
||
| export function OptionsProvider({ children }) { | ||
| const [options, setOptions] = React.useState({}) | ||
| return ( | ||
| <OptionsContext.Provider value={{ options, setOptions }}> | ||
| {children} | ||
| </OptionsContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export function useOptions() { | ||
| return React.useContext(OptionsContext) | ||
| } |
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,15 @@ | ||
| /** @jsx jsx */ | ||
| import { jsx } from 'theme-ui' | ||
| import Customize from './Customize' | ||
| import CarbonAd from './CarbonAd' | ||
|
|
||
| function Sidebar() { | ||
| return ( | ||
| <div sx={{ paddingY: 5, paddingX: 4 }}> | ||
| <Customize /> | ||
| <CarbonAd sx={{ marginTop: 6 }} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Sidebar |
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
Oops, something went wrong.