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

🚧 emplace settings and play icons

Browse source
This commit is contained in:
ghalestrilo 2020-06-16 16:25:40 -03:00
parent 7f8138a204
commit 0d119aa5e7
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,8 @@ import { getHTMLFile } from '../reducers/files';
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'; import CloseIcon from '../../../images/exit.svg';
import PreferencesIcon from '../../../images/preferences.svg';
import PlayIcon from '../../../images/triangle-arrow-right.svg';
const background = prop('Button.default.background'); const background = prop('Button.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
@ -66,10 +68,10 @@ const Icon = styled.a`
fill: ${textColor}; fill: ${textColor};
color: ${textColor}; color: ${textColor};
margin-left: ${remSize(16)}; margin-left: ${remSize(16)};
align-items: center;
} }
`; `;
const Screen = ({ children }) => ( const Screen = ({ children }) => (
<div className="fullscreen-preview"> <div className="fullscreen-preview">
{children} {children}
@ -82,13 +84,14 @@ Screen.propTypes = {
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
const IDEViewMobile = (props) => { const IDEViewMobile = (props) => {
// 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);
const [overlay, setOverlay] = useState(null);
return ( return (
<Screen> <Screen>
<Header> <Header>
@ -96,9 +99,17 @@ const IDEViewMobile = (props) => {
<h2>{project.name}</h2> <h2>{project.name}</h2>
<h3>{selectedFile.name}</h3> <h3>{selectedFile.name}</h3>
</div> </div>
<div>
<Icon href="/"> <Icon href="/">
<CloseIcon focusable="false" aria-hidden="true" /> <CloseIcon focusable="false" aria-hidden="true" />
</Icon> </Icon>
<Icon onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" />
</Icon>
<Icon onClick={() => setOverlay('runSketch')}>
<PlayIcon focusable="false" aria-hidden="true" />
</Icon>
</div>
</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]