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))
?
: )}
);