From 5aaedb9663b987caf1fb11ea6062bcc44e6bafca Mon Sep 17 00:00:00 2001
From: Joram Wilander <jwawilander@gmail.com>
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 = (
-                <ChannelSwitchModal
-                    show={this.state.showChannelSwitchModal}
-                    onHide={this.hideChannelSwitchModal}
+            quickSwitchModal = (
+                <QuickSwitchModal
+                    show={this.state.showQuickSwitchModal}
+                    onHide={this.hideQuickSwitchModal}
+                    initialMode={this.state.quickSwitchMode}
                 />
             );
         }
@@ -926,7 +950,7 @@ export default class Navbar extends React.Component {
                 {leaveChannelModal}
                 {renameChannelModal}
                 {channelMembersModal}
-                {channelSwitchModal}
+                {quickSwitchModal}
             </div>
         );
     }
-- 
cgit v1.2.3-1-g7c22

