diff options
Diffstat (limited to 'web/react/components/channel_header.jsx')
| -rw-r--r-- | web/react/components/channel_header.jsx | 185 |
1 files changed, 104 insertions, 81 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 76dbe370b..90a776791 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -1,13 +1,11 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); -var SocketStore = require('../stores/socket_store.jsx') -var UserProfile = require( './user_profile.jsx' ); -var NavbarSearchBox =require('./search_bar.jsx'); +var SocketStore = require('../stores/socket_store.jsx'); +var NavbarSearchBox = require('./search_bar.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); @@ -21,23 +19,28 @@ var PopoverListMembers = React.createClass({ componentDidMount: function() { var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { - var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); + var selfObj; + if (obj instanceof this.constructor) { + selfObj = obj; + } else { + selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); + } originalLeave.call(this, obj); - if (obj.currentTarget && self.$tip) { - self.$tip.one('mouseenter', function() { - clearTimeout(self.timeout); - self.$tip.one('mouseleave', function() { - $.fn.popover.Constructor.prototype.leave.call(self, self); + if (obj.currentTarget && selfObj.$tip) { + selfObj.$tip.one('mouseenter', function() { + clearTimeout(selfObj.timeout); + selfObj.$tip.one('mouseleave', function() { + $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj); }); - }) + }); } }; - $("#member_popover").popover({placement : 'bottom', trigger: 'click', html: true}); - $('body').on('click', function (e) { - if ($(e.target.parentNode.parentNode)[0] !== $("#member_popover")[0] && $(e.target).parents('.popover.in').length === 0) { - $("#member_popover").popover('hide'); + $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); + $('body').on('click', function(e) { + if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { + $('#member_popover').popover('hide'); } }); }, @@ -45,22 +48,27 @@ var PopoverListMembers = React.createClass({ render: function() { var popoverHtml = ''; var members = this.props.members; - var count = (members.length > 20) ? "20+" : (members.length || '-'); + var count; + if (members.length > 20) { + count = '20+'; + } else { + count = members.length || '-'; + } if (members) { - members.sort(function(a,b) { + members.sort(function(a, b) { return a.username.localeCompare(b.username); }); members.forEach(function(m) { - popoverHtml += "<div class='text--nowrap'>" + m.username + "</div>"; + popoverHtml += "<div class='text--nowrap'>" + m.username + '</div>'; }); } return ( - <div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" > - <div id="member_tooltip" data-toggle="tooltip" title="View Channel Members"> - {count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span> + <div id='member_popover' data-toggle='popover' data-content={popoverHtml} data-original-title='Members' > + <div id='member_tooltip' data-placement='left' data-toggle='tooltip' title='View Channel Members'> + {count} <span className='glyphicon glyphicon-user' aria-hidden='true'></span> </div> </div> ); @@ -68,53 +76,53 @@ var PopoverListMembers = React.createClass({ }); function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - memberChannel: ChannelStore.getCurrentMember(), - memberTeam: UserStore.getCurrentUser(), - users: ChannelStore.getCurrentExtraInfo().members, - search_visible: PostStore.getSearchResults() != null - }; + return { + channel: ChannelStore.getCurrent(), + memberChannel: ChannelStore.getCurrentMember(), + memberTeam: UserStore.getCurrentUser(), + users: ChannelStore.getCurrentExtraInfo().members, + searchVisible: PostStore.getSearchResults() != null + }; } module.exports = React.createClass({ displayName: 'ChannelHeader', componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - ChannelStore.addExtraInfoChangeListener(this._onChange); - PostStore.addSearchChangeListener(this._onChange); - UserStore.addChangeListener(this._onChange); - SocketStore.addChangeListener(this._onSocketChange); + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); + PostStore.addSearchChangeListener(this.onListenerChange); + UserStore.addChangeListener(this.onListenerChange); + SocketStore.addChangeListener(this.onSocketChange); }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); - ChannelStore.removeExtraInfoChangeListener(this._onChange); - PostStore.removeSearchChangeListener(this._onChange); - UserStore.addChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); + ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); + PostStore.removeSearchChangeListener(this.onListenerChange); + UserStore.addChangeListener(this.onListenerChange); }, - _onChange: function() { + onListenerChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } - $(".channel-header__info .description").popover({placement : 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); + $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); }, - _onSocketChange: function(msg) { - if (msg.action === "new_user") { + onSocketChange: function(msg) { + if (msg.action === 'new_user') { AsyncClient.getChannelExtraInfo(true); } }, getInitialState: function() { return getStateFromStores(); }, - handleLeave: function(e) { + handleLeave: function() { Client.leaveChannel(this.state.channel.id, - function(data) { + function() { var townsquare = ChannelStore.getByName('town-square'); utils.switchChannel(townsquare); }, function(err) { - AsyncClient.dispatchError(err, "handleLeave"); + AsyncClient.dispatchError(err, 'handleLeave'); } ); }, @@ -123,9 +131,16 @@ module.exports = React.createClass({ var user = UserStore.getCurrentUser(); - var terms = ""; + var terms = ''; if (user.notify_props && user.notify_props.mention_keys) { - terms = UserStore.getCurrentMentionKeys().join(' '); + var termKeys = UserStore.getCurrentMentionKeys(); + if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { + termKeys.splice(termKeys.indexOf('@all'), 1); + } + if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { + termKeys.splice(termKeys.indexOf('@channel'), 1); + } + terms = termKeys.join(' '); } AppDispatcher.handleServerAction({ @@ -135,81 +150,89 @@ module.exports = React.createClass({ is_mention_search: true }); }, - render: function() { - if (this.state.channel == null) { return null; } var channel = this.state.channel; - var description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true}); + var description = utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); var popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); var channelTitle = channel.display_name; var currentId = UserStore.getCurrentId(); - var isAdmin = this.state.memberChannel.roles.indexOf("admin") > -1 || this.state.memberTeam.roles.indexOf("admin") > -1; + var isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; var isDirect = (this.state.channel.type === 'D'); if (isDirect) { if (this.state.users.length > 1) { - var contact = this.state.users[((this.state.users[0].id === currentId) ? 1 : 0)]; + var contact; + if (this.state.users[0].id === currentId) { + contact = this.state.users[1]; + } else { + contact = this.state.users[0]; + } channelTitle = contact.nickname || contact.username; } } + var channelTerm = 'Channel'; + if (channel.type === 'P') { + channelTerm = 'Group'; + } + return ( - <table className="channel-header alt"> + <table className='channel-header alt'> <tr> <th> - <div className="channel-header__info"> - <div className="dropdown"> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> - <strong className="heading">{channelTitle} </strong> - <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> + <div className='channel-header__info'> + <div className='dropdown'> + <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'> + <strong className='heading'>{channelTitle} </strong> + <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> </a> - { !isDirect ? - <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_info" data-channelid={channel.id} href="#">View Info</a></li> - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> + {!isDirect ? + <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> + <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_info' data-channelid={channel.id} href='#'>View Info</a></li> + {!ChannelStore.isDefault(channel) ? + <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li> : null } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> + {isAdmin && !ChannelStore.isDefault(channel) ? + <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li> : null } - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li> - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li> + <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set {channelTerm} Description...</a></li> + <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li> + {isAdmin && !ChannelStore.isDefault(channel) ? + <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename {channelTerm}...</a></li> : null } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li> + {isAdmin && !ChannelStore.isDefault(channel) ? + <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete {channelTerm}...</a></li> : null } - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li> + {!ChannelStore.isDefault(channel) ? + <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave {channelTerm}</a></li> : null } </ul> : - <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> + <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> + <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> </ul> } </div> - <div data-toggle="popover" data-content={popoverContent} className="description">{description}</div> + <div data-toggle='popover' data-content={popoverContent} className='description'>{description}</div> </div> </th> <th><PopoverListMembers members={this.state.users} channelId={channel.id} /></th> - <th className="search-bar__container"><NavbarSearchBox /></th> + <th className='search-bar__container'><NavbarSearchBox /></th> <th> - <div className="dropdown channel-header__links"> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_right_dropdown" data-toggle="dropdown" aria-expanded="true"> - <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} /> </a> - <ul className="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="channel_header_right_dropdown"> - <li role="presentation"><a role="menuitem" href="#" onClick={this.searchMentions}>Recent Mentions</a></li> + <div className='dropdown channel-header__links'> + <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_right_dropdown' data-toggle='dropdown' aria-expanded='true'> + <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> </a> + <ul className='dropdown-menu dropdown-menu-right' role='menu' aria-labelledby='channel_header_right_dropdown'> + <li role='presentation'><a role='menuitem' href='#' onClick={this.searchMentions}>Recent Mentions</a></li> </ul> </div> </th> |