Merge pull request #1457 from hmhealey/plt729

PLT-729 Added search button to mobile header

web/react/components/navbar.jsx

@@ -32,6 +32,7 @@ export default class Navbar extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.handleLeave = this.handleLeave.bind(this);
+        this.showSearch = this.showSearch.bind(this);
         this.createCollapseButtons = this.createCollapseButtons.bind(this);
         this.createDropdown = this.createDropdown.bind(this);
 
@@ -100,6 +101,11 @@ export default class Navbar extends React.Component {
         $('.inner__wrap').toggleClass('move--left-small');
         $('.sidebar--menu').toggleClass('move--left');
     }
+    showSearch() {
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.SHOW_SEARCH
+        });
+    }
     onChange() {
         this.setState(this.getStateFromStores());
         $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true});
@@ -411,6 +417,16 @@ export default class Navbar extends React.Component {
 
         var collapseButtons = this.createCollapseButtons(currentId);
 
+        const searchButton = (
+            <button
+                type='button'
+                className='navbar-toggle pull-right'
+                onClick={this.showSearch}
+            >
+                <span className='glyphicon glyphicon-search icon--white' />
+            </button>
+        );
+
         var channelMenuDropdown = this.createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent);
 
         return (
@@ -422,6 +438,7 @@ export default class Navbar extends React.Component {
                     <div className='container-fluid theme'>
                         <div className='navbar-header'>
                             {collapseButtons}
+                            {searchButton}
                             {channelMenuDropdown}
                         </div>
                     </div>

web/react/components/search_results.jsx

@@ -80,14 +80,27 @@ export default class SearchResults extends React.Component {
 
         var ctls = null;
 
-        if (noResults) {
+        if (!searchTerm && noResults) {
+            ctls = (
+                <div className='sidebar--right__subheader'>
+                    <ul>
+                        <li>
+                            {'Use '}<b>{'"quotation marks"'}</b>{' to search for phrases'}
+                        </li>
+                        <li>
+                            {'Use '}<b>{'from:'}</b>{' to find posts from specific users and '}<b>{'in:'}</b>{' to find posts in specific channels'}
+                        </li>
+                    </ul>
+                </div>
+            );
+        } else if (noResults) {
             ctls =
             (
                 <div className='sidebar--right__subheader'>
                     <h4>{'NO RESULTS'}</h4>
                     <ul>
-                        <li>If you're searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term</li>
+                        <li>{'If you\'re searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term'}</li>
-                        <li>Due to the volume of results, two letter searches and common words like "this", "a" and "is" won't appear in search results</li>
+                        <li>{'Due to the volume of results, two letter searches and common words like "this", "a" and "is" won\'t appear in search results'}</li>
                     </ul>
                 </div>
             );

web/react/components/sidebar_right.jsx

@@ -7,10 +7,6 @@ var SearchStore = require('../stores/search_store.jsx');
 var PostStore = require('../stores/post_store.jsx');
 var Utils = require('../utils/utils.jsx');
 
-function getStateFromStores() {
-    return {search_visible: SearchStore.getSearchResults() != null, post_right_visible: PostStore.getSelectedPost() != null, is_mention_search: SearchStore.getIsMentionSearch()};
-}
-
 export default class SidebarRight extends React.Component {
     constructor(props) {
         super(props);
@@ -19,19 +15,29 @@ export default class SidebarRight extends React.Component {
 
         this.onSelectedChange = this.onSelectedChange.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
+        this.onShowSearch = this.onShowSearch.bind(this);
 
         this.doStrangeThings = this.doStrangeThings.bind(this);
 
-        this.state = getStateFromStores();
+        this.state = this.getStateFromStores();
+    }
+    getStateFromStores() {
+        return {
+            search_visible: SearchStore.getSearchResults() != null,
+            post_right_visible: PostStore.getSelectedPost() != null,
+            is_mention_search: SearchStore.getIsMentionSearch()
+        };
     }
     componentDidMount() {
         SearchStore.addSearchChangeListener(this.onSearchChange);
         PostStore.addSelectedPostChangeListener(this.onSelectedChange);
+        SearchStore.addShowSearchListener(this.onShowSearch);
         this.doStrangeThings();
     }
     componentWillUnmount() {
         SearchStore.removeSearchChangeListener(this.onSearchChange);
         PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
+        SearchStore.removeShowSearchListener(this.onShowSearch);
     }
     componentWillUpdate() {
         PostStore.jumpPostsViewSidebarOpen();
@@ -64,18 +70,25 @@ export default class SidebarRight extends React.Component {
         this.doStrangeThings();
     }
     onSelectedChange(fromSearch) {
-        var newState = getStateFromStores(fromSearch);
+        var newState = this.getStateFromStores(fromSearch);
         newState.from_search = fromSearch;
         if (!Utils.areObjectsEqual(newState, this.state)) {
             this.setState(newState);
         }
     }
     onSearchChange() {
-        var newState = getStateFromStores();
+        var newState = this.getStateFromStores();
         if (!Utils.areObjectsEqual(newState, this.state)) {
             this.setState(newState);
         }
     }
+    onShowSearch() {
+        if (!this.state.search_visible) {
+            this.setState({
+                search_visible: true
+            });
+        }
+    }
     render() {
         var content = '';
 

web/react/stores/search_store.jsx

@@ -14,6 +14,7 @@ var SEARCH_CHANGE_EVENT = 'search_change';
 var SEARCH_TERM_CHANGE_EVENT = 'search_term_change';
 var MENTION_DATA_CHANGE_EVENT = 'mention_data_change';
 var ADD_MENTION_EVENT = 'add_mention';
+var SHOW_SEARCH_EVENT = 'show_search';
 
 class SearchStoreClass extends EventEmitter {
     constructor() {
@@ -35,6 +36,10 @@ class SearchStoreClass extends EventEmitter {
         this.addMentionDataChangeListener = this.addMentionDataChangeListener.bind(this);
         this.removeMentionDataChangeListener = this.removeMentionDataChangeListener.bind(this);
 
+        this.emitShowSearch = this.emitShowSearch.bind(this);
+        this.addShowSearchListener = this.addShowSearchListener.bind(this);
+        this.removeShowSearchListener = this.removeShowSearchListener.bind(this);
+
         this.getSearchResults = this.getSearchResults.bind(this);
         this.getIsMentionSearch = this.getIsMentionSearch.bind(this);
 
@@ -80,6 +85,18 @@ class SearchStoreClass extends EventEmitter {
         this.removeListener(SEARCH_TERM_CHANGE_EVENT, callback);
     }
 
+    emitShowSearch() {
+        this.emit(SHOW_SEARCH_EVENT);
+    }
+
+    addShowSearchListener(callback) {
+        this.on(SHOW_SEARCH_EVENT, callback);
+    }
+
+    removeShowSearchListener(callback) {
+        this.removeListener(SHOW_SEARCH_EVENT, callback);
+    }
+
     getSearchResults() {
         return BrowserStore.getItem('search_results');
     }
@@ -146,6 +163,9 @@ SearchStore.dispatchToken = AppDispatcher.register((payload) => {
     case ActionTypes.RECIEVED_ADD_MENTION:
         SearchStore.emitAddMention(action.id, action.username);
         break;
+    case ActionTypes.SHOW_SEARCH:
+        SearchStore.emitShowSearch();
+        break;
     default:
     }
 });

web/react/utils/constants.jsx

@@ -39,6 +39,8 @@ module.exports = {
         RECIEVED_LOGS: null,
         RECIEVED_ALL_TEAMS: null,
 
+        SHOW_SEARCH: null,
+
         TOGGLE_IMPORT_THEME_MODAL: null,
         TOGGLE_INVITE_MEMBER_MODAL: null,
         TOGGLE_DELETE_POST_MODAL: null

web/sass-files/sass/partials/_navbar.scss

@@ -33,6 +33,9 @@
 				background: #fff;
 				width: 21px;
 			}
+			.icon--white {
+				color: #fff;
+			}
 			&:hover, &:active, &:focus {
 				background: inherit;
 			}