Merge pull request #1459 from ghalestrilo/feature/mobile-ide

Add Editor component to the Mobile IDE View
This commit is contained in:
Cassie Tarakajian 2020-06-18 15:41:25 -04:00 committed by GitHub
commit ca4502dae9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 319 additions and 17 deletions

View file

@ -1,11 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { remSize, prop } from '../theme';
import SortArrowUp from '../images/sort-arrow-up.svg';
import SortArrowDown from '../images/sort-arrow-down.svg';
import Github from '../images/github.svg';
import Google from '../images/google.svg';
import Plus from '../images/plus-icon.svg';
import Close from '../images/close.svg';
import Exit from '../images/exit.svg';
import DropdownArrow from '../images/down-filled-triangle.svg';
// HOC that adds the right web accessibility props
@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
// Need to add size to these - like small icon, medium icon, large icon. etc.
function withLabel(SvgComponent) {
const Icon = (props) => {
const StyledIcon = styled(SvgComponent)`
&&& {
color: ${prop('Icon.default')};
& g, & path, & polygon {
opacity: 1;
fill: ${prop('Icon.default')};
}
&:hover {
color: ${prop('Icon.hover')};
& g, & path, & polygon {
opacity: 1;
fill: ${prop('Icon.hover')};
}
}
}
`;
const { 'aria-label': ariaLabel } = props;
if (ariaLabel) {
return (<SvgComponent
return (<StyledIcon
{...props}
aria-label={ariaLabel}
role="img"
focusable="false"
/>);
}
return (<SvgComponent
return (<StyledIcon
{...props}
aria-hidden
focusable="false"
@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
export const GoogleIcon = withLabel(Google);
export const PlusIcon = withLabel(Plus);
export const CloseIcon = withLabel(Close);
export const ExitIcon = withLabel(Exit);
export const DropdownArrowIcon = withLabel(DropdownArrow);

View file

@ -1,11 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { remSize, prop } from '../theme';
import SortArrowUp from '../images/sort-arrow-up.svg';
import SortArrowDown from '../images/sort-arrow-down.svg';
import Github from '../images/github.svg';
import Google from '../images/google.svg';
import Plus from '../images/plus-icon.svg';
import Close from '../images/close.svg';
import Exit from '../images/exit.svg';
import DropdownArrow from '../images/down-filled-triangle.svg';
// HOC that adds the right web accessibility props
@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
// Need to add size to these - like small icon, medium icon, large icon. etc.
function withLabel(SvgComponent) {
const Icon = (props) => {
const StyledIcon = styled(SvgComponent)`
&&& {
color: ${prop('Icon.default')};
& g, & path, & polygon {
opacity: 1;
fill: ${prop('Icon.default')};
}
&:hover {
color: ${prop('Icon.hover')};
& g, & path, & polygon {
opacity: 1;
fill: ${prop('Icon.hover')};
}
}
}
`;
const { 'aria-label': ariaLabel } = props;
if (ariaLabel) {
return (<SvgComponent
return (<StyledIcon
{...props}
aria-label={ariaLabel}
role="img"
focusable="false"
/>);
}
return (<SvgComponent
return (<StyledIcon
{...props}
aria-hidden
focusable="false"
@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
export const GoogleIcon = withLabel(Google);
export const PlusIcon = withLabel(Plus);
export const CloseIcon = withLabel(Close);
export const ExitIcon = withLabel(Exit);
export const DropdownArrowIcon = withLabel(DropdownArrow);

View file

@ -2,28 +2,80 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { useState } from 'react';
// Imports to be Refactored
import { bindActionCreators } from 'redux';
import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences';
import * as UserActions from '../../User/actions';
import * as ToastActions from '../actions/toast';
import * as ConsoleActions from '../actions/console';
import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
import { prop, remSize } from '../../../theme';
import { ExitIcon } from '../../../common/icons';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
const Header = styled.div`
position: fixed;
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: flex-start;
align-items: center;
`;
const Footer = styled.div`
position: fixed;
width: 100%;
position: absolute;
bottom: 0;
background: ${background};
color: ${textColor};
padding: ${remSize(12)};
padding-left: ${remSize(32)};
z-index: 1;
bottom: 0;
`;
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(16)};
`;
const Icon = styled.a`
> svg {
fill: ${textColor};
color: ${textColor};
margin-left: ${remSize(16)};
}
`;
const IconLinkWrapper = styled(Link)`
width: 3rem;
margin-right: 1.25rem;
margin-left: none;
`;
const Screen = ({ children }) => (
<div className="fullscreen-preview">
{children}
@ -33,16 +85,212 @@ Screen.propTypes = {
children: PropTypes.node.isRequired
};
export default () => (
<Screen>
<Header><h1>Mobile View</h1></Header>
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
const IDEViewMobile = (props) => {
const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning
} = props;
const [tmController, setTmController] = useState(null);
return (
<Screen>
<Header>
<IconLinkWrapper to="/" aria-label="Return to original editor">
<ExitIcon />
</IconLinkWrapper>
<div>
<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</div>
</Header>
<Content>
<Editor
lintWarning={preferences.lintWarning}
linewrap={preferences.linewrap}
lintMessages={editorAccessibility.lintMessages}
updateLintMessage={updateLintMessage}
clearLintMessage={clearLintMessage}
file={selectedFile}
updateFileContent={updateFileContent}
fontSize={preferences.fontSize}
lineNumbers={preferences.lineNumbers}
files={files}
editorOptionsVisible={ide.editorOptionsVisible}
showEditorOptions={showEditorOptions}
closeEditorOptions={closeEditorOptions}
showKeyboardShortcutModal={showKeyboardShortcutModal}
setUnsavedChanges={setUnsavedChanges}
isPlaying={ide.isPlaying}
theme={preferences.theme}
startRefreshSketch={startRefreshSketch}
stopSketch={stopSketch}
autorefresh={preferences.autorefresh}
unsavedChanges={ide.unsavedChanges}
projectSavedTime={project.updatedAt}
isExpanded={ide.sidebarIsExpanded}
expandSidebar={expandSidebar}
collapseSidebar={collapseSidebar}
isUserOwner={isUserOwner(props)}
clearConsole={clearConsole}
consoleEvents={console}
showRuntimeErrorWarning={showRuntimeErrorWarning}
hideRuntimeErrorWarning={hideRuntimeErrorWarning}
runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
provideController={setTmController}
/>
</Content>
<Footer><h2>Bottom Bar</h2></Footer>
</Screen>
);
};
<h3>
<br />This page is under construction.
<br /><Link to="/">Click here</Link> to return to the regular editor
</h3>
IDEViewMobile.propTypes = {
<Footer><h1>Bottom Bar</h1></Footer>
</Screen>
);
preferences: PropTypes.shape({
fontSize: PropTypes.number.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lineNumbers: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired,
autorefresh: PropTypes.bool.isRequired
}).isRequired,
ide: PropTypes.shape({
isPlaying: PropTypes.bool.isRequired,
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
consoleEvent: PropTypes.array,
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired,
consoleIsExpanded: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
projectOptionsVisible: PropTypes.bool.isRequired,
newFolderModalVisible: PropTypes.bool.isRequired,
shareModalVisible: PropTypes.bool.isRequired,
shareModalProjectId: PropTypes.string.isRequired,
shareModalProjectName: PropTypes.string.isRequired,
shareModalProjectUsername: PropTypes.string.isRequired,
editorOptionsVisible: PropTypes.bool.isRequired,
keyboardShortcutVisible: PropTypes.bool.isRequired,
unsavedChanges: PropTypes.bool.isRequired,
infiniteLoop: PropTypes.bool.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired,
infiniteLoopMessage: PropTypes.string.isRequired,
projectSavedTime: PropTypes.string,
previousPath: PropTypes.string.isRequired,
justOpenedProject: PropTypes.bool.isRequired,
errorType: PropTypes.string,
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
uploadFileModalVisible: PropTypes.bool.isRequired
}).isRequired,
editorAccessibility: PropTypes.shape({
lintMessages: PropTypes.array.isRequired,
}).isRequired,
project: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string.isRequired,
owner: PropTypes.shape({
username: PropTypes.string,
id: PropTypes.string
}),
updatedAt: PropTypes.string
}).isRequired,
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
}).isRequired,
updateFileContent: PropTypes.func.isRequired,
files: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
})).isRequired,
closeEditorOptions: PropTypes.func.isRequired,
showEditorOptions: PropTypes.func.isRequired,
showKeyboardShortcutModal: PropTypes.func.isRequired,
setUnsavedChanges: PropTypes.func.isRequired,
startRefreshSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
expandSidebar: PropTypes.func.isRequired,
collapseSidebar: PropTypes.func.isRequired,
clearConsole: PropTypes.func.isRequired,
console: PropTypes.arrayOf(PropTypes.shape({
method: PropTypes.string.isRequired,
args: PropTypes.arrayOf(PropTypes.string)
})).isRequired,
showRuntimeErrorWarning: PropTypes.func.isRequired,
hideRuntimeErrorWarning: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
id: PropTypes.string,
username: PropTypes.string
}).isRequired,
};
function mapStateToProps(state) {
return {
files: state.files,
selectedFile: state.files.find(file => file.isSelectedFile) ||
state.files.find(file => file.name === 'sketch.js') ||
state.files.find(file => file.name !== 'root'),
htmlFile: getHTMLFile(state.files),
ide: state.ide,
preferences: state.preferences,
editorAccessibility: state.editorAccessibility,
user: state.user,
project: state.project,
toast: state.toast,
console: state.console
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
Object.assign(
{},
EditorAccessibilityActions,
FileActions,
ProjectActions,
IDEActions,
PreferencesActions,
UserActions,
ToastActions,
ConsoleActions
),
dispatch
);
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEViewMobile));

View file

@ -85,6 +85,10 @@ export default {
border: grays.middleLight,
},
},
Icon: {
default: grays.middleGray,
hover: grays.darker
}
},
[Theme.dark]: {
colors,
@ -113,6 +117,10 @@ export default {
border: grays.middleDark,
},
},
Icon: {
default: grays.middleLight,
hover: grays.lightest
}
},
[Theme.contrast]: {
colors,
@ -141,5 +149,9 @@ export default {
border: grays.middleDark,
},
},
Icon: {
default: grays.mediumLight,
hover: colors.yellow
}
},
};