summaryrefslogtreecommitdiffstats
path: root/web/react/components/navbar.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/navbar.jsx')
-rw-r--r--web/react/components/navbar.jsx74
1 files changed, 45 insertions, 29 deletions
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6503bd801..f9cd525fd 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -14,6 +14,9 @@ var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
+
export default class Navbar extends React.Component {
constructor(props) {
super(props);
@@ -36,12 +39,6 @@ export default class Navbar extends React.Component {
ChannelStore.addChangeListener(this.onChange);
ChannelStore.addExtraInfoChangeListener(this.onChange);
$('.inner__wrap').click(this.hideSidebars);
-
- $('body').on('click.infopopover', function handlePopoverClick(e) {
- if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
- $('.info-popover').popover('hide');
- }
- });
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onChange);
@@ -224,11 +221,15 @@ export default class Navbar extends React.Component {
return (
<div className='navbar-brand'>
<div className='dropdown'>
- <div
- data-toggle='popover'
- data-content={popoverContent}
- className='description info-popover'
- />
+ <OverlayTrigger
+ trigger='click'
+ placement='bottom'
+ overlay={popoverContent}
+ className='description'
+ rootClose={true}
+ >
+ <div className='description info-popover'/>
+ </OverlayTrigger>
<a
href='#'
className='dropdown-toggle theme'
@@ -330,11 +331,17 @@ export default class Navbar extends React.Component {
var isDirect = false;
if (channel) {
- popoverContent = React.renderToString(
- <MessageWrapper
- message={channel.description}
- options={{singleline: true, mentionHighlight: false}}
- />
+ popoverContent = (
+ <Popover
+ bsStyle='info'
+ placement='bottom'
+ id='description-popover'
+ >
+ <MessageWrapper
+ message={channel.description}
+ options={{singleline: true, mentionHighlight: false}}
+ />
+ </Popover>
);
isAdmin = Utils.isAdmin(this.state.member.roles);
@@ -354,19 +361,28 @@ export default class Navbar extends React.Component {
}
if (channel.description.length === 0) {
- popoverContent = React.renderToString(
- <div>
- No channel description yet. <br/>
- <a
- href='#'
- data-toggle='modal'
- data-desc={channel.description}
- data-title={channel.display_name}
- data-channelid={channel.id}
- data-target='#edit_channel'
- >
- Click here
- </a> to add one.</div>
+ popoverContent = (
+ <Popover
+ bsStyle='info'
+ placement='bottom'
+ id='description-popover'
+ >
+ <div>
+ {'No channel description yet.'}
+ <br/>
+ <a
+ href='#'
+ data-toggle='modal'
+ data-desc={channel.description}
+ data-title={channel.display_name}
+ data-channelid={channel.id}
+ data-target='#edit_channel'
+ >
+ {'Click here'}
+ </a>
+ {' to add one.'}
+ </div>
+ </Popover>
);
}
}