From 796ad7b152ef01c90995c77b05b347e1da23ede0 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Sun, 12 Aug 2018 13:09:29 -0400 Subject: [PATCH 1/3] split account nav into its own component --- src/components/navigation/www/accountnav.jsx | 101 +++++++++++++++++++ src/components/navigation/www/navigation.jsx | 79 ++++----------- 2 files changed, 119 insertions(+), 61 deletions(-) create mode 100644 src/components/navigation/www/accountnav.jsx diff --git a/src/components/navigation/www/accountnav.jsx b/src/components/navigation/www/accountnav.jsx new file mode 100644 index 000000000..1f8c8cc9d --- /dev/null +++ b/src/components/navigation/www/accountnav.jsx @@ -0,0 +1,101 @@ +const classNames = require('classnames'); +const FormattedMessage = require('react-intl').FormattedMessage; +const injectIntl = require('react-intl').injectIntl; +const PropTypes = require('prop-types'); +const React = require('react'); + +const Avatar = require('../../avatar/avatar.jsx'); +const Dropdown = require('../../dropdown/dropdown.jsx'); + +require('./navigation.scss'); + +const AccountNav = ({ + classroomId, + isEducator, + isOpen, + isStudent, + profileUrl, + thumbnailUrl, + username, + onClick, + onClickLogout, + onClose +}) => ( + + + + + {username} + + + +
  • + + + +
    • +
  • + + + +
    • + {isEducator ? [ +
  • + + + +
    • + ] : []} + {isStudent ? [ +
  • + + + +
    • + ] : []} +
  • + + + +
    • +
  • + + + +
    • +     +     +); + +AccountNav.propTypes = { + classroomId: PropTypes.string, + isEducator: PropTypes.bool, + isOpen: PropTypes.bool, + isStudent: PropTypes.bool, + onClick: PropTypes.func, + onClickLogout: PropTypes.func, + onClose: PropTypes.func, + profileUrl: PropTypes.string, + thumbnailUrl: PropTypes.string, + username: PropTypes.string +}; + +module.exports = injectIntl(AccountNav); diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx index 1a0fedb9f..78de52873 100644 --- a/src/components/navigation/www/navigation.jsx +++ b/src/components/navigation/www/navigation.jsx @@ -11,7 +11,6 @@ const messageCountActions = require('../../../redux/message-count.js'); const sessionActions = require('../../../redux/session.js'); const api = require('../../../lib/api'); -const Avatar = require('../../avatar/avatar.jsx'); const Button = require('../../forms/button.jsx'); const Dropdown = require('../../dropdown/dropdown.jsx'); const Form = require('../../forms/form.jsx'); @@ -21,6 +20,7 @@ const Login = require('../../login/login.jsx'); const Modal = require('../../modal/base/modal.jsx'); const NavigationBox = require('../base/navigation.jsx'); const Registration = require('../../registration/registration.jsx'); +const AccountNav = require('./accountnav.jsx'); require('./navigation.scss'); @@ -268,66 +268,18 @@ class Navigation extends React.Component { className="link right account-nav" key="account-nav" > - - - - {this.props.session.session.user.username} - - - -
  • - - - -
    • -
  • - - - -
    • - {this.props.permissions.educator ? [ -
  • - - - -
    • - ] : []} - {this.props.permissions.student ? [ -
  • - - - -
    • - ] : []} -
  • - - - -
    • -
  • - - - -
    • -     + isStudent={this.props.permissions.student} + profileUrl={this.getProfileUrl()} + thumbnailUrl={this.props.session.session.user.thumbnailUrl} + username={this.props.session.session.user.username} + onClick={this.handleAccountNavClick} + onClickLogout={this.handleLogOut} + onClose={this.handleCloseAccountNav} + /> ] : [
  • ({ searchTerm: state.navigation }); -const ConnectedNavigation = connect(mapStateToProps)(Navigation); +const mapDispatchToProps = () => ({}); + +const ConnectedNavigation = connect( + mapStateToProps, + mapDispatchToProps +)(Navigation); module.exports = injectIntl(ConnectedNavigation); From 733134c4212850a727249e980b2b97fed415081b Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 24 Aug 2018 18:04:57 -0400 Subject: [PATCH 2/3] pass through logout callback to GUI --- src/components/navigation/www/accountnav.jsx | 6 +- src/components/navigation/www/accountnav.scss | 91 +++++++++++++++++++ src/components/navigation/www/navigation.jsx | 2 + src/components/navigation/www/navigation.scss | 69 -------------- src/views/preview/preview.jsx | 20 +++- 5 files changed, 115 insertions(+), 73 deletions(-) create mode 100644 src/components/navigation/www/accountnav.scss diff --git a/src/components/navigation/www/accountnav.jsx b/src/components/navigation/www/accountnav.jsx index 1f8c8cc9d..70e90f6fd 100644 --- a/src/components/navigation/www/accountnav.jsx +++ b/src/components/navigation/www/accountnav.jsx @@ -7,7 +7,7 @@ const React = require('react'); const Avatar = require('../../avatar/avatar.jsx'); const Dropdown = require('../../dropdown/dropdown.jsx'); -require('./navigation.scss'); +require('./accountnav.scss'); const AccountNav = ({ classroomId, @@ -21,7 +21,7 @@ const AccountNav = ({ onClickLogout, onClose }) => ( - +
    • - + ); AccountNav.propTypes = { diff --git a/src/components/navigation/www/accountnav.scss b/src/components/navigation/www/accountnav.scss new file mode 100644 index 000000000..ffa0e1a11 --- /dev/null +++ b/src/components/navigation/www/accountnav.scss @@ -0,0 +1,91 @@ +@import "../../../colors"; +@import "../../../frameless"; + +#account-nav { + .user-info { + display: inline-block; + padding: 14px 15px 4px 15px; + max-width: 260px; + height: 33px; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + color: $type-white; + font-size: .8125rem; + font-weight: normal; + + .avatar { + margin-right: 10px; + border-radius: 3px; + width: 24px; + height: 24px; + vertical-align: middle; + } + + &:hover { + background-color: $active-gray; + } + + &.open { + background-color: $active-gray; + } + + &:after { + display: inline-block; + margin-left: 8px; + + background-image: url("/images/dropdown.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 50%; + width: 20px; + height: 20px; + vertical-align: middle; + content: " "; + } + } + + .dropdown { + top: 50px; + padding: 0; + padding-top: 5px; + width: 100%; + box-sizing: border-box; + } +} + +//4 columns +@media only screen and (max-width: $mobile - 1) { + #account-nav { + .user-info { + .avatar { + margin-right: 0; + } + + &:after { + display: none; + } + } + } +} + + +//6 columns +@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + #account-nav { + .user-info { + .avatar { + margin-right: 0; + } + + &:after { + display: none; + } + } + } +} + +//8 columns +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { +} diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx index 78de52873..4eb2c26e9 100644 --- a/src/components/navigation/www/navigation.jsx +++ b/src/components/navigation/www/navigation.jsx @@ -113,6 +113,8 @@ class Navigation extends React.Component { handleCloseLogin () { this.setState({loginOpen: false}); } + // NOTE: TODO: continue here. Should move these two functions up to a redux level, + // maybe into session... handleLogIn (formData, callback) { this.setState({loginError: null}); formData.useMessages = true; diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss index cfa5a72c1..c867750be 100644 --- a/src/components/navigation/www/navigation.scss +++ b/src/components/navigation/www/navigation.scss @@ -182,55 +182,6 @@ } } } - - .account-nav { - .user-info { - padding-top: 14px; - max-width: 260px; - } - - > a { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - font-size: .8125rem; - font-weight: normal; - - .avatar { - margin-right: 10px; - border-radius: 3px; - width: 24px; - height: 24px; - vertical-align: middle; - } - - &.open { - background-color: $active-gray; - } - - &:after { - display: inline-block; - margin-left: 8px; - - background-image: url("/images/dropdown.png"); - background-repeat: no-repeat; - background-position: center center; - background-size: 50%; - width: 20px; - height: 20px; - vertical-align: middle; - content: " "; - } - } - - .dropdown { - top: 50px; - padding: 0; - padding-top: 5px; - width: 100%; - box-sizing: border-box; - } - } } //4 columns @@ -245,16 +196,6 @@ &.account-nav { margin-left: 0; - - > a { - .avatar { - margin-right: 0; - } - - &:after { - display: none; - } - } } } @@ -283,16 +224,6 @@ &.account-nav { margin-left: 0; - - > a { - .avatar { - margin-right: 0; - } - - &:after { - display: none; - } - } } } diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx index d221c2513..a9bb1275e 100644 --- a/src/views/preview/preview.jsx +++ b/src/views/preview/preview.jsx @@ -8,6 +8,7 @@ const connect = require('react-redux').connect; const injectIntl = require('react-intl').injectIntl; const parser = require('scratch-parser'); const Page = require('../../components/page/www/page.jsx'); +const api = require('../../lib/api'); const render = require('../../lib/render.jsx'); const storage = require('../../lib/storage.js').default; const log = require('../../lib/log'); @@ -30,6 +31,8 @@ class Preview extends React.Component { 'handleToggleStudio', 'handleFavoriteToggle', 'handleLoadMore', + // temporary, to pass to GUI. Remove when nav bar components are shared between www and gui. + 'handleLogout', 'handleLoveToggle', 'handlePermissions', 'handlePopState', @@ -141,6 +144,21 @@ class Preview extends React.Component { }); }); } + // Temporarily duplicated this function from navigation.jsx here. + // Should move handling of login/logout into session.js, and handle them + // from here as well as navigation.jsx. + handleLogout (e) { + e.preventDefault(); + api({ + host: '', + method: 'post', + uri: '/accounts/logout/', + useCsrf: true + }, err => { + if (err) log.error(err); + window.location = '/'; + }); + } handleReportClick () { this.setState({reportOpen: true}); } @@ -315,7 +333,6 @@ class Preview extends React.Component { replies={this.props.replies} reportOpen={this.state.reportOpen} studios={this.props.studios} - user={this.props.user} userOwnsProject={this.userOwnsProject()} onAddToStudioClicked={this.handleAddToStudioClick} onAddToStudioClosed={this.handleAddToStudioClose} @@ -339,6 +356,7 @@ class Preview extends React.Component { className="gui" projectHost={this.props.projectHost} projectId={this.state.projectId} + onClickLogout={this.handleLogout} /> ); } From f9003077a3f4131a212696c826fa04357388244b Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 4 Sep 2018 17:15:52 -0400 Subject: [PATCH 3/3] use account-nav class, not account-nav id --- src/components/navigation/www/accountnav.jsx | 2 +- src/components/navigation/www/accountnav.scss | 13 ++++++++++--- src/components/navigation/www/navigation.scss | 11 +---------- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/navigation/www/accountnav.jsx b/src/components/navigation/www/accountnav.jsx index 70e90f6fd..a0d441626 100644 --- a/src/components/navigation/www/accountnav.jsx +++ b/src/components/navigation/www/accountnav.jsx @@ -21,7 +21,7 @@ const AccountNav = ({ onClickLogout, onClose }) => ( -
    +
    ul > li { - &.login-item, - &.account-nav { + &.login-item { margin-left: 0; } }