mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Cosmetic refactoring to be inline with the style guide

Просмотр исходного кода
Этот коммит содержится в:
Reed Garmsen
2015-07-31 14:29:35 -07:00
родитель 568496e3a2
Коммит 77964dbfac
1 изменённых файлов: 95 добавлений и 84 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

179
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-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,14 +131,14 @@ module.exports = React.createClass({
var user = UserStore.getCurrentUser();
var terms = "";
var terms = '';
if (user.notify_props && user.notify_props.mention_keys) {
var termKeys = UserStore.getCurrentMentionKeys();
if (user.notify_props.all === "true" && termKeys.indexOf("@all") !== -1) {
termKeys.splice(termKeys.indexOf("@all"), 1);
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);
if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) {
termKeys.splice(termKeys.indexOf('@channel'), 1);
}
terms = termKeys.join(' ');
}
@@ -142,81 +150,84 @@ 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;
}
}
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 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>
: 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 Channel...</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 Channel</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>