From 944bb1ba615ef5205f33191a4542f36002a4db23 Mon Sep 17 00:00:00 2001 From: Pepijn Date: Tue, 11 Oct 2016 15:07:38 +0200 Subject: First commit for toggling mentions using shortcut and button (#4169) Also did some refactoring and moved code to actions Fixed coding style errors --- webapp/actions/global_actions.jsx | 46 +++++++++++++++++++++++++ webapp/components/channel_header.jsx | 52 +++++++++++++---------------- webapp/components/search_results_header.jsx | 21 ++---------- webapp/components/sidebar_right.jsx | 5 ++- webapp/components/sidebar_right_menu.jsx | 30 ++++------------- webapp/stores/search_store.jsx | 1 + 6 files changed, 82 insertions(+), 73 deletions(-) diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx index 81c06fe93..941aa34f4 100644 --- a/webapp/actions/global_actions.jsx +++ b/webapp/actions/global_actions.jsx @@ -487,3 +487,49 @@ export function emitJoinChannelEvent(channel, success, failure) { failure ); } + +export function emitSearchMentionsEvent(user) { + let terms = ''; + if (user.notify_props && user.notify_props.mention_keys) { + const termKeys = UserStore.getMentionKeys(user.id); + + if (termKeys.indexOf('@channel') !== -1) { + termKeys[termKeys.indexOf('@channel')] = ''; + } + + if (termKeys.indexOf('@all') !== -1) { + termKeys[termKeys.indexOf('@all')] = ''; + } + + terms = termKeys.join(' '); + } + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term: terms, + do_search: true, + is_mention_search: true + }); +} + +export function toggleSideBarAction(visible) { + if (!visible) { + //Array of actions resolving in the closing of the sidebar + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH, + results: null + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term: null, + do_search: false, + is_mention_search: false + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_POST_SELECTED, + postId: null + }); + } +} diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 8710c6486..2bd52fa23 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -50,7 +50,7 @@ export default class ChannelHeader extends React.Component { this.searchMentions = this.searchMentions.bind(this); this.showRenameChannelModal = this.showRenameChannelModal.bind(this); this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this); - this.openRecentMentions = this.openRecentMentions.bind(this); + this.handleShortcut = this.handleShortcut.bind(this); this.getFlagged = this.getFlagged.bind(this); this.initWebrtc = this.initWebrtc.bind(this); this.onBusy = this.onBusy.bind(this); @@ -97,7 +97,7 @@ export default class ChannelHeader extends React.Component { WebrtcStore.addChangedListener(this.onListenerChange); WebrtcStore.addBusyListener(this.onBusy); $('.sidebar--left .dropdown-menu').perfectScrollbar(); - document.addEventListener('keydown', this.openRecentMentions); + document.addEventListener('keydown', this.handleShortcut); } componentWillUnmount() { @@ -109,7 +109,7 @@ export default class ChannelHeader extends React.Component { UserStore.removeStatusesChangeListener(this.onListenerChange); WebrtcStore.removeChangedListener(this.onListenerChange); WebrtcStore.removeBusyListener(this.onBusy); - document.removeEventListener('keydown', this.openRecentMentions); + document.removeEventListener('keydown', this.handleShortcut); } shouldComponentUpdate(nextProps) { @@ -142,41 +142,35 @@ export default class ChannelHeader extends React.Component { searchMentions(e) { e.preventDefault(); - const user = this.state.currentUser; - - let terms = ''; - if (user.notify_props && user.notify_props.mention_keys) { - const termKeys = UserStore.getMentionKeys(user.id); - - if (termKeys.indexOf('@channel') !== -1) { - termKeys[termKeys.indexOf('@channel')] = ''; - } - - if (termKeys.indexOf('@all') !== -1) { - termKeys[termKeys.indexOf('@all')] = ''; - } - - terms = termKeys.join(' '); + if (SearchStore.isMentionSearch) { + // Close + GlobalActions.toggleSideBarAction(false); + } else { + GlobalActions.emitSearchMentionsEvent(user); } - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_SEARCH_TERM, - term: terms, - do_search: true, - is_mention_search: true - }); } getFlagged(e) { e.preventDefault(); - getFlaggedPosts(); + if (SearchStore.isFlaggedPosts) { + GlobalActions.toggleSideBarAction(false); + } else { + getFlaggedPosts(); + } } - openRecentMentions(e) { - if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.M) { + handleShortcut(e) { + if (Utils.cmdOrCtrlPressed(e) && e.shiftKey) { e.preventDefault(); - this.searchMentions(e); + if (e.keyCode === Constants.KeyCodes.M) { + this.searchMentions(e); + } + + //@TODO create shortcut for toggling flagged posts + // else if (e.keyCode == Constants.KeyCodes.) { + // this.toggleFlagged(); + // } } } diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx index 8fbe4ab1f..6bcb3f40a 100644 --- a/webapp/components/search_results_header.jsx +++ b/webapp/components/search_results_header.jsx @@ -1,14 +1,12 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import Constants from 'utils/constants.jsx'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import * as GlobalActions from 'actions/global_actions.jsx'; import {FormattedMessage} from 'react-intl'; -var ActionTypes = Constants.ActionTypes; - import React from 'react'; export default class SearchResultsHeader extends React.Component { @@ -22,22 +20,7 @@ export default class SearchResultsHeader extends React.Component { handleClose(e) { e.preventDefault(); - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_SEARCH, - results: null - }); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_SEARCH_TERM, - term: null, - do_search: false, - is_mention_search: false - }); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_POST_SELECTED, - postId: null - }); + GlobalActions.toggleSideBarAction(false); this.props.shrink(); } diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index ffafb9434..1f4c394bb 100644 --- a/webapp/components/sidebar_right.jsx +++ b/webapp/components/sidebar_right.jsx @@ -37,6 +37,7 @@ export default class SidebarRight extends React.Component { this.state = { searchVisible: SearchStore.getSearchResults() !== null, isMentionSearch: SearchStore.getIsMentionSearch(), + isFlaggedPosts: SearchStore.getIsFlaggedPosts(), postRightVisible: Boolean(PostStore.getSelectedPost()), expanded: false, fromSearch: false, @@ -125,7 +126,9 @@ export default class SidebarRight extends React.Component { } onShrink() { - this.setState({expanded: false}); + this.setState({ + expanded: false + }); } onSearchChange() { diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 757a919c3..a11869cc2 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -9,6 +9,7 @@ import AboutBuildModal from './about_build_modal.jsx'; import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; +import SearchStore from 'stores/search_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import WebrtcStore from 'stores/webrtc_store.jsx'; @@ -92,32 +93,13 @@ export default class SidebarRightMenu extends React.Component { searchMentions(e) { e.preventDefault(); - const user = this.state.currentUser; - - let terms = ''; - if (user.notify_props && user.notify_props.mention_keys) { - const termKeys = UserStore.getMentionKeys(user.id); - - if (termKeys.indexOf('@channel') !== -1) { - termKeys[termKeys.indexOf('@channel')] = ''; - } - - if (termKeys.indexOf('@all') !== -1) { - termKeys[termKeys.indexOf('@all')] = ''; - } - - terms = termKeys.join(' '); + if (SearchStore.isMentionSearch) { + GlobalActions.toggleSideBarAction(false); + } else { + GlobalActions.emitSearchMentionsEvent(user); + this.hideSidebars(); } - - this.hideSidebars(); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_SEARCH_TERM, - term: terms, - do_search: true, - is_mention_search: true - }); } closeLeftSidebar() { diff --git a/webapp/stores/search_store.jsx b/webapp/stores/search_store.jsx index 741590895..d1458ceed 100644 --- a/webapp/stores/search_store.jsx +++ b/webapp/stores/search_store.jsx @@ -19,6 +19,7 @@ class SearchStoreClass extends EventEmitter { this.searchResults = null; this.isMentionSearch = false; this.isFlaggedPosts = false; + this.isVisible = false; this.searchTerm = ''; } -- cgit v1.2.3-1-g7c22