diff options
author | David Rojas Camaggi <drojascamaggi@gmail.com> | 2017-06-06 09:45:36 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-06 09:45:36 -0400 |
commit | 46fc47e520efeff328db9b125c5339baac7b88e5 (patch) | |
tree | 99482c33de3b18dbbb0f0964b67ba0f898afe153 /webapp/components/sidebar_header.jsx | |
parent | 382ba0b0d18f67d473ad677f9b5151bc5e468e14 (diff) | |
download | chat-46fc47e520efeff328db9b125c5339baac7b88e5.tar.gz chat-46fc47e520efeff328db9b125c5339baac7b88e5.tar.bz2 chat-46fc47e520efeff328db9b125c5339baac7b88e5.zip |
PLT 6416 Add StatusDropdown to profile picture in top left (#6327) (#6418)
* PLT-6416 the profile picture is always shown in the top left (#6327)
* PLT-6416 Add status icon to profile picture in left sidebar (#6327)
* PLT-6416 Add StatusDropdown to profile picture in top left (#6327)
* Fixing theme stuff for status picker
* PLT-6416 Automatically close status dropdown after selection (#6327)
* PLT-6416 Avoid render status dropdown in sidebar if isMobile (#6327)
* PLT-6416 Change icon for status change to caret-down (#6327)
* PLT-6416 Update visibility of status dropdown after window size (#6327)
* PLT-6416 Refactor status dropdown for better mouse usability (#6327)
* PLT-6416 Change status dropdown to the redux way (#6327)
* PLT-6416 Fix header style of admin sidebar (#6327)
Diffstat (limited to 'webapp/components/sidebar_header.jsx')
-rw-r--r-- | webapp/components/sidebar_header.jsx | 63 |
1 files changed, 35 insertions, 28 deletions
diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx index 493864a6f..51885d152 100644 --- a/webapp/components/sidebar_header.jsx +++ b/webapp/components/sidebar_header.jsx @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import Client from 'client/web_client.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -14,57 +13,67 @@ import {Tooltip, OverlayTrigger} from 'react-bootstrap'; import {Preferences, TutorialSteps, Constants} from 'utils/constants.jsx'; import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx'; +import StatusDropdown from 'components/status_dropdown/index.jsx'; export default class SidebarHeader extends React.Component { constructor(props) { super(props); - this.toggleDropdown = this.toggleDropdown.bind(this); - this.onPreferenceChange = this.onPreferenceChange.bind(this); - this.state = this.getStateFromStores(); } componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); + window.addEventListener('resize', this.handleResize); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); + window.removeEventListener('resize', this.handleResize); + } + + handleResize = () => { + const isMobile = Utils.isMobile(); + this.setState({isMobile}); } - getStateFromStores() { + getPreferences = () => { + if (!this.props.currentUser) { + return {}; + } const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999); + const showTutorialTip = tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile(); - return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()}; + return {showTutorialTip}; } - onPreferenceChange() { - this.setState(this.getStateFromStores()); + getStateFromStores = () => { + const preferences = this.getPreferences(); + const isMobile = Utils.isMobile(); + return {...preferences, isMobile}; } - toggleDropdown(e) { + onPreferenceChange = () => { + this.setState(this.getPreferences()); + } + + toggleDropdown = (e) => { e.preventDefault(); this.refs.dropdown.toggleDropdown(); } - render() { - var me = this.props.currentUser; - var profilePicture = null; - - if (!me) { + renderStatusDropdown = () => { + if (this.state.isMobile) { return null; } + return ( + <StatusDropdown/> + ); + } - if (me.last_picture_update) { - profilePicture = ( - <img - className='user__picture' - src={Client.getUsersRoute() + '/' + me.id + '/image?time=' + me.last_picture_update} - /> - ); - } + render() { + const statusDropdown = this.renderStatusDropdown(); let tutorialTip = null; if (this.state.showTutorialTip) { @@ -93,12 +102,9 @@ export default class SidebarHeader extends React.Component { return ( <div className='team__header theme'> {tutorialTip} - <div> - {profilePicture} - <div className='header__info'> - <div className='user__name'>{'@' + me.username}</div> - {teamNameWithToolTip} - </div> + <div className='header__info'> + <div className='user__name'>{'@' + this.props.currentUser.username}</div> + {teamNameWithToolTip} </div> <SidebarHeaderDropdown ref='dropdown' @@ -107,6 +113,7 @@ export default class SidebarHeader extends React.Component { teamName={this.props.teamName} currentUser={this.props.currentUser} /> + {statusDropdown} </div> ); } |