🔀 merging from mobile-sketch-view
This commit is contained in:
ghalestrilo
commit
c88bf44490
8 changed files with 32 additions and 35 deletions
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,20 @@ width: ${remSize(48)};
|
|||
}
|
||||
`;
|
||||
|
||||
const IconButton = props => (<ButtonWrapper
|
||||
iconBefore={props.children}
|
||||
const IconButton = (props) => {
|
||||
const { icon, ...otherProps } = props;
|
||||
const Icon = icon;
|
||||
|
||||
return (<ButtonWrapper
|
||||
iconBefore={<Icon />}
|
||||
kind={Button.kinds.inline}
|
||||
{...{ ...props, children: null }}
|
||||
focusable="false"
|
||||
{...otherProps}
|
||||
/>);
|
||||
};
|
||||
|
||||
IconButton.propTypes = {
|
||||
children: PropTypes.element.isRequired
|
||||
icon: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default IconButton;
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue