From 32efc402983b4a8f6d14adfd95a7e7dd58981e60 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:19:06 -0300 Subject: [PATCH 1/6] :sparkles: make login/logout options on dropdown --- client/components/Dropdown.jsx | 16 ++++++++++------ client/components/mobile/IconButton.jsx | 8 ++++++-- client/modules/App/App.jsx | 2 +- client/modules/IDE/pages/MobileIDEView.jsx | 10 +++++++--- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index bd2169b8..5da1fe70 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -58,23 +58,27 @@ const DropdownWrapper = styled.ul` `; // TODO: Add Icon to the left of the items in the menu -// const MaybeIcon = (Element, label) => Element && ; +const MaybeIcon = (Element, label) => Element && ; const Dropdown = ({ items, align }) => ( {/* className="nav__items-left" */} - {items && items.map(({ title, icon, href }) => ( + {items && items.map(({ + title, icon, href, action + }) => (
  • - - {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} - {title} - + {MaybeIcon(icon, `Navigate to ${title}`)} + {href + ? {title} + : action()}>{title}} +
    • )) }     ); + Dropdown.propTypes = { align: PropTypes.oneOf(['left', 'right']), items: PropTypes.arrayOf(PropTypes.shape({ diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 08f05311..7085f8a1 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -17,7 +17,7 @@ const IconButton = (props) => { const Icon = icon; return (} + iconBefore={icon && } kind={Button.kinds.inline} focusable="false" {...otherProps} @@ -25,7 +25,11 @@ const IconButton = (props) => { }; IconButton.propTypes = { - icon: PropTypes.func.isRequired + icon: PropTypes.func +}; + +IconButton.defaultProps = { + icon: null }; export default IconButton; diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..2c960b8b 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,7 @@ class App extends React.Component { render() { return (
    - {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index c33c6cda..c2a408cf 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -46,18 +46,20 @@ const NavItem = styled.li` position: relative; `; -const getNatOptions = (username = undefined) => +const getNavOptions = (username = undefined, logoutUser = () => {}) => (username ? [ { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Logout', action: logoutUser, }, ] : [ { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Login', href: '/login', }, ] ); @@ -65,7 +67,7 @@ const MobileIDEView = (props) => { const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, user, params, - closeEditorOptions, showEditorOptions, + closeEditorOptions, showEditorOptions, logoutUser, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState } = props; @@ -75,7 +77,7 @@ const MobileIDEView = (props) => { const { username } = user; const [triggerNavDropdown, NavDropDown] = useAsModal(); @@ -267,6 +269,8 @@ MobileIDEView.propTypes = { username: PropTypes.string, }).isRequired, + logoutUser: PropTypes.func.isRequired, + getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, params: PropTypes.shape({ From 589bdd5a11f9fa813f580d5959b3ac279ecd40a4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:25:41 -0300 Subject: [PATCH 2/6] :lipstick: update styling for dropdown with component --- client/components/Dropdown.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 5da1fe70..b0dfe0b2 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul` background-color: ${prop('Button.hover.background')}; color: ${prop('Button.hover.foreground')}; - & button, & a { - color: ${prop('Button.hover.foreground')}; - } + * { color: ${prop('Button.hover.foreground')}; } } li { @@ -48,17 +46,21 @@ const DropdownWrapper = styled.ul` align-items: center; & button, + & button span, & a { color: ${prop('primaryTextColor')}; width: 100%; text-align: left; + justify-content: left; padding: ${remSize(8)} ${remSize(16)}; } + + & button span { padding: 0px } } `; // TODO: Add Icon to the left of the items in the menu -const MaybeIcon = (Element, label) => Element && ; +// const MaybeIcon = (Element, label) => Element && ; const Dropdown = ({ items, align }) => ( @@ -67,7 +69,7 @@ const Dropdown = ({ items, align }) => ( title, icon, href, action }) => (
  • - {MaybeIcon(icon, `Navigate to ${title}`)} + {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} {href ? {title} : action()}>{title}} From 114ab9f6c72160ae7305e0047c561effef1f9ff3 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 09:34:09 -0300 Subject: [PATCH 3/6] :lipstick: left-align dropdown elements --- client/components/Dropdown.jsx | 11 ++++++++--- client/modules/App/App.jsx | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index b0dfe0b2..e29da90a 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -48,11 +48,16 @@ const DropdownWrapper = styled.ul` & button, & button span, & a { - color: ${prop('primaryTextColor')}; - width: 100%; + padding: ${remSize(8)} ${remSize(16)}; + } + + * { text-align: left; justify-content: left; - padding: ${remSize(8)} ${remSize(16)}; + + color: ${prop('primaryTextColor')}; + width: 100%; + justify-content: flex-start; } & button span { padding: 0px } diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 2c960b8b..af441a9d 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,7 @@ class App extends React.Component { render() { return (
    - {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); From e44c1aa7e20aebde790d968ca6d96848a303d370 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 15:09:50 -0300 Subject: [PATCH 4/6] :ok_hand: adapt and to mobile --- client/modules/App/App.jsx | 2 +- .../User/components/ResponsiveForm.jsx | 59 +++++++++++++++++++ client/modules/User/pages/LoginView.jsx | 59 +++++++++++-------- client/modules/User/pages/SignupView.jsx | 51 +++++++++------- 4 files changed, 122 insertions(+), 49 deletions(-) create mode 100644 client/modules/User/components/ResponsiveForm.jsx diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 3b74e1fc..089d80f7 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -41,7 +41,7 @@ class App extends React.Component { render() { return (
    - {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx new file mode 100644 index 00000000..f0fd0ba7 --- /dev/null +++ b/client/modules/User/components/ResponsiveForm.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { remSize } from '../../../theme'; + + +const ResponsiveFormWrapper = styled.div` + .form-container__content { + width: unset !important; + padding-top: ${remSize(16)}; + padding-bottom: ${remSize(64)}; + } + + .form__input { + min-width: unset; + padding: 0px ${remSize(12)}; + height: ${remSize(28)}; + } + .form-container__title { margin-bottom: ${remSize(14)}} + p.form__field { margin-top: 0px !important; } + label.form__label { margin-top: ${remSize(8)} !important; } + + .form-error { width: 100% } + + .nav__items-right:last-child { display: none } + + .form-container { + height: 100% + } + + .form-container__stack { + svg { + width: ${remSize(12)}; + height: ${remSize(12)} + } + a { padding: 0px } + } +`; + +const ResponsiveForm = props => + (props.mobile === true + ? ( + + {props.children} + + + ) + : props.children); + +ResponsiveForm.propTypes = { + mobile: PropTypes.bool, + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]), +}; +ResponsiveForm.defaultProps = { + mobile: false, + children: [] +}; + +export default ResponsiveForm; diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx index 20b48b17..cdd2b97f 100644 --- a/client/modules/User/pages/LoginView.jsx +++ b/client/modules/User/pages/LoginView.jsx @@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm'; import { validateLogin } from '../../../utils/reduxFormUtils'; import SocialAuthButton from '../components/SocialAuthButton'; import Nav from '../../../components/Nav'; +import ResponsiveForm from '../components/ResponsiveForm'; class LoginView extends React.Component { constructor(props) { @@ -27,36 +28,40 @@ class LoginView extends React.Component { } render() { + const isMobile = () => (window.innerWidth < 770); if (this.props.user.authenticated) { this.gotoHomePage(); return null; } + // TODO: mobile currently forced to true return ( -
    -
    + + + ); } } @@ -79,13 +84,15 @@ LoginView.propTypes = { user: PropTypes.shape({ authenticated: PropTypes.bool }), - t: PropTypes.func.isRequired + t: PropTypes.func.isRequired, + mobile: PropTypes.bool }; LoginView.defaultProps = { user: { authenticated: false - } + }, + mobile: false }; export default withTranslation()(reduxForm({ diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx index b646a405..4cebe88c 100644 --- a/client/modules/User/pages/SignupView.jsx +++ b/client/modules/User/pages/SignupView.jsx @@ -11,6 +11,9 @@ import apiClient from '../../../utils/apiClient'; import { validateSignup } from '../../../utils/reduxFormUtils'; import SocialAuthButton from '../components/SocialAuthButton'; import Nav from '../../../components/Nav'; +import ResponsiveForm from '../components/ResponsiveForm'; + +const isMobile = () => (window.innerWidth < 770); class SignupView extends React.Component { gotoHomePage = () => { @@ -23,27 +26,29 @@ class SignupView extends React.Component { return null; } return ( -
    -
    + + + ); } } @@ -110,13 +115,15 @@ SignupView.propTypes = { user: PropTypes.shape({ authenticated: PropTypes.bool }), - t: PropTypes.func.isRequired + t: PropTypes.func.isRequired, + mobile: PropTypes.bool }; SignupView.defaultProps = { user: { authenticated: false - } + }, + mobile: false }; export default withTranslation()(reduxForm({ From 2169a6ec7f21c203056e1ed8ba2c5b833429ad72 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 15:22:08 -0300 Subject: [PATCH 5/6] :ok_hand: restore sidebar --- client/modules/App/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 089d80f7..3b74e1fc 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -41,7 +41,7 @@ class App extends React.Component { render() { return (
    - {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); From ee256b0607380909d11f82c5c4d5d606759e72e0 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 16:28:04 -0300 Subject: [PATCH 6/6] :ok_hand: right-align dropdown so it doesn't render off-screen --- client/modules/User/components/ResponsiveForm.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx index f0fd0ba7..a63cfb02 100644 --- a/client/modules/User/components/ResponsiveForm.jsx +++ b/client/modules/User/components/ResponsiveForm.jsx @@ -28,6 +28,11 @@ const ResponsiveFormWrapper = styled.div` height: 100% } + .nav__dropdown { + right: 0 !important; + left: unset !important; + } + .form-container__stack { svg { width: ${remSize(12)};