Merge pull request #1459 from ghalestrilo/feature/mobile-ide
Add Editor component to the Mobile IDE View
This commit is contained in:
Cassie Tarakajian
GitHub
commit
ca4502dae9
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue