diff options
Diffstat (limited to 'web/react/components/popover_list_members.jsx')
-rw-r--r-- | web/react/components/popover_list_members.jsx | 29 |
1 files changed, 12 insertions, 17 deletions
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 5d9052fd7..16ae693fa 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -2,6 +2,8 @@ // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); +var Popover = ReactBootstrap.Popover; +var OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class PopoverListMembers extends React.Component { componentDidMount() { @@ -24,16 +26,9 @@ export default class PopoverListMembers extends React.Component { }); } }; - - $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); - $('body').on('click', function onClick(e) { - if (e.target.parentNode && $(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { - $('#member_popover').popover('hide'); - } - }); } render() { - let popoverHtml = ''; + let popoverHtml = []; let count = 0; let countText = '-'; const members = this.props.members; @@ -46,7 +41,7 @@ export default class PopoverListMembers extends React.Component { members.forEach(function addMemberElement(m) { if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) { - popoverHtml += `<div class='text--nowrap'>${m.username}</div>`; + popoverHtml.push(<div className='text--nowrap'>{m.username}</div>); count++; } }); @@ -59,15 +54,14 @@ export default class PopoverListMembers extends React.Component { } return ( - <div - id='member_popover' - data-toggle='popover' - data-content={popoverHtml} - data-original-title='Members' + <OverlayTrigger + trigger='click' + placement='bottom' + rootClose='true' + overlay={<Popover title='Members'>{popoverHtml}</Popover>} > - <div - id='member_tooltip' - > + <div id='member_popover'> + <div> {countText} <span className='fa fa-user' @@ -75,6 +69,7 @@ export default class PopoverListMembers extends React.Component { /> </div> </div> + </OverlayTrigger> ); } } |