diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx index 66a72c94..06f18895 100644 --- a/client/common/Icons.jsx +++ b/client/common/Icons.jsx @@ -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 (); } - return ( { + 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 (); } - return ( 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 }) => (
{children} @@ -33,16 +85,212 @@ Screen.propTypes = { children: PropTypes.node.isRequired }; -export default () => ( - -

Mobile View

+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 ( + +
+ + + +
+

{project.name}

+

{selectedFile.name}

+
+
+ + + + +

Bottom Bar

+ + ); +}; -

-
This page is under construction. -
Click here to return to the regular editor -

+IDEViewMobile.propTypes = { - - -); + 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)); diff --git a/client/theme.js b/client/theme.js index 5215dd99..561fd835 100644 --- a/client/theme.js +++ b/client/theme.js @@ -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 + } }, };