From 5aaedb9663b987caf1fb11ea6062bcc44e6bafca Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Wed, 31 May 2017 16:51:42 -0400 Subject: PLT-5699 Improvements to channel switcher (#6486) * Refactor channel switcher to not wait on server results * Change channel switcher to quick switcher and include team switching * Add sections, update ordering and add discoverability button * Fix styling error * Use CMD in text if on mac * Clean yarn cache on every install * Various UX updates per feedback * Add shortcut help text for team switcher * Couple more updates per feedback * Some minor fixes for GM and autocomplete race * Updating UI for channel switcher (#6504) * Updating channel switcher button (#6506) * Updating switcher modal on mobile (#6507) * Removed jQuery usage * Rename function to toggleQuickSwitchModal --- webapp/components/navbar.jsx | 58 +++++++++++++++++++++++++++++++------------- 1 file changed, 41 insertions(+), 17 deletions(-) (limited to 'webapp/components/navbar.jsx') diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index d06b2dd57..948649b45 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -21,8 +21,9 @@ import ChannelStore from 'stores/channel_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import SearchStore from 'stores/search_store.jsx'; +import ModalStore from 'stores/modal_store.jsx'; -import ChannelSwitchModal from './channel_switch_modal.jsx'; +import QuickSwitchModal from 'components/quick_switch_modal'; import * as Utils from 'utils/utils.jsx'; import * as ChannelUtils from 'utils/channel_utils.jsx'; @@ -44,6 +45,8 @@ import {Link} from 'react-router/es6'; import PropTypes from 'prop-types'; import React from 'react'; +import store from 'stores/redux_store.jsx'; +import {getMyTeams} from 'mattermost-redux/selectors/entities/teams'; export default class Navbar extends React.Component { constructor(props) { @@ -64,8 +67,9 @@ export default class Navbar extends React.Component { this.showMembersModal = this.showMembersModal.bind(this); this.hideMembersModal = this.hideMembersModal.bind(this); - this.showChannelSwitchModal = this.showChannelSwitchModal.bind(this); - this.hideChannelSwitchModal = this.hideChannelSwitchModal.bind(this); + this.toggleQuickSwitchModal = this.toggleQuickSwitchModal.bind(this); + this.hideQuickSwitchModal = this.hideQuickSwitchModal.bind(this); + this.handleQuickSwitchKeyPress = this.handleQuickSwitchKeyPress.bind(this); this.openDirectMessageModal = this.openDirectMessageModal.bind(this); this.getPinnedPosts = this.getPinnedPosts.bind(this); @@ -78,7 +82,8 @@ export default class Navbar extends React.Component { state.showEditChannelHeaderModal = false; state.showMembersModal = false; state.showRenameChannelModal = false; - state.showChannelSwitchModal = false; + state.showQuickSwitchModal = false; + state.quickSwitchMode = 'channel'; this.state = state; } @@ -106,8 +111,9 @@ export default class Navbar extends React.Component { UserStore.addStatusesChangeListener(this.onChange); UserStore.addChangeListener(this.onChange); PreferenceStore.addChangeListener(this.onChange); + ModalStore.addModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal); $('.inner-wrap').click(this.hideSidebars); - document.addEventListener('keydown', this.showChannelSwitchModal); + document.addEventListener('keydown', this.handleQuickSwitchKeyPress); } componentWillUnmount() { @@ -116,7 +122,8 @@ export default class Navbar extends React.Component { UserStore.removeStatusesChangeListener(this.onChange); UserStore.removeChangeListener(this.onChange); PreferenceStore.removeChangeListener(this.onChange); - document.removeEventListener('keydown', this.showChannelSwitchModal); + ModalStore.removeModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal); + document.removeEventListener('keydown', this.handleQuickSwitchKeyPress); } handleSubmit(e) { @@ -212,16 +219,32 @@ export default class Navbar extends React.Component { this.setState({showMembersModal: false}); } - showChannelSwitchModal(e) { - if (Utils.cmdOrCtrlPressed(e) && e.keyCode === Constants.KeyCodes.K) { + handleQuickSwitchKeyPress(e) { + if (Utils.cmdOrCtrlPressed(e, true) && e.keyCode === Constants.KeyCodes.K) { e.preventDefault(); - this.setState({showChannelSwitchModal: !this.state.showChannelSwitchModal}); + if (e.altKey) { + if (getMyTeams(store.getState()).length <= 1) { + return; + } + this.toggleQuickSwitchModal('team'); + } else { + this.toggleQuickSwitchModal('channel'); + } + } + } + + toggleQuickSwitchModal(mode = 'channel') { + if (this.state.showQuickSwitchModal) { + this.setState({showQuickSwitchModal: false, quickSwitchMode: 'channel'}); + } else { + this.setState({showQuickSwitchModal: true, quickSwitchMode: mode}); } } - hideChannelSwitchModal() { + hideQuickSwitchModal() { this.setState({ - showChannelSwitchModal: false + showQuickSwitchModal: false, + quickSwitchMode: 'channel' }); } @@ -770,7 +793,7 @@ export default class Navbar extends React.Component { var editChannelPurposeModal = null; let renameChannelModal = null; let channelMembersModal = null; - let channelSwitchModal = null; + let quickSwitchModal = null; if (channel) { popoverContent = ( @@ -883,10 +906,11 @@ export default class Navbar extends React.Component { ); } - channelSwitchModal = ( - ); } @@ -926,7 +950,7 @@ export default class Navbar extends React.Component { {leaveChannelModal} {renameChannelModal} {channelMembersModal} - {channelSwitchModal} + {quickSwitchModal} ); } -- cgit v1.2.3-1-g7c22