From c9eb23a3d44c96042522bf7cdefc65903eb1d0a3 Mon Sep 17 00:00:00 2001
From: khawerrind <khawer.zeshan@gmail.com>
Date: Thu, 22 Dec 2016 22:21:16 +0500
Subject: PLT-3782 Do not move the "@" sign and flag icon to the left of search
 bar when opening the right hand sidebar (#4850)

* do not move the mention & flag button to the left of the search box when in search mode

* fixed the margin & padding issues of the search box

* fixed the member icon positioning issue and the expanded sidebar toggle issue

* fixed remaining bugs when sidebar is in expanded mode

* changed propTypes from func to bool
---
 webapp/components/search_bar.jsx | 107 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 105 insertions(+), 2 deletions(-)

(limited to 'webapp/components/search_bar.jsx')

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index 3ddc192d9..cfd9b0c73 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -5,7 +5,9 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import Client from 'client/web_client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
 import SearchStore from 'stores/search_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import SuggestionBox from './suggestion/suggestion_box.jsx';
 import SearchChannelProvider from './suggestion/search_channel_provider.jsx';
@@ -13,12 +15,12 @@ import SearchSuggestionList from './suggestion/search_suggestion_list.jsx';
 import SearchUserProvider from './suggestion/search_user_provider.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
-import {loadProfilesForPosts} from 'actions/post_actions.jsx';
+import {loadProfilesForPosts, getFlaggedPosts} from 'actions/post_actions.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 var ActionTypes = Constants.ActionTypes;
-import {Popover} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
 
 import React from 'react';
 
@@ -33,6 +35,8 @@ export default class SearchBar extends React.Component {
         this.handleUserBlur = this.handleUserBlur.bind(this);
         this.performSearch = this.performSearch.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.searchMentions = this.searchMentions.bind(this);
+        this.getFlagged = this.getFlagged.bind(this);
 
         const state = this.getSearchTermStateFromStores();
         state.focused = false;
@@ -148,7 +152,28 @@ export default class SearchBar extends React.Component {
         this.clearFocus();
     }
 
+    searchMentions(e) {
+        e.preventDefault();
+        const user = UserStore.getCurrentUser();
+        if (SearchStore.isMentionSearch) {
+            // Close
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            GlobalActions.emitSearchMentionsEvent(user);
+        }
+    }
+
+    getFlagged(e) {
+        e.preventDefault();
+        if (SearchStore.isFlaggedPosts) {
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            getFlaggedPosts();
+        }
+    }
+
     render() {
+        const flagIcon = Constants.FLAG_ICON_SVG;
         var isSearching = null;
         if (this.state.isSearching) {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
@@ -159,6 +184,73 @@ export default class SearchBar extends React.Component {
             helpClass += ' visible';
         }
 
+        const recentMentionsTooltip = (
+            <Tooltip id='recentMentionsTooltip'>
+                <FormattedMessage
+                    id='channel_header.recentMentions'
+                    defaultMessage='Recent Mentions'
+                />
+            </Tooltip>
+        );
+
+        const flaggedTooltip = (
+            <Tooltip id='flaggedTooltip'>
+                <FormattedMessage
+                    id='channel_header.flagged'
+                    defaultMessage='Flagged Posts'
+                />
+            </Tooltip>
+        );
+
+        let mentionBtn;
+        let flagBtn;
+        if (this.props.showMentionFlagBtns) {
+            mentionBtn = (
+                <div
+                    className='dropdown channel-header__links'
+                    style={{float: 'left', marginTop: '1px'}}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='bottom'
+                        overlay={recentMentionsTooltip}
+                    >
+                        <a
+                            href='#'
+                            type='button'
+                            onClick={this.searchMentions}
+                        >
+                            {'@'}
+                        </a>
+                    </OverlayTrigger>
+                </div>
+            );
+
+            flagBtn = (
+                <div
+                    className='dropdown channel-header__links'
+                    style={{float: 'left', marginTop: '1px'}}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='bottom'
+                        overlay={flaggedTooltip}
+                    >
+                        <a
+                            href='#'
+                            type='button'
+                            onClick={this.getFlagged}
+                        >
+                            <span
+                                className='icon icon__flag'
+                                dangerouslySetInnerHTML={{__html: flagIcon}}
+                            />
+                        </a>
+                    </OverlayTrigger>
+                </div>
+            );
+        }
+
         return (
             <div>
                 <div
@@ -208,7 +300,18 @@ export default class SearchBar extends React.Component {
                         />
                     </Popover>
                 </form>
+
+                {mentionBtn}
+                {flagBtn}
             </div>
         );
     }
 }
+
+SearchBar.defaultProps = {
+    showMentionFlagBtns: true
+};
+
+SearchBar.propTypes = {
+    showMentionFlagBtns: React.PropTypes.bool
+};
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22