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

🚧 add button to return to main view

Browse source
This commit is contained in:
ghalestrilo 2020-06-15 18:34:04 -03:00
parent fb831f5f62
commit 11adfbfca5
1 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -21,28 +21,39 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports // Local Imports
import Editor from '../components/Editor'; import Editor from '../components/Editor';
import { prop, remSize } from '../../../theme'; import { prop, remSize } from '../../../theme';
import CloseIcon from '../../../images/exit.svg';
const background = prop('Button.default.background'); const background = prop('Button.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Header = styled.div` const Header = styled.div`
position: fixed; position: fixed;
width: 100%; width: 100%;
background-color: ${background}; background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
padding-right: ${remSize(32)};
z-index: 1;
display: flex;
flex: 1;
flex-direction: row;
// justify-content: space-between;
align-items: center;
`;
const Footer = styled.div`
position: fixed;
width: 100%;
background: ${background};
color: ${textColor}; color: ${textColor};
padding: ${remSize(12)}; padding: ${remSize(12)};
padding-left: ${remSize(32)}; padding-left: ${remSize(32)};
z-index: 1; z-index: 1;
`;
const Footer = styled.div`
width: 100%;
position: fixed;
bottom: 0; bottom: 0;
background: ${background};
color: ${textColor};
padding-left: ${remSize(32)};
`; `;
const Content = styled.div` const Content = styled.div`
@ -50,6 +61,14 @@ const Content = styled.div`
margin-top: ${remSize(16)}; margin-top: ${remSize(16)};
`; `;
const Icon = styled.a`
> svg {
fill: ${textColor};
color: ${textColor};
margin: 8px
}
`;
const Screen = ({ children }) => ( const Screen = ({ children }) => (
<div className="fullscreen-preview"> <div className="fullscreen-preview">
@ -71,9 +90,13 @@ const IDEViewMobile = (props) => {
return ( return (
<Screen> <Screen>
<Header> <Header>
{/* <h1>Mobile View</h1> */} <div>
<h2>{project.name}</h2> <h2>{project.name}</h2>
<h3>{selectedFile.name}</h3> <h3>{selectedFile.name}</h3>
</div>
<Icon href="/">
<CloseIcon focusable="false" aria-hidden="true" />
</Icon>
</Header> </Header>
{/* <div> {/* <div>
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning] { [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning]
@ -116,7 +139,7 @@ const IDEViewMobile = (props) => {
provideController={setTmController} provideController={setTmController}
/> />
</Content> </Content>
<Footer><h1>Bottom Bar</h1></Footer> <Footer><h2>Bottom Bar</h2></Footer>
</Screen> </Screen>
); );
}; };