👌 improve IconButton implementation

This commit is contained in:
ghalestrilo 2020-07-01 16:32:29 -03:00
parent 3143cc34c7
commit b4c1b86d4d
3 changed files with 21 additions and 15 deletions

View file

@ -11,14 +11,20 @@ width: 3rem;
} }
`; `;
const IconButton = props => (<ButtonWrapper const IconButton = (props) => {
iconBefore={props.element} const { icon, ...otherProps } = props;
kind={Button.kinds.inline} const Icon = icon;
{...props}
/>); return (<ButtonWrapper
iconBefore={<Icon />}
kind={Button.kinds.inline}
focusable="false"
{...otherProps}
/>);
};
IconButton.propTypes = { IconButton.propTypes = {
element: PropTypes.element.isRequired icon: PropTypes.func.isRequired
}; };
export default IconButton; export default IconButton;

View file

@ -20,9 +20,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports // Local Imports
import Editor from '../components/Editor'; import Editor from '../components/Editor';
import { ExitIcon } from '../../../common/icons'; import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
import { PreferencesIcon, PlayIcon } from '../../../common/icons';
import IconButton from '../../../components/mobile/IconButton'; import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header'; import Header from '../../../components/mobile/Header';
@ -53,17 +51,19 @@ const IDEViewMobile = (props) => {
return ( return (
<Screen> <Screen>
<Header> <Header>
<IconButton to="/mobile" aria-label="Return to original editor"> <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
<ExitIcon viewBox="0 0 16 16" />
</IconButton>
<div style={{ marginLeft: '1rem' }}> <div style={{ marginLeft: '1rem' }}>
<h2>{project.name}</h2> <h2>{project.name}</h2>
<h3>{selectedFile.name}</h3> <h3>{selectedFile.name}</h3>
</div> </div>
<IconContainer> <IconContainer>
<IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} /> <IconButton
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} /> onClick={() => setOverlay('preferences')}
icon={PreferencesIcon}
aria-label="Open preferences menu"
/>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</IconContainer> </IconContainer>
</Header> </Header>

View file

@ -50,7 +50,7 @@ const MobileSketchView = (props) => {
return ( return (
<Screen> <Screen>
<Header> <Header>
<IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" /> <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
<div style={{ marginLeft: '1rem' }}> <div style={{ marginLeft: '1rem' }}>
<h2>{projectName}</h2> <h2>{projectName}</h2>
<h3><br /></h3> <h3><br /></h3>