summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webapp/components/channel_header.jsx8
-rw-r--r--webapp/components/search_bar.jsx107
-rw-r--r--webapp/components/sidebar_right.jsx10
-rw-r--r--webapp/sass/components/_search.scss5
-rw-r--r--webapp/sass/components/_webrtc.scss4
-rw-r--r--webapp/sass/layout/_content.scss16
-rw-r--r--webapp/sass/layout/_headers.scss3
-rw-r--r--webapp/sass/responsive/_mobile.scss7
-rw-r--r--webapp/sass/responsive/_tablet.scss6
9 files changed, 159 insertions, 7 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 96cfa1557..52bed85cd 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -728,12 +728,12 @@ export default class ChannelHeader extends React.Component {
</OverlayTrigger>
</div>
</th>
- <th>
+ <th className='header-list__members'>
{popoverListMembers}
</th>
- <th className='search-bar__container'><NavbarSearchBox/></th>
+ <th className='search-bar__container'><NavbarSearchBox showMentionFlagBtns={false}/></th>
<th>
- <div className='dropdown channel-header__links'>
+ <div className='dropdown channel-header__links search-btns'>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
@@ -750,7 +750,7 @@ export default class ChannelHeader extends React.Component {
</div>
</th>
<th>
- <div className='dropdown channel-header__links'>
+ <div className='dropdown channel-header__links search-btns'>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index 3ddc192d9..cfd9b0c73 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -5,7 +5,9 @@ import $ from 'jquery';
import ReactDOM from 'react-dom';
import Client from 'client/web_client.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
import SearchStore from 'stores/search_store.jsx';
+import UserStore from 'stores/user_store.jsx';
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import SuggestionBox from './suggestion/suggestion_box.jsx';
import SearchChannelProvider from './suggestion/search_channel_provider.jsx';
@@ -13,12 +15,12 @@ import SearchSuggestionList from './suggestion/search_suggestion_list.jsx';
import SearchUserProvider from './suggestion/search_user_provider.jsx';
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
-import {loadProfilesForPosts} from 'actions/post_actions.jsx';
+import {loadProfilesForPosts, getFlaggedPosts} from 'actions/post_actions.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
var ActionTypes = Constants.ActionTypes;
-import {Popover} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
import React from 'react';
@@ -33,6 +35,8 @@ export default class SearchBar extends React.Component {
this.handleUserBlur = this.handleUserBlur.bind(this);
this.performSearch = this.performSearch.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
+ this.searchMentions = this.searchMentions.bind(this);
+ this.getFlagged = this.getFlagged.bind(this);
const state = this.getSearchTermStateFromStores();
state.focused = false;
@@ -148,7 +152,28 @@ export default class SearchBar extends React.Component {
this.clearFocus();
}
+ searchMentions(e) {
+ e.preventDefault();
+ const user = UserStore.getCurrentUser();
+ if (SearchStore.isMentionSearch) {
+ // Close
+ GlobalActions.toggleSideBarAction(false);
+ } else {
+ GlobalActions.emitSearchMentionsEvent(user);
+ }
+ }
+
+ getFlagged(e) {
+ e.preventDefault();
+ if (SearchStore.isFlaggedPosts) {
+ GlobalActions.toggleSideBarAction(false);
+ } else {
+ getFlaggedPosts();
+ }
+ }
+
render() {
+ const flagIcon = Constants.FLAG_ICON_SVG;
var isSearching = null;
if (this.state.isSearching) {
isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
@@ -159,6 +184,73 @@ export default class SearchBar extends React.Component {
helpClass += ' visible';
}
+ const recentMentionsTooltip = (
+ <Tooltip id='recentMentionsTooltip'>
+ <FormattedMessage
+ id='channel_header.recentMentions'
+ defaultMessage='Recent Mentions'
+ />
+ </Tooltip>
+ );
+
+ const flaggedTooltip = (
+ <Tooltip id='flaggedTooltip'>
+ <FormattedMessage
+ id='channel_header.flagged'
+ defaultMessage='Flagged Posts'
+ />
+ </Tooltip>
+ );
+
+ let mentionBtn;
+ let flagBtn;
+ if (this.props.showMentionFlagBtns) {
+ mentionBtn = (
+ <div
+ className='dropdown channel-header__links'
+ style={{float: 'left', marginTop: '1px'}}
+ >
+ <OverlayTrigger
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={recentMentionsTooltip}
+ >
+ <a
+ href='#'
+ type='button'
+ onClick={this.searchMentions}
+ >
+ {'@'}
+ </a>
+ </OverlayTrigger>
+ </div>
+ );
+
+ flagBtn = (
+ <div
+ className='dropdown channel-header__links'
+ style={{float: 'left', marginTop: '1px'}}
+ >
+ <OverlayTrigger
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={flaggedTooltip}
+ >
+ <a
+ href='#'
+ type='button'
+ onClick={this.getFlagged}
+ >
+ <span
+ className='icon icon__flag'
+ dangerouslySetInnerHTML={{__html: flagIcon}}
+ />
+ </a>
+ </OverlayTrigger>
+ </div>
+ );
+ }
+
return (
<div>
<div
@@ -208,7 +300,18 @@ export default class SearchBar extends React.Component {
/>
</Popover>
</form>
+
+ {mentionBtn}
+ {flagBtn}
</div>
);
}
}
+
+SearchBar.defaultProps = {
+ showMentionFlagBtns: true
+};
+
+SearchBar.propTypes = {
+ showMentionFlagBtns: React.PropTypes.bool
+}; \ No newline at end of file
diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx
index 1be2a3287..da7ff818d 100644
--- a/webapp/components/sidebar_right.jsx
+++ b/webapp/components/sidebar_right.jsx
@@ -74,6 +74,12 @@ export default class SidebarRight extends React.Component {
if (isOpen !== willOpen) {
PostStore.jumpPostsViewSidebarOpen();
}
+
+ if (!isOpen && willOpen) {
+ this.setState({
+ expanded: false
+ });
+ }
}
doStrangeThings() {
@@ -191,6 +197,10 @@ export default class SidebarRight extends React.Component {
);
}
+ if (!content) {
+ expandedClass = '';
+ }
+
return (
<div
className={'sidebar--right ' + expandedClass}
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 11bcdb92d..58216fefd 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -74,7 +74,10 @@
}
.sidebar--right & {
- width: 100%;
+ width: 300px;
+ float: left;
+ margin-left: 17px;
+ margin-right: 9px;
}
.search-bar {
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index c9deada26..d53737b78 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -347,4 +347,8 @@
#videos.small {
position: relative;
}
+
+ .search__form {
+ width: calc(100% - 92px);
+ }
}
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 22e8a5369..02f063573 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -6,12 +6,28 @@
.search-bar__container {
display: none;
}
+ .search-btns {
+ display: none;
+ }
+ .header-list__members {
+ margin-right: -18px;
+ float: right;
+ padding-right: 0px !important;
+ }
}
&.move--right {
.search-bar__container {
display: none;
}
+ .search-btns {
+ display: none;
+ }
+ .header-list__members {
+ margin-right: -18px;
+ float: right;
+ padding-right: 0px !important;
+ }
}
}
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index db3bda627..710a8ad6a 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -25,6 +25,9 @@
th {
font-weight: normal !important;
+ &.header-list__members {
+ padding-right: 4px;
+ }
}
td {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4a803b547..1dcaacc60 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -911,6 +911,9 @@
height: 45px;
padding: 7px 20px 0 49px;
position: relative;
+ width: 100%;
+ margin-left: 0px;
+ margin-right: 0px;
.icon--refresh {
@include opacity(.6);
@@ -927,6 +930,10 @@
padding: 0 10px 0 31px;
}
}
+
+ .channel-header__links {
+ display: none;
+ }
}
.sidebar--menu {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 3d6abbd69..4de187846 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -20,6 +20,12 @@
}
}
+ .search__form {
+ .sidebar--right & {
+ width: 300px;
+ }
+ }
+
.post-create__container {
form {
padding: .5em 0;
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-29 12:17:28 +0000