r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

🔀 merging from mobile-sketch-view

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/mobile/Footer.jsx
View file

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

2
client/components/mobile/Header.jsx
View file

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

16
client/components/mobile/IconButton.jsx
View file

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

3
client/modules/IDE/components/PreviewFrame.jsx
View file

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

21
client/modules/IDE/pages/MobileIDEView.jsx
View file

@ -18,9 +18,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';
@ -48,17 +46,16 @@ const MobileIDEView = (props) => {
title={project.name} title={project.name}
subtitle={selectedFile.name} subtitle={selectedFile.name}
leftButton={ leftButton={
<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>
} }
> >
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}> <IconButton
<PreferencesIcon focusable="false" aria-hidden="true" /> to="/mobile/settings"
</IconButton> onClick={() => setOverlay('preferences')}
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}> icon={PreferencesIcon}
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" /> aria-label="Open preferences menu"
</IconButton> />
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</Header> </Header>
<IDEWrapper> <IDEWrapper>

10
client/modules/Mobile/MobilePreferences.jsx
View file

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

5
client/modules/Mobile/MobileSketchView.jsx
View file

@ -51,9 +51,8 @@ const MobileSketchView = (props) => {
<Screen fullscreen> <Screen fullscreen>
<Header <Header
leftButton={ leftButton={
<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>}
title={projectName} title={projectName}
/> />
<Content> <Content>

6
client/theme.js
View file

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