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

🐛 fix basic layout issues

Browse source
This commit is contained in:
ghalestrilo 2020-06-15 17:59:11 -03:00
parent f40cd4f376
commit fb831f5f62
1 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,9 @@ const Header = styled.div`
width: 100%; width: 100%;
background-color: ${background}; background-color: ${background};
color: ${textColor}; color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)}; padding-left: ${remSize(32)};
z-index: 1;
`; `;
const Footer = styled.div` const Footer = styled.div`
@ -44,9 +46,10 @@ const Footer = styled.div`
`; `;
const Content = styled.div` const Content = styled.div`
z-index: 0;
margin-top: ${remSize(16)};
`; `;
const f = x => x;
const Screen = ({ children }) => ( const Screen = ({ children }) => (
<div className="fullscreen-preview"> <div className="fullscreen-preview">
@ -59,55 +62,60 @@ Screen.propTypes = {
const IDEViewMobile = (props) => { const IDEViewMobile = (props) => {
// const // const
// const { const {
// 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
// } = props; } = props;
const [tmController, setTmController] = useState(null); const [tmController, setTmController] = useState(null);
return ( return (
<Screen> <Screen>
<Header><h1>Mobile View</h1></Header> <Header>
{/* <h1>Mobile View</h1> */}
<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</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]
.map(pr => <h5>{pr.toString()}</h5>) } .map(pr => <h5>{pr.toString()}</h5>) }
</div> */} </div> */}
<Editor <Content>
lintWarning={props.preferences.lintWarning} <Editor
linewrap={props.preferences.linewrap} lintWarning={props.preferences.lintWarning}
lintMessages={props.editorAccessibility.lintMessages} linewrap={props.preferences.linewrap}
updateLintMessage={props.updateLintMessage} lintMessages={props.editorAccessibility.lintMessages}
clearLintMessage={props.clearLintMessage} updateLintMessage={props.updateLintMessage}
file={props.selectedFile} clearLintMessage={props.clearLintMessage}
updateFileContent={props.updateFileContent} file={props.selectedFile}
fontSize={props.preferences.fontSize} updateFileContent={props.updateFileContent}
lineNumbers={props.preferences.lineNumbers} fontSize={props.preferences.fontSize}
files={props.files} lineNumbers={props.preferences.lineNumbers}
editorOptionsVisible={props.ide.editorOptionsVisible} files={props.files}
showEditorOptions={props.showEditorOptions} editorOptionsVisible={props.ide.editorOptionsVisible}
closeEditorOptions={props.closeEditorOptions} showEditorOptions={props.showEditorOptions}
showKeyboardShortcutModal={props.showKeyboardShortcutModal} closeEditorOptions={props.closeEditorOptions}
setUnsavedChanges={props.setUnsavedChanges} showKeyboardShortcutModal={props.showKeyboardShortcutModal}
isPlaying={props.ide.isPlaying} setUnsavedChanges={props.setUnsavedChanges}
theme={props.preferences.theme} isPlaying={props.ide.isPlaying}
startRefreshSketch={props.startRefreshSketch} theme={props.preferences.theme}
stopSketch={props.stopSketch} startRefreshSketch={props.startRefreshSketch}
autorefresh={props.preferences.autorefresh} stopSketch={props.stopSketch}
unsavedChanges={props.ide.unsavedChanges} autorefresh={props.preferences.autorefresh}
projectSavedTime={props.project.updatedAt} unsavedChanges={props.ide.unsavedChanges}
isExpanded={props.ide.sidebarIsExpanded} projectSavedTime={props.project.updatedAt}
expandSidebar={props.expandSidebar} isExpanded={props.ide.sidebarIsExpanded}
collapseSidebar={props.collapseSidebar} expandSidebar={props.expandSidebar}
isUserOwner={setTmController} collapseSidebar={props.collapseSidebar}
clearConsole={props.clearConsole} isUserOwner={setTmController}
consoleEvents={props.console} clearConsole={props.clearConsole}
showRuntimeErrorWarning={props.showRuntimeErrorWarning} consoleEvents={props.console}
hideRuntimeErrorWarning={props.hideRuntimeErrorWarning} showRuntimeErrorWarning={props.showRuntimeErrorWarning}
runtimeErrorWarningVisible={props.ide.runtimeErrorWarningVisible} hideRuntimeErrorWarning={props.hideRuntimeErrorWarning}
provideController={setTmController} runtimeErrorWarningVisible={props.ide.runtimeErrorWarningVisible}
/> provideController={setTmController}
/>
</Content>
<Footer><h1>Bottom Bar</h1></Footer> <Footer><h1>Bottom Bar</h1></Footer>
</Screen> </Screen>
); );