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. // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
var ChannelStore = require('../stores/channel_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx'); var UserStore = require('../stores/user_store.jsx');
var PostStore = require('../stores/post_store.jsx'); var PostStore = require('../stores/post_store.jsx');
var SocketStore = require('../stores/socket_store.jsx') var SocketStore = require('../stores/socket_store.jsx');
var UserProfile = require( './user_profile.jsx' ); var NavbarSearchBox = require('./search_bar.jsx');
var NavbarSearchBox =require('./search_bar.jsx');
var AsyncClient = require('../utils/async_client.jsx'); var AsyncClient = require('../utils/async_client.jsx');
var Client = require('../utils/client.jsx'); var Client = require('../utils/client.jsx');
var utils = require('../utils/utils.jsx'); var utils = require('../utils/utils.jsx');
@@ -21,23 +19,28 @@ var PopoverListMembers = React.createClass({
componentDidMount: function() { componentDidMount: function() {
var originalLeave = $.fn.popover.Constructor.prototype.leave; var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) { $.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); originalLeave.call(this, obj);
if (obj.currentTarget && self.$tip) { if (obj.currentTarget && selfObj.$tip) {
self.$tip.one('mouseenter', function() { selfObj.$tip.one('mouseenter', function() {
clearTimeout(self.timeout); clearTimeout(selfObj.timeout);
self.$tip.one('mouseleave', function() { selfObj.$tip.one('mouseleave', function() {
$.fn.popover.Constructor.prototype.leave.call(self, self); $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj);
}); });
}) });
} }
}; };
$("#member_popover").popover({placement : 'bottom', trigger: 'click', html: true}); $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true});
$('body').on('click', function (e) { $('body').on('click', function(e) {
if ($(e.target.parentNode.parentNode)[0] !== $("#member_popover")[0] && $(e.target).parents('.popover.in').length === 0) { if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) {
$("#member_popover").popover('hide'); $('#member_popover').popover('hide');
} }
}); });
}, },
@@ -45,22 +48,27 @@ var PopoverListMembers = React.createClass({
render: function() { render: function() {
var popoverHtml = ''; var popoverHtml = '';
var members = this.props.members; 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) { if (members) {
members.sort(function(a,b) { members.sort(function(a, b) {
return a.username.localeCompare(b.username); return a.username.localeCompare(b.username);
}); });
members.forEach(function(m) { members.forEach(function(m) {
popoverHtml += "<div class='text--nowrap'>" + m.username + "</div>"; popoverHtml += "<div class='text--nowrap'>" + m.username + '</div>';
}); });
} }
return ( return (
<div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" > <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"> <div id='member_tooltip' data-toggle='tooltip' title='View Channel Members'>
{count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span> {count} <span className='glyphicon glyphicon-user' aria-hidden='true'></span>
</div> </div>
</div> </div>
); );
@@ -68,53 +76,53 @@ var PopoverListMembers = React.createClass({
}); });
function getStateFromStores() { function getStateFromStores() {
return { return {
channel: ChannelStore.getCurrent(), channel: ChannelStore.getCurrent(),
memberChannel: ChannelStore.getCurrentMember(), memberChannel: ChannelStore.getCurrentMember(),
memberTeam: UserStore.getCurrentUser(), memberTeam: UserStore.getCurrentUser(),
users: ChannelStore.getCurrentExtraInfo().members, users: ChannelStore.getCurrentExtraInfo().members,
search_visible: PostStore.getSearchResults() != null searchVisible: PostStore.getSearchResults() != null
}; };
} }
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'ChannelHeader', displayName: 'ChannelHeader',
componentDidMount: function() { componentDidMount: function() {
ChannelStore.addChangeListener(this._onChange); ChannelStore.addChangeListener(this.onListenerChange);
ChannelStore.addExtraInfoChangeListener(this._onChange); ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
PostStore.addSearchChangeListener(this._onChange); PostStore.addSearchChangeListener(this.onListenerChange);
UserStore.addChangeListener(this._onChange); UserStore.addChangeListener(this.onListenerChange);
SocketStore.addChangeListener(this._onSocketChange); SocketStore.addChangeListener(this.onSocketChange);
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
ChannelStore.removeChangeListener(this._onChange); ChannelStore.removeChangeListener(this.onListenerChange);
ChannelStore.removeExtraInfoChangeListener(this._onChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange);
PostStore.removeSearchChangeListener(this._onChange); PostStore.removeSearchChangeListener(this.onListenerChange);
UserStore.addChangeListener(this._onChange); UserStore.addChangeListener(this.onListenerChange);
}, },
_onChange: function() { onListenerChange: function() {
var newState = getStateFromStores(); var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) { if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState); 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) { onSocketChange: function(msg) {
if (msg.action === "new_user") { if (msg.action === 'new_user') {
AsyncClient.getChannelExtraInfo(true); AsyncClient.getChannelExtraInfo(true);
} }
}, },
getInitialState: function() { getInitialState: function() {
return getStateFromStores(); return getStateFromStores();
}, },
handleLeave: function(e) { handleLeave: function() {
Client.leaveChannel(this.state.channel.id, Client.leaveChannel(this.state.channel.id,
function(data) { function() {
var townsquare = ChannelStore.getByName('town-square'); var townsquare = ChannelStore.getByName('town-square');
utils.switchChannel(townsquare); utils.switchChannel(townsquare);
}, },
function(err) { function(err) {
AsyncClient.dispatchError(err, "handleLeave"); AsyncClient.dispatchError(err, 'handleLeave');
} }
); );
}, },
@@ -123,14 +131,14 @@ module.exports = React.createClass({
var user = UserStore.getCurrentUser(); var user = UserStore.getCurrentUser();
var terms = ""; var terms = '';
if (user.notify_props && user.notify_props.mention_keys) { if (user.notify_props && user.notify_props.mention_keys) {
var termKeys = UserStore.getCurrentMentionKeys(); var termKeys = UserStore.getCurrentMentionKeys();
if (user.notify_props.all === "true" && termKeys.indexOf("@all") !== -1) { if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) {
termKeys.splice(termKeys.indexOf("@all"), 1); termKeys.splice(termKeys.indexOf('@all'), 1);
} }
if (user.notify_props.channel === "true" && termKeys.indexOf("@channel") !== -1) { if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) {
termKeys.splice(termKeys.indexOf("@channel"), 1); termKeys.splice(termKeys.indexOf('@channel'), 1);
} }
terms = termKeys.join(' '); terms = termKeys.join(' ');
} }
@@ -142,81 +150,84 @@ module.exports = React.createClass({
is_mention_search: true is_mention_search: true
}); });
}, },
render: function() { render: function() {
if (this.state.channel == null) { if (this.state.channel == null) {
return null; return null;
} }
var channel = this.state.channel; 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 popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>);
var channelTitle = channel.display_name; var channelTitle = channel.display_name;
var currentId = UserStore.getCurrentId(); 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'); var isDirect = (this.state.channel.type === 'D');
if (isDirect) { if (isDirect) {
if (this.state.users.length > 1) { 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; channelTitle = contact.nickname || contact.username;
} }
} }
return ( return (
<table className="channel-header alt"> <table className='channel-header alt'>
<tr> <tr>
<th> <th>
<div className="channel-header__info"> <div className='channel-header__info'>
<div className="dropdown"> <div className='dropdown'>
<a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'>
<strong className="heading">{channelTitle} </strong> <strong className='heading'>{channelTitle} </strong>
<span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
</a> </a>
{ !isDirect ? {!isDirect ?
<ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> <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> <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) ? {!ChannelStore.isDefault(channel) ?
<li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>
: null : null
} }
{ isAdmin && !ChannelStore.isDefault(channel) ? {isAdmin && !ChannelStore.isDefault(channel) ?
<li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>
: null : 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='#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> <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) ? {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='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>
: null : null
} }
{ isAdmin && !ChannelStore.isDefault(channel) ? {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> <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 : null
} }
{ !ChannelStore.isDefault(channel) ? {!ChannelStore.isDefault(channel) ?
<li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li> <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>
: null : null
} }
</ul> </ul>
: :
<ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> <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> <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> </ul>
} }
</div> </div>
<div data-toggle="popover" data-content={popoverContent} className="description">{description}</div> <div data-toggle='popover' data-content={popoverContent} className='description'>{description}</div>
</div> </div>
</th> </th>
<th><PopoverListMembers members={this.state.users} channelId={channel.id} /></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> <th>
<div className="dropdown channel-header__links"> <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"> <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> <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> </a>
<ul className="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="channel_header_right_dropdown"> <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> <li role='presentation'><a role='menuitem' href='#' onClick={this.searchMentions}>Recent Mentions</a></li>
</ul> </ul>
</div> </div>
</th> </th>