summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/navbar.jsx17
-rw-r--r--web/react/components/search_results.jsx19
-rw-r--r--web/react/components/sidebar_right.jsx27
3 files changed, 53 insertions, 10 deletions
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 = (
+ <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>
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 = (
+ <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>
);
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 = '';