diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 48bed0cb..40237a52 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -80,7 +80,8 @@ Dropdown.propTypes = { items: PropTypes.arrayOf(PropTypes.shape({ action: PropTypes.func, icon: PropTypes.func, - href: PropTypes.string + href: PropTypes.string, + title: PropTypes.string })), }; diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 62d155e1..85c26c35 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -63,13 +63,13 @@ const NavItem = styled.li` position: relative; `; -const getNavOptions = (username = undefined) => +const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) => (username ? [ { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` }, { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, - { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, }, ] : [ { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, @@ -84,7 +84,8 @@ const MobileIDEView = (props) => { selectedFile, updateFileContent, files, user, params, closeEditorOptions, showEditorOptions, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, - showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges + showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges, + toggleForceDesktop } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line @@ -110,7 +111,7 @@ const MobileIDEView = (props) => { // Screen Modals const [toggleNavDropdown, NavDropDown] = useAsModal(); @@ -287,6 +288,7 @@ MobileIDEView.propTypes = { showRuntimeErrorWarning: PropTypes.func.isRequired, hideRuntimeErrorWarning: PropTypes.func.isRequired, + toggleForceDesktop: PropTypes.func.isRequired, user: PropTypes.shape({ authenticated: PropTypes.bool.isRequired, diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js index d86dbede..d10fe667 100644 --- a/client/modules/IDE/reducers/editorAccessibility.js +++ b/client/modules/IDE/reducers/editorAccessibility.js @@ -1,7 +1,8 @@ import * as ActionTypes from '../../../constants'; const initialState = { - lintMessages: [] + lintMessages: [], + forceDesktop: false }; let messageId = 0; @@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => { }); case ActionTypes.CLEAR_LINT_MESSAGE: return Object.assign({}, state, { lintMessages: [] }); + case ActionTypes.TOGGLE_FORCE_DESKTOP: + return { ...state, forceDesktop: !state.forceDesktop }; default: return state; } diff --git a/client/routes.jsx b/client/routes.jsx index bf6f7f15..e25fbc06 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -27,9 +27,9 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; -const mobileFirst = (MobileComponent, Fallback) => props => ( +const mobileFirst = (MobileComponent, Fallback, store) => props => ( - {matches => (matches + {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop)) ? : )} );