Skip to content

Commit d126821

Browse files
ghalestriloghalestrilo
authored
Merge pull request #1564 from ghalestrilo/feature/switch-mobile-desktop
Feature/switch mobile desktop
2 parents 017dd2c + 8b619c6 commit d126821

18 files changed

+152
-123
lines changed

‎client/components/Dropdown.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ Dropdown.propTypes = {
9191
items: PropTypes.arrayOf(PropTypes.shape({
9292
action: PropTypes.func,
9393
icon: PropTypes.func,
94-
href: PropTypes.string
94+
href: PropTypes.string,
95+
title: PropTypes.string
9596
})),
9697
};
9798

‎client/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
6262

6363
export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
6464
export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
65+
export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
6566

6667
export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
6768
export const DELETE_FILE = 'DELETE_FILE';

‎client/modules/IDE/actions/editorAccessibility.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,9 @@ export function clearLintMessage() {
1414
type: ActionTypes.CLEAR_LINT_MESSAGE
1515
};
1616
}
17+
18+
export function toggleForceDesktop() {
19+
return {
20+
type: ActionTypes.TOGGLE_FORCE_DESKTOP
21+
};
22+
}

‎client/modules/IDE/components/SketchList.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,6 @@ class SketchListRowBase extends React.Component {
263263
url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
264264
}
265265

266-
if (this.props.mobile) url = `/mobile${url}`;
267-
268266
const name = (
269267
<React.Fragment>
270268
<Link to={url}>

‎client/modules/IDE/pages/MobileIDEView.jsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,19 @@ const NavItem = styled.li`
6363
position: relative;
6464
`;
6565

66-
const getNavOptions = (username = undefined, logoutUser = () => {}) =>
66+
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
6767
(username
6868
? [
69-
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
70-
{ icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
71-
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
72-
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
69+
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
70+
{ icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
71+
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
72+
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
7373
{ icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
7474
]
7575
: [
76-
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
77-
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
78-
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
76+
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
77+
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
78+
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
7979
{ icon: PreferencesIcon, title: 'Login', href: '/login', },
8080
]
8181
);
@@ -86,7 +86,8 @@ const MobileIDEView = (props) => {
8686
selectedFile, updateFileContent, files, user, params,
8787
closeEditorOptions, showEditorOptions, logoutUser,
8888
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
89-
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges
89+
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
90+
toggleForceDesktop
9091
} = props;
9192

9293
const [tmController, setTmController] = useState(null); // eslint-disable-line
@@ -112,7 +113,7 @@ const MobileIDEView = (props) => {
112113

113114
// Screen Modals
114115
const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
115-
items={getNavOptions(username, logoutUser)}
116+
items={getNavOptions(username, logoutUser, toggleForceDesktop)}
116117
align="right"
117118
/>);
118119

@@ -131,6 +132,7 @@ const MobileIDEView = (props) => {
131132
subtitle={selectedFile.name}
132133
>
133134
<NavItem>
135+
134136
<IconButton
135137
onClick={toggleNavDropdown}
136138
icon={MoreIcon}
@@ -139,7 +141,7 @@ const MobileIDEView = (props) => {
139141
<NavDropDown />
140142
</NavItem>
141143
<li>
142-
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
144+
<IconButton to="/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
143145
</li>
144146
</Header>
145147

@@ -289,6 +291,7 @@ MobileIDEView.propTypes = {
289291
showRuntimeErrorWarning: PropTypes.func.isRequired,
290292

291293
hideRuntimeErrorWarning: PropTypes.func.isRequired,
294+
toggleForceDesktop: PropTypes.func.isRequired,
292295

293296
user: PropTypes.shape({
294297
authenticated: PropTypes.bool.isRequired,

‎client/modules/IDE/reducers/editorAccessibility.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as ActionTypes from '../../../constants';
22

33
const initialState = {
4-
lintMessages: []
4+
lintMessages: [],
5+
forceDesktop: false
56
};
67
let messageId = 0;
78

@@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => {
1617
});
1718
case ActionTypes.CLEAR_LINT_MESSAGE:
1819
return Object.assign({}, state, { lintMessages: [] });
20+
case ActionTypes.TOGGLE_FORCE_DESKTOP:
21+
return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
1922
default:
2023
return state;
2124
}

‎client/modules/Mobile/MobileDashboardView.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ const Panels = {
138138

139139

140140
const navOptions = username => [
141-
{ title: 'Create Sketch', href: '/mobile' },
142-
{ title: 'Create Collection', href: `/mobile/${username}/collections/create` }
141+
{ title: 'Create Sketch', href: '/' },
142+
{ title: 'Create Collection', href: `/${username}/collections/create` }
143143
];
144144

145145

@@ -185,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
185185
<NavDropdown />
186186

187187
</NavItem>
188-
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
188+
<IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
189189
</Header>
190190

191191

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const MobilePreferences = () => {
6969
<Screen fullscreen>
7070
<section>
7171
<Header transparent title="Preferences">
72-
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
72+
<IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
7373
</Header>
7474
<section className="preferences">
7575
<Content>

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const MobileSketchView = () => {
3939
return (
4040
<Screen fullscreen>
4141
<Header
42-
leftButton={<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />}
42+
leftButton={<IconButton to="/" icon={ExitIcon} aria-label="Return to original editor" />}
4343
title={projectName}
4444
/>
4545
<Content>

‎client/modules/User/components/ResponsiveForm.jsx

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
44
import { remSize } from '../../../theme';
55

66

7-
const ResponsiveFormWrapper = styled.div`
7+
const ResponsiveForm = styled.div`
88
.form-container__content {
99
width: unset !important;
1010
padding-top: ${remSize(16)};
@@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
4242
}
4343
`;
4444

45-
const ResponsiveForm = props =>
46-
(props.mobile === true
47-
? (
48-
<ResponsiveFormWrapper>
49-
{props.children}
50-
</ResponsiveFormWrapper>
51-
52-
)
53-
: props.children);
54-
55-
ResponsiveForm.propTypes = {
56-
mobile: PropTypes.bool,
57-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
58-
};
59-
ResponsiveForm.defaultProps = {
60-
mobile: false,
61-
children: []
62-
};
63-
6445
export default ResponsiveForm;

‎client/modules/User/pages/LoginView.jsx

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,36 @@ class LoginView extends React.Component {
2828
}
2929

3030
render() {
31-
const isMobile = () => (window.innerWidth < 770);
3231
if (this.props.user.authenticated) {
3332
this.gotoHomePage();
3433
return null;
3534
}
36-
// TODO: mobile currently forced to true
3735
return (
38-
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
39-
<div className="login">
40-
<Nav layout="dashboard" />
41-
<main className="form-container">
42-
<Helmet>
43-
<title>{this.props.t('LoginView.Title')}</title>
44-
</Helmet>
45-
<div className="form-container__content">
46-
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
47-
<LoginForm {...this.props} />
48-
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
49-
<div className="form-container__stack">
50-
<SocialAuthButton service={SocialAuthButton.services.github} />
51-
<SocialAuthButton service={SocialAuthButton.services.google} />
52-
</div>
53-
<p className="form__navigation-options">
54-
{this.props.t('LoginView.DontHaveAccount')}
55-
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
56-
</p>
57-
<p className="form__navigation-options">
58-
{this.props.t('LoginView.ForgotPassword')}
59-
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
60-
</p>
36+
<div className="login">
37+
<Nav layout="dashboard" />
38+
<main className="form-container">
39+
<Helmet>
40+
<title>{this.props.t('LoginView.Title')}</title>
41+
</Helmet>
42+
<div className="form-container__content">
43+
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
44+
<LoginForm {...this.props} />
45+
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
46+
<div className="form-container__stack">
47+
<SocialAuthButton service={SocialAuthButton.services.github} />
48+
<SocialAuthButton service={SocialAuthButton.services.google} />
6149
</div>
62-
</main>
63-
</div>
64-
</ResponsiveForm>
50+
<p className="form__navigation-options">
51+
{this.props.t('LoginView.DontHaveAccount')}
52+
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
53+
</p>
54+
<p className="form__navigation-options">
55+
{this.props.t('LoginView.ForgotPassword')}
56+
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
57+
</p>
58+
</div>
59+
</main>
60+
</div>
6561
);
6662
}
6763
}
@@ -85,14 +81,12 @@ LoginView.propTypes = {
8581
authenticated: PropTypes.bool
8682
}),
8783
t: PropTypes.func.isRequired,
88-
mobile: PropTypes.bool
8984
};
9085

9186
LoginView.defaultProps = {
9287
user: {
9388
authenticated: false
9489
},
95-
mobile: false
9690
};
9791

9892
export default withTranslation()(reduxForm({

‎client/modules/User/pages/SignupView.jsx

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import SocialAuthButton from '../components/SocialAuthButton';
1313
import Nav from '../../../components/Nav';
1414
import ResponsiveForm from '../components/ResponsiveForm';
1515

16-
const isMobile = () => (window.innerWidth < 770);
1716

1817
class SignupView extends React.Component {
1918
gotoHomePage = () => {
@@ -26,29 +25,27 @@ class SignupView extends React.Component {
2625
return null;
2726
}
2827
return (
29-
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
30-
<div className="signup">
31-
<Nav layout="dashboard" />
32-
<main className="form-container">
33-
<Helmet>
34-
<title>{this.props.t('SignupView.Title')}</title>
35-
</Helmet>
36-
<div className="form-container__content">
37-
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
38-
<SignupForm {...this.props} />
39-
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
40-
<div className="form-container__stack">
41-
<SocialAuthButton service={SocialAuthButton.services.github} />
42-
<SocialAuthButton service={SocialAuthButton.services.google} />
43-
</div>
44-
<p className="form__navigation-options">
45-
{this.props.t('SignupView.AlreadyHave')}
46-
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
47-
</p>
28+
<div className="signup">
29+
<Nav layout="dashboard" />
30+
<main className="form-container">
31+
<Helmet>
32+
<title>{this.props.t('SignupView.Title')}</title>
33+
</Helmet>
34+
<div className="form-container__content">
35+
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
36+
<SignupForm {...this.props} />
37+
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
38+
<div className="form-container__stack">
39+
<SocialAuthButton service={SocialAuthButton.services.github} />
40+
<SocialAuthButton service={SocialAuthButton.services.google} />
4841
</div>
49-
</main>
50-
</div>
51-
</ResponsiveForm>
42+
<p className="form__navigation-options">
43+
{this.props.t('SignupView.AlreadyHave')}
44+
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
45+
</p>
46+
</div>
47+
</main>
48+
</div>
5249
);
5350
}
5451
}
@@ -116,14 +113,12 @@ SignupView.propTypes = {
116113
authenticated: PropTypes.bool
117114
}),
118115
t: PropTypes.func.isRequired,
119-
mobile: PropTypes.bool
120116
};
121117

122118
SignupView.defaultProps = {
123119
user: {
124120
authenticated: false
125121
},
126-
mobile: false
127122
};
128123

129124
export default withTranslation()(reduxForm({

0 commit comments

Comments
 (0)