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>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>{'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>
                     </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 = '';