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} /> ); }