From b66bbcea12df41bc8228fff3caec374e55b7b557 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 17 Nov 2015 14:47:19 -0500 Subject: Added ability to open search sidebar programatically --- web/react/components/sidebar_right.jsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index ab558ad0f..8d16057fc 100644 --- a/web/react/components/sidebar_right.jsx +++ b/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 = ''; -- cgit v1.2.3-1-g7c22 From 70c957d4546016ff2d981d4e1704699b008d1ca5 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 18 Nov 2015 09:33:08 -0500 Subject: Added search button to mobile navbar --- web/react/components/navbar.jsx | 17 +++++++++++++++++ web/react/components/search_results.jsx | 19 ++++++++++++++++--- 2 files changed, 33 insertions(+), 3 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 1fcfabccd..845c33f3b 100644 --- a/web/react/components/navbar.jsx +++ b/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 = ( + + ); + var channelMenuDropdown = this.createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent); return ( @@ -422,6 +438,7 @@ export default class Navbar extends React.Component {
{collapseButtons} + {searchButton} {channelMenuDropdown}
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index f4d8647db..491995087 100644 --- a/web/react/components/search_results.jsx +++ b/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 = ( +
+
    +
  • + {'Use '}{'"quotation marks"'}{' to search for phrases'} +
    • +
  • + {'Use '}{'from:'}{' to find posts from specific users and '}{'in:'}{' to find posts in specific channels'} +
    • +
+
+ ); + } else if (noResults) { ctls = (

{'NO RESULTS'}

    -
  • If you're searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term
    • -
  • Due to the volume of results, two letter searches and common words like "this", "a" and "is" won't appear in search results
    • +
  • {'If you\'re searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term'}
    • +
  • {'Due to the volume of results, two letter searches and common words like "this", "a" and "is" won\'t appear in search results'}
); -- cgit v1.2.3-1-g7c22