🔀 merging from mobile-sketch-view

This commit is contained in:
ghalestrilo 2020-07-01 16:44:19 -03:00
commit c88bf44490
8 changed files with 32 additions and 35 deletions

View file

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
const background = prop('Panel.default.background');
const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
const Footer = styled.div`

View file

@ -3,7 +3,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop, remSize } from '../../theme';
const background = prop('Panel.default.background');
const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');

View file

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

View file

@ -200,7 +200,6 @@ class PreviewFrame extends React.Component {
this.addLoopProtect(sketchDoc);
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
}
@ -384,7 +383,7 @@ PreviewFrame.propTypes = {
clearConsole: PropTypes.func.isRequired,
cmController: PropTypes.shape({
getContent: PropTypes.func
})
}),
};
PreviewFrame.defaultProps = {

View file

@ -18,9 +18,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
import { ExitIcon } from '../../../common/icons';
import { PreferencesIcon, PlayIcon } from '../../../common/icons';
import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header';
@ -48,17 +46,16 @@ const MobileIDEView = (props) => {
title={project.name}
subtitle={selectedFile.name}
leftButton={
<IconButton to="/mobile" aria-label="Return to original editor">
<ExitIcon viewBox="0 0 16 16" />
</IconButton>
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
}
>
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" />
</IconButton>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton>
<IconButton
to="/mobile/settings"
onClick={() => setOverlay('preferences')}
icon={PreferencesIcon}
aria-label="Open preferences menu"
/>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</Header>
<IDEWrapper>

View file

@ -22,12 +22,12 @@ const Content = styled.div`
const SettingsHeader = styled(Header)`
background: transparent
background: transparent;
`;
const SectionHeader = styled.h2`
color: ${prop('primaryTextColor')};
padding-top: ${remSize(32)}
padding-top: ${remSize(32)};
`;
const SectionSubeader = styled.h3`
@ -161,16 +161,12 @@ const MobilePreferences = (props) => {
},
];
// useEffect(() => { });
return (
<Screen fullscreen>
<section>
<SettingsHeader transparent title="Preferences">
<IconButton to="/mobile" aria-label="Return to ide view">
<ExitIcon />
</IconButton>
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</SettingsHeader>
<section className="preferences">
<Content>

View file

@ -51,9 +51,8 @@ const MobileSketchView = (props) => {
<Screen fullscreen>
<Header
leftButton={
<IconButton to="/mobile" aria-label="Return to original editor">
<ExitIcon viewBox="0 0 16 16" />
</IconButton>}
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
}
title={projectName}
/>
<Content>

View file

@ -89,7 +89,7 @@ export default {
default: grays.middleGray,
hover: grays.darker
},
Panel: {
MobilePanel: {
default: {
foreground: colors.black,
background: grays.light,
@ -128,7 +128,7 @@ export default {
default: grays.middleLight,
hover: grays.lightest
},
Panel: {
MobilePanel: {
default: {
foreground: grays.light,
background: grays.dark,
@ -167,7 +167,7 @@ export default {
default: grays.mediumLight,
hover: colors.yellow
},
Panel: {
MobilePanel: {
default: {
foreground: grays.light,
background: grays.dark,