summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-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
-rw-r--r--web/react/stores/search_store.jsx20
-rw-r--r--web/react/utils/constants.jsx2
-rw-r--r--web/sass-files/sass/partials/_navbar.scss3
6 files changed, 78 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 = '';
diff --git a/web/react/stores/search_store.jsx b/web/react/stores/search_store.jsx
index 95f0ea845..93b89035c 100644
--- a/web/react/stores/search_store.jsx
+++ b/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:
}
});
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 6be87254f..80c0cf0ee 100644
--- a/web/react/utils/constants.jsx
+++ b/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
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
index c06feffcf..c570c4663 100644
--- a/web/sass-files/sass/partials/_navbar.scss
+++ b/web/sass-files/sass/partials/_navbar.scss
@@ -33,6 +33,9 @@
background: #fff;
width: 21px;
}
+ .icon--white {
+ color: #fff;
+ }
&:hover, &:active, &:focus {
background: inherit;
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-04 11:19:32 +0000