From b79b2b2a53935cd883312c1158918291a926bacd Mon Sep 17 00:00:00 2001 From: enahum Date: Thu, 22 Dec 2016 15:20:36 -0300 Subject: Fix team switch (#4851) * Fix team switch * Fix channel switching by using BrowserStore * Fixes plt-5076 and plt-5068 * Updating styles for Teams sidebar (#4875) --- webapp/actions/global_actions.jsx | 30 ++++++++-- webapp/actions/websocket_actions.jsx | 7 +-- webapp/components/login/login_controller.jsx | 3 +- webapp/components/signup/signup_controller.jsx | 2 +- .../team_sidebar/components/team_button.jsx | 64 ++++++++++++++++------ .../team_sidebar/team_sidebar_controller.jsx | 8 ++- webapp/routes/route_team.jsx | 55 ++++++++++--------- webapp/sass/layout/_team-sidebar.scss | 29 ++++++++-- 8 files changed, 134 insertions(+), 64 deletions(-) diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx index e1009e9c2..d3fc2cd29 100644 --- a/webapp/actions/global_actions.jsx +++ b/webapp/actions/global_actions.jsx @@ -53,6 +53,8 @@ export function emitChannelClickEvent(channel) { trackPage(); }); + BrowserStore.setGlobalItem(chan.team_id, chan.id); + AppDispatcher.handleViewAction({ type: ActionTypes.CLICK_CHANNEL, name: chan.name, @@ -542,7 +544,11 @@ export function emitBrowserFocus(focus) { export function redirectUserToDefaultTeam() { const teams = TeamStore.getAll(); const teamMembers = TeamStore.getMyTeamMembers(); - let teamId = PreferenceStore.get('last', 'team'); + let teamId = BrowserStore.getGlobalItem('team'); + + function redirect(teamName, channelName) { + browserHistory.push(`/${teamName}/channels/${channelName}`); + } if (!teams[teamId] && teamMembers.length > 0) { let myTeams = []; @@ -560,12 +566,24 @@ export function redirectUserToDefaultTeam() { } if (teams[teamId]) { - const channelId = PreferenceStore.get(teamId, 'channel'); - let channel = ChannelStore.getChannelById(channelId); - if (!channel) { - channel = 'town-square'; + const channelId = BrowserStore.getGlobalItem(teamId); + const channel = ChannelStore.getChannelById(channelId); + if (channel) { + redirect(teams[teamId].name, channel); + } else if (channelId) { + Client.setTeamId(teamId); + Client.getChannel( + channelId, + (data) => { + redirect(teams[teamId].name, data.channel.name); + }, + () => { + redirect(teams[teamId].name, 'town-square'); + } + ); + } else { + redirect(teams[teamId].name, 'town-square'); } - browserHistory.push(`/${teams[teamId].name}/channels/${channel}`); } else { browserHistory.push('/select_team'); } diff --git a/webapp/actions/websocket_actions.jsx b/webapp/actions/websocket_actions.jsx index 0b2c2102e..63f2c535a 100644 --- a/webapp/actions/websocket_actions.jsx +++ b/webapp/actions/websocket_actions.jsx @@ -6,7 +6,6 @@ import $ from 'jquery'; import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import PostStore from 'stores/post_store.jsx'; -import PreferenceStore from 'stores/preference_store.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import BrowserStore from 'stores/browser_store.jsx'; import ErrorStore from 'stores/error_store.jsx'; @@ -224,11 +223,7 @@ function handleLeaveTeamEvent(msg) { if (TeamStore.getCurrentId() === msg.data.team_id) { TeamStore.setCurrentId(''); Client.setTeamId(''); - PreferenceStore.deletePreference({ - category: 'last', - name: 'team', - value: msg.data.team_id - }); + BrowserStore.removeGlobalItem(msg.data.team_id); GlobalActions.redirectUserToDefaultTeam(); } } else { diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx index 005f278bd..6dc7af883 100644 --- a/webapp/components/login/login_controller.jsx +++ b/webapp/components/login/login_controller.jsx @@ -6,6 +6,7 @@ import ErrorBar from 'components/error_bar.jsx'; import FormError from 'components/form_error.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; +import BrowserStore from 'stores/browser_store.jsx'; import UserStore from 'stores/user_store.jsx'; import Client from 'client/web_client.jsx'; @@ -52,7 +53,7 @@ export default class LoginController extends React.Component { componentDidMount() { document.title = global.window.mm_config.SiteName; - + BrowserStore.removeGlobalItem('team'); if (UserStore.getCurrentUser()) { GlobalActions.redirectUserToDefaultTeam(); } diff --git a/webapp/components/signup/signup_controller.jsx b/webapp/components/signup/signup_controller.jsx index 3d853a9ee..9bf5936be 100644 --- a/webapp/components/signup/signup_controller.jsx +++ b/webapp/components/signup/signup_controller.jsx @@ -59,7 +59,7 @@ export default class SignupController extends React.Component { componentDidMount() { AsyncClient.checkVersion(); - + BrowserStore.removeGlobalItem('team'); if (this.props.location.query) { const hash = this.props.location.query.h; const data = this.props.location.query.d; diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx index 0033ae25a..203e1de00 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -7,6 +7,9 @@ import React from 'react'; import {Link} from 'react-router/es6'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {isMobile} from 'utils/utils.jsx'; +import {isMobileApp} from 'utils/user_agent.jsx'; + export default class TeamButton extends React.Component { constructor(props) { super(props); @@ -20,6 +23,7 @@ export default class TeamButton extends React.Component { render() { let teamClass = this.props.active ? 'active' : ''; + const btnClass = this.props.btnClass; const disabled = this.props.disabled ? 'team-disabled' : ''; const handleClick = (this.props.active || this.props.disabled) ? this.handleDisabled : null; let badge; @@ -34,6 +38,44 @@ export default class TeamButton extends React.Component { } } + let btn; + let content = this.props.content; + if (!content) { + content = ( +
+ {this.props.displayName.substring(0, 2)} +
+ {this.props.displayName} +
+
+ ); + } + if (!isMobile() && !isMobileApp()) { + btn = ( + + {this.props.displayName} + + } + > +
+ {badge} + {content} +
+ + ); + } else { + btn = ( +
+ {badge} + {content} +
+ ); + } + return (
- - {this.props.tip} - - } - > -
- {badge} - {this.props.contents} -
- + {btn}
); @@ -64,6 +93,7 @@ export default class TeamButton extends React.Component { } TeamButton.defaultProps = { + btnClass: '', tip: '', placement: 'right', active: false, @@ -73,9 +103,11 @@ TeamButton.defaultProps = { }; TeamButton.propTypes = { + btnClass: React.PropTypes.string, url: React.PropTypes.string.isRequired, - contents: React.PropTypes.node.isRequired, - tip: React.PropTypes.node, + displayName: React.PropTypes.string, + content: React.PropTypes.node, + tip: React.PropTypes.node.isRequired, active: React.PropTypes.bool, disabled: React.PropTypes.bool, unread: React.PropTypes.bool, diff --git a/webapp/components/team_sidebar/team_sidebar_controller.jsx b/webapp/components/team_sidebar/team_sidebar_controller.jsx index f005afeb3..24cd48d39 100644 --- a/webapp/components/team_sidebar/team_sidebar_controller.jsx +++ b/webapp/components/team_sidebar/team_sidebar_controller.jsx @@ -121,7 +121,7 @@ export default class TeamSidebar extends React.Component { url={`/${team.name}`} tip={team.display_name} active={team.id === this.state.currentTeamId} - contents={team.display_name.substring(0, 1).toUpperCase()} + displayName={team.display_name} unread={team.unread} mentions={team.mentions} /> @@ -131,6 +131,7 @@ export default class TeamSidebar extends React.Component { if (moreTeams) { teams.push( } - contents={} + content={} /> ); } else if (global.window.mm_config.EnableTeamCreation === 'true' || isSystemAdmin) { teams.push( } - contents={} + content={} /> ); } diff --git a/webapp/routes/route_team.jsx b/webapp/routes/route_team.jsx index a71ed3149..8416b91c0 100644 --- a/webapp/routes/route_team.jsx +++ b/webapp/routes/route_team.jsx @@ -14,7 +14,7 @@ const ActionTypes = Constants.ActionTypes; import * as AsyncClient from 'utils/async_client.jsx'; import Client from 'client/web_client.jsx'; import ChannelStore from 'stores/channel_store.jsx'; -import PreferenceStore from 'stores/preference_store.jsx'; +import BrowserStore from 'stores/browser_store.jsx'; import emojiRoute from 'routes/route_emoji.jsx'; import integrationsRoute from 'routes/route_integrations.jsx'; @@ -70,45 +70,46 @@ function preNeedsTeam(nextState, replace, callback) { browserHistory.push('/'); return; } - if (nextState.location.pathname.indexOf('/channels/') > -1) { - GlobalActions.emitCloseRightHandSide(); - TeamStore.saveMyTeam(team); - TeamStore.emitChange(); + TeamStore.saveMyTeam(team); + BrowserStore.setGlobalItem('team', team.id); + TeamStore.emitChange(); + GlobalActions.emitCloseRightHandSide(); + + if (nextState.location.pathname.indexOf('/channels/') > -1 || + nextState.location.pathname.indexOf('/pl/') > -1) { loadProfilesAndTeamMembersForDMSidebar(); AsyncClient.getMyTeamsUnread(); AsyncClient.getMyChannelMembers(); + } - const d1 = $.Deferred(); //eslint-disable-line new-cap + const d1 = $.Deferred(); //eslint-disable-line new-cap - Client.getChannels( - (data) => { - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_CHANNELS, - channels: data - }); + Client.getChannels( + (data) => { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_CHANNELS, + channels: data + }); - loadStatusesForChannelAndSidebar(); + loadStatusesForChannelAndSidebar(); - d1.resolve(); - }, - (err) => { - AsyncClient.dispatchError(err, 'getChannels'); - d1.resolve(); - } - ); - - $.when(d1).done(() => { - callback(); - }); - } else { + d1.resolve(); + }, + (err) => { + AsyncClient.dispatchError(err, 'getChannels'); + d1.resolve(); + } + ); + + $.when(d1).done(() => { callback(); - } + }); } function selectLastChannel(nextState, replace, callback) { const team = TeamStore.getByName(nextState.params.team); - const channelId = PreferenceStore.get(team.id, 'channel'); + const channelId = BrowserStore.getGlobalItem(team.id); const channel = ChannelStore.getChannelById(channelId); let channelName = 'town-square'; diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index 562944984..2bf072ed0 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -23,13 +23,29 @@ .team-btn { @include border-radius(2px); background-color: alpha-color($black, .3); + border: 1px solid transparent; display: table-cell; + font-size: 12px; font-weight: bold; - height: 35px; + padding: 4px 5px; position: relative; text-align: center; - vertical-align: middle; - width: 35px; + vertical-align: top; + width: 40px; + + .team-btn__initials { + text-align: left; + } + + .team-btn__content { + bottom: 4px; + font-size: 8.5px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 31px; + } .badge { font-size: 10px; @@ -37,12 +53,17 @@ right: -6px; top: -3px; } + + &.team-btn__add { + height: 39px; + vertical-align: middle; + } } &.active { .team-btn { background-color: transparent; - border: 1px solid $white; + border-color: $white; } } -- cgit v1.2.3-1-g7c22