Skip to content

Commit

Permalink
feat(Toolbar): Adding Toolbar MenuIcon and Icon
Browse files Browse the repository at this point in the history
  • Loading branch information
James Friedman committed Nov 20, 2017
1 parent 15086c3 commit ef1a852
Show file tree
Hide file tree
Showing 8 changed files with 493 additions and 394 deletions.
229 changes: 115 additions & 114 deletions docs/components/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
ListItem,
ListItemText,
IconButton,
Icon
ToolbarMenuIcon,
ToolbarIcon
} from '../../src';

import Detail from './detail';
Expand Down Expand Up @@ -47,125 +48,125 @@ const SubmenuWithMenuItems = ({ label, sectionKeys }) => (
);

export class App extends React.Component {
state = {
menuIsOpen: true
};
state = {
menuIsOpen: true
};

render() {
return (
<Router>
<div>
<Toolbar fixed waterfall>
<ToolbarRow>
<ToolbarSection alignStart>
<IconButton
style={{ color: 'inherit', alignSelf: 'center' }}
onClick={evt =>
this.setState({ menuIsOpen: !this.state.menuIsOpen })
}
>
menu
</IconButton>
<ToolbarTitle>ReactMWC</ToolbarTitle>
</ToolbarSection>
<ToolbarSection alignEnd>
<IconButton
tag="a"
href="https://github.com/jamesmfriedman/rmwc"
use={
<svg
style={{ width: '24px', height: '24px' }}
viewBox="0 0 24 24"
>
<path
fill="#ffffff"
d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
/>
</svg>
}
/>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
<ToolbarFixedAdjust />
<div className="demo-content">
<PersistentDrawer
id="main-nav"
open={this.state.menuIsOpen}
onClose={() => this.setState({ menuIsOpen: false })}
>
<PersistentDrawerContent>
<MenuItem
label="Get Started"
url={`${process.env.PUBLIC_URL}`}
/>
<SubmenuWithMenuItems
label="Buttons"
sectionKeys={['buttons', 'fabs', 'icon-toggles']}
/>
render() {
return (
<Router>
<div>
<Toolbar fixed waterfall>
<ToolbarRow>
<ToolbarSection alignStart>
<ToolbarMenuIcon
style={{ color: 'inherit', alignSelf: 'center' }}
onClick={evt =>
this.setState({ menuIsOpen: !this.state.menuIsOpen })
}
>
menu
</ToolbarMenuIcon>
<ToolbarTitle>ReactMWC</ToolbarTitle>
</ToolbarSection>
<ToolbarSection alignEnd>
<IconButton
tag="a"
href="https://github.com/jamesmfriedman/rmwc"
use={
<svg
style={{ width: '24px', height: '24px' }}
viewBox="0 0 24 24"
>
<path
fill="#ffffff"
d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
/>
</svg>
}
/>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
<ToolbarFixedAdjust />
<div className="demo-content">
<PersistentDrawer
id="main-nav"
open={this.state.menuIsOpen}
onClose={() => this.setState({ menuIsOpen: false })}
>
<PersistentDrawerContent>
<MenuItem
label="Get Started"
url={`${process.env.PUBLIC_URL}`}
/>
<SubmenuWithMenuItems
label="Buttons"
sectionKeys={['buttons', 'fabs', 'icon-toggles']}
/>

{['cards', 'dialogs'].map(v => (
<MenuItemForSection key={v} sectionKey={v} />
))}
{['cards', 'dialogs'].map(v => (
<MenuItemForSection key={v} sectionKey={v} />
))}

<SubmenuWithMenuItems
label="Drawers"
sectionKeys={[
'permanent-drawer',
'persistent-drawer',
'temporary-drawer'
]}
/>
<SubmenuWithMenuItems
label="Drawers"
sectionKeys={[
'permanent-drawer',
'persistent-drawer',
'temporary-drawer'
]}
/>

{['elevation', 'grid-lists'].map(v => (
<MenuItemForSection key={v} sectionKey={v} />
))}
{['elevation', 'grid-lists'].map(v => (
<MenuItemForSection key={v} sectionKey={v} />
))}

<SubmenuWithMenuItems
label="Inputs and Controls"
sectionKeys={[
'checkboxes',
'form-fields',
'radio-buttons',
'select-menus',
'sliders',
'switches',
'textfields'
]}
/>
<SubmenuWithMenuItems
label="Inputs and Controls"
sectionKeys={[
'checkboxes',
'form-fields',
'radio-buttons',
'select-menus',
'sliders',
'switches',
'textfields'
]}
/>

{[
'layout-grid',
'linear-progress',
'lists',
'menus',
'ripples',
'snackbars',
'tabs',
'theme',
'toolbars',
'typography'
].map(v => <MenuItemForSection key={v} sectionKey={v} />)}
</PersistentDrawerContent>
</PersistentDrawer>
<main>
<Switch>
<Route
path={`${process.env.PUBLIC_URL || '/'}`}
exact
component={Home}
/>
<Route
path={`${process.env.PUBLIC_URL}/:section`}
component={Detail}
/>
</Switch>
</main>
</div>
</div>
</Router>
);
}
{[
'layout-grid',
'linear-progress',
'lists',
'menus',
'ripples',
'snackbars',
'tabs',
'theme',
'toolbars',
'typography'
].map(v => <MenuItemForSection key={v} sectionKey={v} />)}
</PersistentDrawerContent>
</PersistentDrawer>
<main>
<Switch>
<Route
path={`${process.env.PUBLIC_URL || '/'}`}
exact
component={Home}
/>
<Route
path={`${process.env.PUBLIC_URL}/:section`}
component={Detail}
/>
</Switch>
</main>
</div>
</div>
</Router>
);
}
}

export default App;
47 changes: 37 additions & 10 deletions docs/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default [
section: 'fabs',
class: 'Fab',
url:
'https://material.io/components/web/catalog/buttons/floating-action-buttons/',
'https://material.io/components/web/catalog/buttons/floating-action-buttons/',
example: `
<Fab>favorite</Fab>
<Fab mini>favorite</Fab>
Expand All @@ -30,7 +30,7 @@ export default [
section: 'icon-toggles',
class: 'IconToggle',
url:
'https://material.io/components/web/catalog/buttons/icon-toggle-buttons/',
'https://material.io/components/web/catalog/buttons/icon-toggle-buttons/',
example: `
<IconToggle
on={{label: 'Remove from favorites', content: 'favorite'}}
Expand Down Expand Up @@ -77,7 +77,7 @@ export default [
section: 'permanent-drawer',
class: ['PermanentDrawer', 'PermanentDrawerContent'],
url:
'https://material.io/components/web/catalog/drawers/#permanent-drawer-usage',
'https://material.io/components/web/catalog/drawers/#permanent-drawer-usage',
example: `
<PermanentDrawer>
<PermanentDrawerContent>
Expand Down Expand Up @@ -105,7 +105,7 @@ export default [
'PersistentDrawerContent'
],
url:
'https://material.io/components/web/catalog/drawers/#persistent-drawer-usage',
'https://material.io/components/web/catalog/drawers/#persistent-drawer-usage',
example: `
<Button
onClick={() => this.setState({open: !this.state.open})}
Expand Down Expand Up @@ -144,7 +144,7 @@ export default [
'TemporaryDrawerContent'
],
url:
'https://material.io/components/web/catalog/drawers/#temporary-drawer-usage',
'https://material.io/components/web/catalog/drawers/#temporary-drawer-usage',
example: `
<Button
onClick={() => this.setState({open: !this.state.open})}
Expand Down Expand Up @@ -316,7 +316,7 @@ export default [
section: 'checkboxes',
class: ['Checkbox'],
url:
'https://material.io/components/web/catalog/input-controls/checkboxes/',
'https://material.io/components/web/catalog/input-controls/checkboxes/',
example: `
<Checkbox>Cookies</Checkbox>
<Checkbox>Pizza</Checkbox>
Expand All @@ -329,7 +329,7 @@ export default [
section: 'form-fields',
class: 'FormField',
url:
'https://material.io/components/web/catalog/input-controls/form-fields/',
'https://material.io/components/web/catalog/input-controls/form-fields/',
example: `
<FormField>
<TextField label="Write Something..." id="test" />
Expand All @@ -346,7 +346,7 @@ export default [
section: 'radio-buttons',
class: 'Radio',
url:
'https://material.io/components/web/catalog/input-controls/radio-buttons/',
'https://material.io/components/web/catalog/input-controls/radio-buttons/',
example: `
<Radio name="radio">Cookies</Radio>
<Radio name="radio">Pizza</Radio>
Expand All @@ -358,7 +358,7 @@ export default [
section: 'select-menus',
class: 'Select',
url:
'https://material.io/components/web/catalog/input-controls/select-menus/',
'https://material.io/components/web/catalog/input-controls/select-menus/',
example: `
<Select
placeholder="Select a food"
Expand Down Expand Up @@ -420,7 +420,7 @@ export default [
section: 'textfields',
class: ['TextField', 'TextFieldHelpText', 'TextFieldIcon'],
url:
'https://material.io/components/web/catalog/input-controls/text-fields/',
'https://material.io/components/web/catalog/input-controls/text-fields/',
example: `
<TextField label="Write something..." />
<TextFieldHelpText>Optional help text.</TextFieldHelpText>
Expand Down Expand Up @@ -680,16 +680,43 @@ export default [
'Toolbar',
'ToolbarRow',
'ToolbarSection',
'ToolbarMenuIcon',
'ToolbarTitle',
'ToolbarIcon',
'ToolbarFixedAdjust'
],
url: 'https://material.io/components/web/catalog/toolbar/',
example: `
{/* Minimum usage */}
<Toolbar>
<ToolbarRow>
<ToolbarTitle>Toolbar</ToolbarTitle>
</ToolbarRow>
</Toolbar>
{/* With multiple sections */}
<Toolbar>
<ToolbarRow>
<ToolbarSection alignStart>
<ToolbarMenuIcon use="menu"/>
<ToolbarTitle>Toolbar</ToolbarTitle>
</ToolbarSection>
<ToolbarSection alignEnd>
<ToolbarIcon use="save"/>
<ToolbarIcon use="print"/>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
{/* Multiple rows */}
<Toolbar>
<ToolbarRow>
<ToolbarTitle>Toolbar</ToolbarTitle>
</ToolbarRow>
<ToolbarRow>
<ToolbarTitle>Second Row</ToolbarTitle>
</ToolbarRow>
</Toolbar>
`
},
{
Expand Down
Loading

0 comments on commit ef1a852

Please sign in to comment.