summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/navbar.jsx272
-rw-r--r--web/react/components/notify_counts.jsx49
-rw-r--r--web/react/components/post_list.jsx6
-rw-r--r--web/react/components/post_right.jsx4
-rw-r--r--web/react/utils/utils.jsx4
5 files changed, 175 insertions, 160 deletions
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6d23c0d9b..3e0a66e92 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -1,111 +1,62 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-
-var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var UserStore = require('../stores/user_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
var TeamStore = require('../stores/team_store.jsx');
-
-var UserProfile = require('./user_profile.jsx');
var MessageWrapper = require('./message_wrapper.jsx');
+var NotifyCounts = require('./notify_counts.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-function getCountsStateFromStores() {
- var count = 0;
- var channels = ChannelStore.getAll();
- var members = ChannelStore.getAllMembers();
-
- channels.forEach(function(channel) {
- var channelMember = members[channel.id];
- if (channel.type === 'D') {
- count += channel.total_msg_count - channelMember.msg_count;
- } else {
- if (channelMember.mention_count > 0) {
- count += channelMember.mention_count;
- } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) {
- count += 1;
- }
- }
- });
-
- return { count: count };
-}
-
-var NotifyCounts = React.createClass({
- componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
- },
- componentWillUnmount: function() {
- ChannelStore.removeChangeListener(this._onChange);
- },
- _onChange: function() {
- var newState = getCountsStateFromStores();
- if (!utils.areStatesEqual(newState, this.state)) {
- this.setState(newState);
- }
- },
- getInitialState: function() {
- return getCountsStateFromStores();
- },
- render: function() {
- if (this.state.count) {
- return <span className="badge badge-notify">{ this.state.count }</span>;
- } else {
- return null;
- }
- }
-});
-
function getStateFromStores() {
- return {
- channel: ChannelStore.getCurrent(),
- member: ChannelStore.getCurrentMember(),
- users: ChannelStore.getCurrentExtraInfo().members
- };
+ return {
+ channel: ChannelStore.getCurrent(),
+ member: ChannelStore.getCurrentMember(),
+ users: ChannelStore.getCurrentExtraInfo().members
+ };
}
module.exports = React.createClass({
displayName: 'Navbar',
-
+ propTypes: {
+ teamDisplayName: React.PropTypes.string
+ },
componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
- ChannelStore.addExtraInfoChangeListener(this._onChange);
+ ChannelStore.addChangeListener(this.onListenerChange);
+ ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
$('.inner__wrap').click(this.hideSidebars);
- $('body').on('click.infopopover', function(e) {
- if ($(e.target).attr('data-toggle') !== 'popover'
- && $(e.target).parents('.popover.in').length === 0) {
+ $('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: function() {
- ChannelStore.removeChangeListener(this._onChange);
+ ChannelStore.removeChangeListener(this.onListenerChange);
},
handleSubmit: function(e) {
e.preventDefault();
},
- handleLeave: function(e) {
+ handleLeave: function() {
client.leaveChannel(this.state.channel.id,
- function(data, text, req) {
+ function success() {
AsyncClient.getChannels(true);
window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square';
- }.bind(this),
- function(err) {
- AsyncClient.dispatchError(err, "handleLeave");
+ },
+ function error(err) {
+ AsyncClient.dispatchError(err, 'handleLeave');
}
);
},
hideSidebars: function(e) {
var windowWidth = $(window).outerWidth();
- if(windowWidth <= 768) {
+ if (windowWidth <= 768) {
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_SEARCH,
results: null
@@ -116,7 +67,7 @@ module.exports = React.createClass({
results: null
});
- if (e.target.className != 'navbar-toggle' && e.target.className != 'icon-bar') {
+ if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
$('.inner__wrap').removeClass('move--right move--left move--left-small');
$('.sidebar--left').removeClass('move--right');
$('.sidebar--right').removeClass('move--left');
@@ -132,27 +83,24 @@ module.exports = React.createClass({
$('.inner__wrap').toggleClass('move--left-small');
$('.sidebar--menu').toggleClass('move--left');
},
- _onChange: function() {
+ onListenerChange: function() {
this.setState(getStateFromStores());
- $("#navbar .navbar-brand .description").popover({placement : 'bottom', trigger: 'click', html: true});
+ $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true});
},
getInitialState: function() {
return getStateFromStores();
},
render: function() {
-
var currentId = UserStore.getCurrentId();
- var popoverContent = "";
+ var popoverContent = '';
var channelTitle = this.props.teamDisplayName;
var isAdmin = false;
var isDirect = false;
- var description = ""
var channel = this.state.channel;
if (channel) {
- description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true});
- popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>);
- isAdmin = this.state.member.roles.indexOf("admin") > -1;
+ popoverContent = React.renderToString(<MessageWrapper message={channel.description} options={{singleline: true, noMentionHighlight: true}}/>);
+ isAdmin = this.state.member.roles.indexOf('admin') > -1;
if (channel.type === 'O') {
channelTitle = channel.display_name;
@@ -162,92 +110,112 @@ module.exports = React.createClass({
isDirect = true;
if (this.state.users.length > 1) {
if (this.state.users[0].id === currentId) {
- channelTitle = <UserProfile userId={this.state.users[1].id} />;
+ channelTitle = UserStore.getProfile(this.state.users[1].id).username;
} else {
- channelTitle = <UserProfile userId={this.state.users[0].id} />;
+ channelTitle = UserStore.getProfile(this.state.users[0].id).username;
}
}
}
- if (channel.description.length == 0) {
+ 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>);
}
}
- var navbar_collapse_button = currentId != null ? null :
- <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
- <span className="sr-only">Toggle sidebar</span>
- <span className="icon-bar"></span>
- <span className="icon-bar"></span>
- <span className="icon-bar"></span>
- </button>;
- var sidebar_collapse_button = currentId == null ? null :
- <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleLeftSidebar}>
- <span className="sr-only">Toggle sidebar</span>
- <span className="icon-bar"></span>
- <span className="icon-bar"></span>
- <span className="icon-bar"></span>
- <NotifyCounts />
- </button>;
- var right_sidebar_collapse_button= currentId == null ? null :
- <button type="button" className="navbar-toggle menu-toggle pull-right" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleRightSidebar}>
- <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} />
- </button>;
+ var navbarCollapseButton = null;
+ if (currentId == null) {
+ navbarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse-1'>
+ <span className='sr-only'>Toggle sidebar</span>
+ <span className='icon-bar'></span>
+ <span className='icon-bar'></span>
+ <span className='icon-bar'></span>
+ </button>);
+ }
+
+ var sidebarCollapseButton = null;
+ if (currentId != null) {
+ sidebarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleLeftSidebar}>
+ <span className='sr-only'>Toggle sidebar</span>
+ <span className='icon-bar'></span>
+ <span className='icon-bar'></span>
+ <span className='icon-bar'></span>
+ <NotifyCounts />
+ </button>);
+ }
+
+ var rightSidebarCollapseButton = null;
+ if (currentId != null) {
+ rightSidebarCollapseButton = (<button type='button' className='navbar-toggle menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar}>
+ <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
+ </button>);
+ }
+
+ var channelMenuDropdown = null;
+ if (channel) {
+ var addMembersOption = null;
+ if (!isDirect && !ChannelStore.isDefault(channel)) {
+ addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>;
+ }
+
+ var manageMembersOption = null;
+ if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
+ manageMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>;
+ }
+
+ var setChannelDescriptionOption = <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>;
+
+ var notificationPreferenceOption = null;
+ if (!isDirect) {
+ notificationPreferenceOption = <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>;
+ }
+
+ var renameChannelOption = null;
+ if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
+ renameChannelOption = <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>;
+ }
+ var deleteChannelOption = null;
+ if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
+ deleteChannelOption = <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>;
+ }
+
+ var leaveChannelOption = null;
+ if (!isDirect && !ChannelStore.isDefault(channel)) {
+ leaveChannelOption = <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>;
+ }
+
+ channelMenuDropdown = (<div className='navbar-brand'>
+ <div className='dropdown'>
+ <div data-toggle='popover' data-content={popoverContent} className='description info-popover'></div>
+ <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'>
+ <span className='heading'>{channelTitle} </span>
+ <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
+ </a>
+ <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'>
+ {addMembersOption}
+ {manageMembersOption}
+ {setChannelDescriptionOption}
+ {notificationPreferenceOption}
+ {renameChannelOption}
+ {deleteChannelOption}
+ {leaveChannelOption}
+ </ul>
+ </div>
+ </div>);
+ } else {
+ channelMenuDropdown = (<div className='navbar-brand'>
+ <a href='/' className='heading'>{channelTitle}</a>
+ </div>);
+ }
return (
- <nav className="navbar navbar-default navbar-fixed-top" role="navigation">
- <div className="container-fluid theme">
- <div className="navbar-header">
- { navbar_collapse_button }
- { sidebar_collapse_button }
- { right_sidebar_collapse_button }
- { !isDirect && channel ?
- <div className="navbar-brand">
- <div className="dropdown">
- <div data-toggle="popover" data-content={popoverContent} className="description info-popover"></div>
- <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
- <span className="heading">{channelTitle} </span>
- <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span>
- </a>
- <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown">
- { !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>
- : 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>
- : 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>
- : null
- }
- { !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li>
- : null
- }
- </ul>
- </div>
- </div>
- : null
- }
- { isDirect && channel ?
- <div className="navbar-brand">
- <a href="#" className="heading">{ channelTitle }</a>
- </div>
- : null }
- { !channel ?
- <div className="navbar-brand">
- <a href="/" className="heading">{ channelTitle }</a>
- </div>
- : "" }
+ <nav className='navbar navbar-default navbar-fixed-top' role='navigation'>
+ <div className='container-fluid theme'>
+ <div className='navbar-header'>
+ {navbarCollapseButton}
+ {sidebarCollapseButton}
+ {rightSidebarCollapseButton}
+ {channelMenuDropdown}
</div>
</div>
</nav>
diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx
new file mode 100644
index 000000000..ebc49882b
--- /dev/null
+++ b/web/react/components/notify_counts.jsx
@@ -0,0 +1,49 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var utils = require('../utils/utils.jsx');
+var ChannelStore = require('../stores/channel_store.jsx');
+
+function getCountsStateFromStores() {
+ var count = 0;
+ var channels = ChannelStore.getAll();
+ var members = ChannelStore.getAllMembers();
+
+ channels.forEach(function setChannelInfo(channel) {
+ var channelMember = members[channel.id];
+ if (channel.type === 'D') {
+ count += channel.total_msg_count - channelMember.msg_count;
+ } else if (channelMember.mention_count > 0) {
+ count += channelMember.mention_count;
+ } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) {
+ count += 1;
+ }
+ });
+
+ return {count: count};
+}
+
+module.exports = React.createClass({
+ displayName: 'NotifyCounts',
+ componentDidMount: function() {
+ ChannelStore.addChangeListener(this.onListenerChange);
+ },
+ componentWillUnmount: function() {
+ ChannelStore.removeChangeListener(this.onListenerChange);
+ },
+ onListenerChange: function() {
+ var newState = getCountsStateFromStores();
+ if (!utils.areStatesEqual(newState, this.state)) {
+ this.setState(newState);
+ }
+ },
+ getInitialState: function() {
+ return getCountsStateFromStores();
+ },
+ render: function() {
+ if (this.state.count) {
+ return <span className='badge badge-notify'>{this.state.count}</span>;
+ }
+ return null;
+ }
+});
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index c210853ac..bebd6847f 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -198,12 +198,6 @@ module.exports = React.createClass({
PostStore.storePost(post);
} else if (msg.action === 'post_edited') {
if (this.state.channel.id === msg.channel_id) {
- this.setState({postList: postList});
- }
-
- PostStore.storePosts(post.channel_id, postList);
- } else if (msg.action === 'post_edited') {
- if (this.state.channel.id === msg.channel_id) {
postList = this.state.postList;
if (!(msg.props.post_id in postList.posts)) {
return;
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 175e1080d..c8c51b0c3 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -120,7 +120,7 @@ RootPost = React.createClass({
<div className='post__content'>
<ul className='post-header'>
<li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li>
- <li className='post-header-col'><time className='post-right-root-time'>{utils.displayDate(post.create_at) + ' ' + utils.displayTime(post.create_at)}</time></li>
+ <li className='post-header-col'><time className='post-right-root-time'>{utils.displayCommentDateTime(post.create_at)}</time></li>
<li className='post-header-col post-header__reply'>
<div className='dropdown'>
{ownerOptions}
@@ -229,7 +229,7 @@ CommentPost = React.createClass({
<div className='post__content'>
<ul className='post-header'>
<li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li>
- <li className='post-header-col'><time className='post-right-comment-time'>{utils.displayDateTime(post.create_at)}</time></li>
+ <li className='post-header-col'><time className='post-right-comment-time'>{utils.displayCommentDateTime(post.create_at)}</time></li>
<li className='post-header-col post-header__reply'>
{ownerOptions}
</li>
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index f1fd3da67..618cc1557 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -192,6 +192,10 @@ module.exports.displayDateTime = function(ticks) {
}
+module.exports.displayCommentDateTime = function(ticks) {
+ return module.exports.displayDate(ticks) + ' ' + module.exports.displayTime(ticks);
+}
+
// returns Unix timestamp in milliseconds
module.exports.getTimestamp = function() {
return Date.now();
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-08 08:01:30 +0000