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

Merge pull request #1249 from mattermost/plt-823

Просмотр исходного кода 
PLT-823 Refactor of center channel
Этот коммит содержится в:
Harrison Healey
2015-11-02 14:20:54 -05:00
родитель 31eee1ef6e d4ec6d3bf4
Коммит e52669c2da
24 изменённых файлов: 1066 добавлений и 1008 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
config/config.json
Просмотреть файл

@@ -92,4 +92,4 @@
"TokenEndpoint": "",
"UserApiEndpoint": ""
}
}
}

1
model/team.go
Просмотреть файл

@@ -229,6 +229,5 @@ func (o *Team) PreExport() {
func (o *Team) Sanitize() {
o.Email = ""
o.Type = ""
o.AllowedDomains = ""
}

54
web/react/components/center_panel.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,54 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
var CreatePost = require('../components/create_post.jsx');
var PostsViewContainer = require('../components/posts_view_container.jsx');
var ChannelHeader = require('../components/channel_header.jsx');
var Navbar = require('../components/navbar.jsx');
var FileUploadOverlay = require('../components/file_upload_overlay.jsx');
export default class CenterPanel extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='inner__wrap channel__wrap'>
<div className='row header'>
<div id='navbar'>
<Navbar/>
</div>
</div>
<div className='row main'>
<FileUploadOverlay
id='file_upload_overlay'
overlayType='center'
/>
<div
id='app-content'
className='app__content'
>
<div id='channel-header'>
<ChannelHeader />
</div>
<div id='post-list'>
<PostsViewContainer />
</div>
<div
className='post-create__container'
id='post-create'
>
<CreatePost />
</div>
</div>
</div>
</div>
);
}
}
CenterPanel.defaultProps = {
};
CenterPanel.propTypes = {
};

43
web/react/components/channel_view.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,43 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
var CenterPanel = require('../components/center_panel.jsx');
var Sidebar = require('../components/sidebar.jsx');
var SidebarRight = require('../components/sidebar_right.jsx');
var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
export default class ChannelView extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='container-fluid'>
<div
className='sidebar--right'
id='sidebar-right'
>
<SidebarRight/>
</div>
<div
className='sidebar--menu'
id='sidebar-menu'
>
<SidebarRightMenu/>
</div>
<div
className='sidebar--left'
id='sidebar-left'
>
<Sidebar/>
</div>
<CenterPanel />
</div>
);
}
}
ChannelView.defaultProps = {
};
ChannelView.propTypes = {
};

1
web/react/components/create_post.jsx
Просмотреть файл

@@ -176,6 +176,7 @@ export default class CreatePost extends React.Component {
PostStore.storePendingPost(post);
PostStore.storeDraft(channel.id, null);
PostStore.jumpPostsViewToBottom();
this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
Client.createPost(post, channel,

2
web/react/components/edit_post_modal.jsx
Просмотреть файл

@@ -120,7 +120,7 @@ export default class EditPostModal extends React.Component {
PreferenceStore.addChangeListener(this.onPreferenceChange);
}
componentWillUnmount() {
PostStore.removeEditPostListener(this.handleEditPostEvent);
PostStore.removeEditPostListner(this.handleEditPostEvent);
PreferenceStore.removeChangeListener(this.onPreferenceChange);
}
render() {

4
web/react/components/post.jsx
Просмотреть файл

@@ -204,7 +204,6 @@ export default class Post extends React.Component {
posts={posts}
handleCommentClick={this.handleCommentClick}
retryPost={this.retryPost}
resize={this.props.resize}
/>
<PostInfo
ref='info'
@@ -228,6 +227,5 @@ Post.propTypes = {
sameUser: React.PropTypes.bool,
sameRoot: React.PropTypes.bool,
hideProfilePic: React.PropTypes.bool,
isLastComment: React.PropTypes.bool,
resize: React.PropTypes.func
isLastComment: React.PropTypes.bool
};

4
web/react/components/post_body.jsx
Просмотреть файл

@@ -50,7 +50,6 @@ export default class PostBody extends React.Component {
componentDidUpdate() {
this.parseEmojis();
this.props.resize();
}
componentWillReceiveProps(nextProps) {
@@ -338,6 +337,5 @@ PostBody.propTypes = {
post: React.PropTypes.object.isRequired,
parentPost: React.PropTypes.object,
retryPost: React.PropTypes.func.isRequired,
handleCommentClick: React.PropTypes.func.isRequired,
resize: React.PropTypes.func.isRequired
handleCommentClick: React.PropTypes.func.isRequired
};

18
web/react/components/post_info.jsx
Просмотреть файл

@@ -3,10 +3,9 @@
var UserStore = require('../stores/user_store.jsx');
var utils = require('../utils/utils.jsx');
var TimeSince = require('./time_since.jsx');
var Constants = require('../utils/constants.jsx');
var Tooltip = ReactBootstrap.Tooltip;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
export default class PostInfo extends React.Component {
constructor(props) {
@@ -144,21 +143,12 @@ export default class PostInfo extends React.Component {
var dropdown = this.createDropdown();
let tooltip = <Tooltip id={post.id + 'tooltip'}>{`${utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}`}</Tooltip>;
return (
<ul className='post-header post-info'>
<li className='post-header-col'>
<OverlayTrigger
delayShow={500}
container={this}
placement='top'
overlay={tooltip}
>
<time className='post-profile-time'>
{utils.displayDateTime(post.create_at)}
</time>
</OverlayTrigger>
<TimeSince
eventTime={post.create_at}
/>
</li>
<li className='post-header-col post-header__reply'>
<div className='dropdown'>

764
web/react/components/post_list.jsx
Просмотреть файл

@@ -1,764 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const Post = require('./post.jsx');
const UserProfile = require('./user_profile.jsx');
const AsyncClient = require('../utils/async_client.jsx');
const LoadingScreen = require('./loading_screen.jsx');
const PostStore = require('../stores/post_store.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
const UserStore = require('../stores/user_store.jsx');
const TeamStore = require('../stores/team_store.jsx');
const SocketStore = require('../stores/socket_store.jsx');
const PreferenceStore = require('../stores/preference_store.jsx');
const Utils = require('../utils/utils.jsx');
const Client = require('../utils/client.jsx');
const Constants = require('../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes;
const SocketEvents = Constants.SocketEvents;
const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
export default class PostList extends React.Component {
constructor(props) {
super(props);
this.gotMorePosts = false;
this.scrolled = false;
this.prevScrollTop = 0;
this.seenNewMessages = false;
this.isUserScroll = true;
this.userHasSeenNew = false;
this.loadInProgress = false;
this.onChange = this.onChange.bind(this);
this.onTimeChange = this.onTimeChange.bind(this);
this.onSocketChange = this.onSocketChange.bind(this);
this.createChannelIntroMessage = this.createChannelIntroMessage.bind(this);
this.loadMorePosts = this.loadMorePosts.bind(this);
this.loadFirstPosts = this.loadFirstPosts.bind(this);
this.activate = this.activate.bind(this);
this.deactivate = this.deactivate.bind(this);
this.handleResize = this.handleResize.bind(this);
this.resizePostList = this.resizePostList.bind(this);
this.updateScroll = this.updateScroll.bind(this);
const state = this.getStateFromStores(props.channelId);
state.numToDisplay = Constants.POST_CHUNK_SIZE;
state.isFirstLoadComplete = false;
state.windowHeight = Utils.windowHeight();
this.state = state;
}
getStateFromStores(id) {
var postList = PostStore.getPosts(id);
if (postList != null) {
var deletedPosts = PostStore.getUnseenDeletedPosts(id);
if (deletedPosts && Object.keys(deletedPosts).length > 0) {
for (var pid in deletedPosts) {
if (deletedPosts.hasOwnProperty(pid)) {
postList.posts[pid] = deletedPosts[pid];
postList.order.unshift(pid);
}
}
postList.order.sort((a, b) => {
if (postList.posts[a].create_at > postList.posts[b].create_at) {
return -1;
}
if (postList.posts[a].create_at < postList.posts[b].create_at) {
return 1;
}
return 0;
});
}
var pendingPostList = PostStore.getPendingPosts(id);
if (pendingPostList) {
postList.order = pendingPostList.order.concat(postList.order);
for (var ppid in pendingPostList.posts) {
if (pendingPostList.posts.hasOwnProperty(ppid)) {
postList.posts[ppid] = pendingPostList.posts[ppid];
}
}
}
}
return {
postList
};
}
componentDidMount() {
window.onload = () => this.scrollToBottom();
if (this.props.isActive) {
this.activate();
this.loadFirstPosts(this.props.channelId);
}
}
componentWillUnmount() {
this.deactivate();
}
activate() {
this.gotMorePosts = false;
this.scrolled = false;
this.prevScrollTop = 0;
this.seenNewMessages = false;
this.isUserScroll = true;
this.userHasSeenNew = false;
PostStore.clearUnseenDeletedPosts(this.props.channelId);
PostStore.addChangeListener(this.onChange);
UserStore.addStatusesChangeListener(this.onTimeChange);
PreferenceStore.addChangeListener(this.onTimeChange);
SocketStore.addChangeListener(this.onSocketChange);
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
window.addEventListener('resize', this.handleResize);
postHolder.on('scroll', () => {
const position = postHolder.scrollTop() + postHolder.height() + 14;
const bottom = postHolder[0].scrollHeight;
if (position >= bottom) {
this.scrolled = false;
} else {
this.scrolled = true;
}
if (this.isUserScroll) {
this.userHasSeenNew = true;
}
this.isUserScroll = true;
$('.top-visible-post').removeClass('top-visible-post');
$(ReactDOM.findDOMNode(this.refs.postlistcontent)).children().each(function select() {
if ($(this).position().top + $(this).height() / 2 > 0) {
$(this).addClass('top-visible-post');
return false;
}
});
});
$('.post-list__content div .post').removeClass('post--last');
$('.post-list__content div:last-child .post').addClass('post--last');
if (!this.state.isFirstLoadComplete) {
this.loadFirstPosts(this.props.channelId);
}
this.resizePostList();
this.onChange();
this.scrollToBottom();
}
deactivate() {
PostStore.removeChangeListener(this.onChange);
UserStore.removeStatusesChangeListener(this.onTimeChange);
SocketStore.removeChangeListener(this.onSocketChange);
PreferenceStore.removeChangeListener(this.onTimeChange);
$('body').off('click.userpopover');
window.removeEventListener('resize', this.handleResize);
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
postHolder.off('scroll');
}
componentDidUpdate(prevProps, prevState) {
if (!this.props.isActive) {
return;
}
if (prevState.windowHeight !== this.state.windowHeight) {
this.resizePostList();
if (!this.scrolled) {
this.scrollToBottom();
}
}
$('.post-list__content div .post').removeClass('post--last');
$('.post-list__content div:last-child .post').addClass('post--last');
if (this.state.postList == null || prevState.postList == null) {
this.scrollToBottom();
return;
}
var order = this.state.postList.order || [];
var posts = this.state.postList.posts || {};
var oldOrder = prevState.postList.order || [];
var oldPosts = prevState.postList.posts || {};
var userId = UserStore.getCurrentId();
var firstPost = posts[order[0]] || {};
var isNewPost = oldOrder.indexOf(order[0]) === -1;
if (this.props.isActive && !prevProps.isActive) {
this.scrollToBottom();
} else if (oldOrder.length === 0) {
this.scrollToBottom();
// the user is scrolled to the bottom
} else if (!this.scrolled) {
this.scrollToBottom();
// there's a new post and
// it's by the user (and not from their webhook) and not a comment
} else if (isNewPost &&
userId === firstPost.user_id &&
!firstPost.props.from_webhook &&
!Utils.isComment(firstPost)) {
this.scrollToBottom(true);
// the user clicked 'load more messages'
} else if (this.gotMorePosts && oldOrder.length > 0) {
let index;
if (prevState.numToDisplay >= oldOrder.length) {
index = oldOrder.length - 1;
} else {
index = prevState.numToDisplay;
}
const lastPost = oldPosts[oldOrder[index]];
$('#post_' + lastPost.id)[0].scrollIntoView();
this.gotMorePosts = false;
} else {
this.scrollTo(this.prevScrollTop);
}
}
componentWillUpdate() {
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
this.prevScrollTop = postHolder.scrollTop();
}
componentWillReceiveProps(nextProps) {
if (nextProps.isActive === true && this.props.isActive === false) {
this.activate();
} else if (nextProps.isActive === false && this.props.isActive === true) {
this.deactivate();
}
}
updateScroll() {
if (!this.scrolled) {
this.scrollToBottom();
}
}
handleResize() {
this.setState({
windowHeight: Utils.windowHeight()
});
}
resizePostList() {
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
if ($('#create_post').length > 0) {
const height = this.state.windowHeight - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
postHolder.css('height', height + 'px');
}
}
scrollTo(val) {
this.isUserScroll = false;
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
postHolder[0].scrollTop = val;
}
scrollToBottom(force) {
this.isUserScroll = false;
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
if ($('#new_message_' + this.props.channelId)[0] && !this.userHasSeenNew && !force) {
$('#new_message_' + this.props.channelId)[0].scrollIntoView();
} else {
postHolder.addClass('hide-scroll');
postHolder[0].scrollTop = postHolder[0].scrollHeight;
postHolder.removeClass('hide-scroll');
}
}
loadFirstPosts(id) {
if (this.loadInProgress) {
return;
}
if (this.props.channelId == null) {
return;
}
this.loadInProgress = true;
Client.getPosts(
id,
PostStore.getLatestUpdate(id),
() => {
this.loadInProgress = false;
this.setState({isFirstLoadComplete: true});
},
() => {
this.loadInProgress = false;
this.setState({isFirstLoadComplete: true});
}
);
}
onChange() {
var newState = this.getStateFromStores(this.props.channelId);
if (!Utils.areStatesEqual(newState.postList, this.state.postList)) {
this.setState(newState);
}
}
onSocketChange(msg) {
if (msg.action === SocketEvents.POST_DELETED) {
var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
var activeRootPostId = '';
if (activeRoot && activeRoot.id.length > 0) {
activeRootPostId = activeRoot.id;
}
if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) {
$('#post_deleted').modal('show');
}
}
}
onTimeChange() {
if (!this.state.postList) {
return;
}
for (var id in this.state.postList.posts) {
if (!this.refs[id]) {
continue;
}
this.refs[id].forceUpdateInfo();
}
}
createDMIntroMessage(channel) {
var teammate = Utils.getDirectTeammate(channel.id);
if (teammate) {
var teammateName = teammate.username;
if (teammate.nickname.length > 0) {
teammateName = teammate.nickname;
}
return (
<div className='channel-intro'>
<div className='post-profile-img__container channel-intro-img'>
<img
className='post-profile-img'
src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at + '&' + Utils.getSessionIndex()}
height='50'
width='50'
/>
</div>
<div className='channel-intro-profile'>
<strong><UserProfile userId={teammate.id} /></strong>
</div>
<p className='channel-intro-text'>
{'This is the start of your direct message history with ' + teammateName + '.'}<br/>
{'Direct messages and files shared here are not shown to people outside this area.'}
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
</div>
);
}
return (
<div className='channel-intro'>
<p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p>
</div>
);
}
createChannelIntroMessage(channel) {
if (channel.type === 'D') {
return this.createDMIntroMessage(channel);
} else if (ChannelStore.isDefault(channel)) {
return this.createDefaultIntroMessage(channel);
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
return this.createOffTopicIntroMessage(channel);
} else if (channel.type === 'O' || channel.type === 'P') {
return this.createStandardIntroMessage(channel);
}
}
createDefaultIntroMessage(channel) {
const team = TeamStore.getCurrent();
let inviteModalLink;
if (team.type === Constants.INVITE_TEAM) {
inviteModalLink = (
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#invite_member'
>
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
</a>
);
} else {
inviteModalLink = (
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#get_link'
data-title='Team Invite'
data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
>
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
</a>
);
}
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'>
<strong>{'Welcome to ' + channel.display_name + '!'}</strong>
<br/><br/>
{'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
</p>
{inviteModalLink}
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<br/>
</div>
);
}
createOffTopicIntroMessage(channel) {
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'>
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
<br/>
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#channel_invite'
>
<i className='fa fa-user-plus'></i>{'Invite others to this channel'}
</a>
</div>
);
}
getChannelCreator(channel) {
if (channel.creator_id.length > 0) {
var creator = UserStore.getProfile(channel.creator_id);
if (creator) {
return creator.username;
}
}
var members = ChannelStore.getExtraInfo(channel.id).members;
for (var i = 0; i < members.length; i++) {
if (Utils.isAdmin(members[i].roles)) {
return members[i].username;
}
}
}
createStandardIntroMessage(channel) {
var uiName = channel.display_name;
var creatorName = '';
var uiType;
var memberMessage;
if (channel.type === 'P') {
uiType = 'private group';
memberMessage = ' Only invited members can see this private group.';
} else {
uiType = 'channel';
memberMessage = ' Any member can join and read this channel.';
}
var createMessage;
if (creatorName === '') {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
} else {
createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{Utils.displayDate(channel.create_at)}</strong></span>);
}
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
<p className='channel-intro__content'>
{createMessage}
{memberMessage}
<br/>
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#channel_invite'
>
<i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
</a>
</div>
);
}
createPosts(posts, order) {
var postCtls = [];
var previousPostDay = new Date(0);
var userId = UserStore.getCurrentId();
var renderedLastViewed = false;
var lastViewed = Number.MAX_VALUE;
if (ChannelStore.getMember(this.props.channelId) != null) {
lastViewed = ChannelStore.getMember(this.props.channelId).last_viewed_at;
}
var numToDisplay = this.state.numToDisplay;
if (order.length - 1 < numToDisplay) {
numToDisplay = order.length - 1;
}
for (var i = numToDisplay; i >= 0; i--) {
var post = posts[order[i]];
var parentPost = posts[post.parent_id];
// If the post is a comment whose parent has been deleted, don't add it to the list.
if (parentPost && parentPost.state === Constants.POST_DELETED) {
continue;
}
var sameUser = false;
var sameRoot = false;
var hideProfilePic = false;
var prevPost = posts[order[i + 1]];
if (prevPost) {
sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5;
sameRoot = Utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// hide the profile pic if:
// the previous post was made by the same user as the current post,
// the previous post is not a comment,
// the current post is not a comment,
// the current post is not from a webhook
// and the previous post is not from a webhook
if ((prevPost.user_id === post.user_id) &&
!Utils.isComment(prevPost) &&
!Utils.isComment(post) &&
(!post.props || !post.props.from_webhook) &&
(!prevPost.props || !prevPost.props.from_webhook)) {
hideProfilePic = true;
}
}
// check if it's the last comment in a consecutive string of comments on the same post
// it is the last comment if it is last post in the channel or the next post has a different root post
var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
var postCtl = (
<Post
key={post.id + 'postKey'}
ref={post.id}
sameUser={sameUser}
sameRoot={sameRoot}
post={post}
parentPost={parentPost}
posts={posts}
hideProfilePic={hideProfilePic}
isLastComment={isLastComment}
resize={this.updateScroll}
/>
);
const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
postCtls.push(
<div
key={currentPostDay.toDateString()}
className='date-separator'
>
<hr className='separator__hr' />
<div className='separator__text'>{currentPostDay.toDateString()}</div>
</div>
);
}
if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
renderedLastViewed = true;
// Temporary fix to solve ie11 rendering issue
let newSeparatorId = '';
if (!Utils.isBrowserIE()) {
newSeparatorId = 'new_message_' + this.props.channelId;
}
postCtls.push(
<div
id={newSeparatorId}
key='unviewed'
className='new-separator'
>
<hr
className='separator__hr'
/>
<div className='separator__text'>{'New Messages'}</div>
</div>
);
}
postCtls.push(postCtl);
previousPostDay = currentPostDay;
}
return postCtls;
}
loadMorePosts() {
if (this.state.postList == null) {
return;
}
var posts = this.state.postList.posts;
var order = this.state.postList.order;
var channelId = this.props.channelId;
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Retrieving more messages...');
Client.getPostsPage(
channelId,
order.length,
Constants.POST_CHUNK_SIZE,
function success(data) {
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Load more messages');
this.gotMorePosts = true;
this.setState({numToDisplay: this.state.numToDisplay + Constants.POST_CHUNK_SIZE});
if (!data) {
return;
}
if (data.order.length === 0) {
return;
}
var postList = {};
postList.posts = $.extend(posts, data.posts);
postList.order = order.concat(data.order);
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_POSTS,
id: channelId,
post_list: postList
});
Client.getProfiles();
}.bind(this),
function fail(err) {
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Load more messages');
AsyncClient.dispatchError(err, 'getPosts');
}.bind(this)
);
}
render() {
var order = [];
var posts;
var channel = ChannelStore.get(this.props.channelId);
if (this.state.postList != null) {
posts = this.state.postList.posts;
order = this.state.postList.order;
}
var moreMessages = <p className='beginning-messages-text'>{'Beginning of Channel'}</p>;
if (channel != null) {
if (order.length >= this.state.numToDisplay) {
moreMessages = (
<a
ref='loadmore'
className='more-messages-text theme'
href='#'
onClick={this.loadMorePosts}
>
{'Load more messages'}
</a>
);
} else {
moreMessages = this.createChannelIntroMessage(channel);
}
}
var postCtls = [];
if (posts && this.state.isFirstLoadComplete) {
postCtls = this.createPosts(posts, order);
} else {
postCtls.push(
<LoadingScreen
position='absolute'
key='loading'
/>);
}
var activeClass = '';
if (!this.props.isActive) {
activeClass = 'inactive';
}
return (
<div
ref='postlist'
className={'post-list-holder-by-time ' + activeClass}
>
<div className='post-list__table'>
<div
ref='postlistcontent'
className='post-list__content'
>
{moreMessages}
{postCtls}
</div>
</div>
</div>
);
}
}
PostList.defaultProps = {
isActive: false,
channelId: null
};
PostList.propTypes = {
isActive: React.PropTypes.bool,
channelId: React.PropTypes.string
};

63
web/react/components/post_list_container.jsx
Просмотреть файл

@@ -1,63 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const PostList = require('./post_list.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
export default class PostListContainer extends React.Component {
constructor() {
super();
this.onChange = this.onChange.bind(this);
this.onLeave = this.onLeave.bind(this);
let currentChannelId = ChannelStore.getCurrentId();
if (currentChannelId) {
this.state = {currentChannelId: currentChannelId, postLists: [currentChannelId]};
} else {
this.state = {currentChannelId: null, postLists: []};
}
}
componentDidMount() {
ChannelStore.addChangeListener(this.onChange);
ChannelStore.addLeaveListener(this.onLeave);
}
onChange() {
let channelId = ChannelStore.getCurrentId();
if (channelId === this.state.currentChannelId) {
return;
}
let postLists = this.state.postLists;
if (postLists.indexOf(channelId) === -1) {
postLists.push(channelId);
}
this.setState({currentChannelId: channelId, postLists: postLists});
}
onLeave(id) {
let postLists = this.state.postLists;
var index = postLists.indexOf(id);
if (index !== -1) {
postLists.splice(index, 1);
}
}
render() {
let postLists = this.state.postLists;
let channelId = this.state.currentChannelId;
let postListCtls = [];
for (let i = 0; i <= this.state.postLists.length - 1; i++) {
postListCtls.push(
<PostList
key={'postlistkey' + i}
channelId={postLists[i]}
isActive={postLists[i] === channelId}
/>
);
}
return (
<div>{postListCtls}</div>
);
}
}

297
web/react/components/posts_view.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,297 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const UserStore = require('../stores/user_store.jsx');
const Utils = require('../utils/utils.jsx');
const Post = require('./post.jsx');
export default class PostsView extends React.Component {
constructor(props) {
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.isAtBottom = this.isAtBottom.bind(this);
this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
this.createPosts = this.createPosts.bind(this);
this.updateScrolling = this.updateScrolling.bind(this);
this.handleResize = this.handleResize.bind(this);
this.jumpToPostNode = null;
this.wasAtBottom = true;
this.scrollHeight = 0;
}
static get SCROLL_TYPE_FREE() {
return 1;
}
static get SCROLL_TYPE_BOTTOM() {
return 2;
}
static get SIDEBAR_OPEN() {
return 3;
}
isAtBottom() {
return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight);
}
handleScroll() {
// HACK FOR RHS -- REMOVE WHEN RHS DIES
const childNodes = this.refs.postlistcontent.childNodes;
for (let i = 0; i < childNodes.length; i++) {
// If the node is 1/3 down the page
if (childNodes[i].offsetTop > (this.refs.postlist.scrollTop + (this.refs.postlist.offsetHeight / 3))) {
this.jumpToPostNode = childNodes[i];
break;
}
}
this.wasAtBottom = this.isAtBottom();
// --- --------
this.props.postViewScrolled(this.isAtBottom());
this.prevScrollHeight = this.refs.postlist.scrollHeight;
}
loadMorePostsTop() {
this.props.loadMorePostsTopClicked();
}
createPosts(posts, order) {
const postCtls = [];
let previousPostDay = new Date(0);
const userId = UserStore.getCurrentId();
let renderedLastViewed = false;
let numToDisplay = this.props.numPostsToDisplay;
if (order.length - 1 < numToDisplay) {
numToDisplay = order.length - 1;
}
for (let i = numToDisplay; i >= 0; i--) {
const post = posts[order[i]];
const parentPost = posts[post.parent_id];
const prevPost = posts[order[i + 1]];
let sameUser = false;
let sameRoot = false;
let hideProfilePic = false;
if (prevPost) {
sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5;
sameRoot = Utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// hide the profile pic if:
// the previous post was made by the same user as the current post,
// the previous post is not a comment,
// the current post is not a comment,
// the current post is not from a webhook
// and the previous post is not from a webhook
if ((prevPost.user_id === post.user_id) &&
!Utils.isComment(prevPost) &&
!Utils.isComment(post) &&
(!post.props || !post.props.from_webhook) &&
(!prevPost.props || !prevPost.props.from_webhook)) {
hideProfilePic = true;
}
}
// check if it's the last comment in a consecutive string of comments on the same post
// it is the last comment if it is last post in the channel or the next post has a different root post
var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
var postCtl = (
<Post
key={post.id + 'postKey'}
ref={post.id}
sameUser={sameUser}
sameRoot={sameRoot}
post={post}
parentPost={parentPost}
posts={posts}
hideProfilePic={hideProfilePic}
isLastComment={isLastComment}
/>
);
const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
postCtls.push(
<div
key={currentPostDay.toDateString()}
className='date-separator'
>
<hr className='separator__hr' />
<div className='separator__text'>{currentPostDay.toDateString()}</div>
</div>
);
}
if (post.user_id !== userId &&
this.props.messageSeparatorTime !== 0 &&
post.create_at > this.props.messageSeparatorTime &&
!renderedLastViewed) {
renderedLastViewed = true;
// Temporary fix to solve ie11 rendering issue
let newSeparatorId = '';
if (!Utils.isBrowserIE()) {
newSeparatorId = 'new_message_' + post.id;
}
postCtls.push(
<div
id={newSeparatorId}
key='unviewed'
className='new-separator'
>
<hr
className='separator__hr'
/>
<div className='separator__text'>{'New Messages'}</div>
</div>
);
}
postCtls.push(postCtl);
previousPostDay = currentPostDay;
}
return postCtls;
}
updateScrolling() {
if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) {
window.requestAnimationFrame(() => {
this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
});
} else if (this.props.scrollType === PostsView.SCROLL_TYPE_POST && this.props.scrollPost) {
window.requestAnimationFrame(() => {
const postNode = ReactDOM.findDOMNode(this.refs[this.props.scrollPost]);
postNode.scrollIntoView();
if (this.refs.postlist.scrollTop === postNode.offsetTop) {
this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / 3);
} else {
this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / 3) + (this.refs.postlist.scrollTop - postNode.offsetTop);
}
});
} else if (this.props.scrollType === PostsView.SIDEBAR_OPEN) {
// If we are at the bottom then stay there
if (this.wasAtBottom) {
this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
} else {
window.requestAnimationFrame(() => {
this.jumpToPostNode.scrollIntoView();
if (this.refs.postlist.scrollTop === this.jumpToPostNode.offsetTop) {
this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / 3);
} else {
this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / 3) + (this.refs.postlist.scrollTop - this.jumpToPostNode.offsetTop);
}
});
}
} else if (this.refs.postlist.scrollHeight !== this.prevScrollHeight) {
window.requestAnimationFrame(() => {
this.refs.postlist.scrollTop += (this.refs.postlist.scrollHeight - this.prevScrollHeight);
});
}
}
handleResize() {
this.updateScrolling();
}
componentDidMount() {
this.updateScrolling();
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
componentDidUpdate() {
this.updateScrolling();
}
shouldComponentUpdate(nextProps) {
if (this.props.isActive !== nextProps.isActive) {
return true;
}
if (this.props.postList !== nextProps.postList) {
return true;
}
if (this.props.scrollPost !== nextProps.scrollPost) {
return true;
}
if (this.props.scrollType !== nextProps.scrollType && nextProps.scrollType !== PostsView.SCROLL_TYPE_FREE) {
return true;
}
if (this.props.numPostsToDisplay !== nextProps.numPostsToDisplay) {
return true;
}
if (this.props.messageSeparatorTime !== nextProps.messageSeparatorTime) {
return true;
}
if (!Utils.areStatesEqual(this.props.postList, nextProps.postList)) {
return true;
}
return false;
}
render() {
let posts = [];
let order = [];
let moreMessages;
let postElements;
let activeClass = 'inactive';
if (this.props.postList != null) {
posts = this.props.postList.posts;
order = this.props.postList.order;
// Create intro message or top loadmore link
if (order.length >= this.props.numPostsToDisplay) {
moreMessages = (
<a
ref='loadmore'
className='more-messages-text theme'
href='#'
onClick={this.loadMorePostsTop}
>
{'Load more messages'}
</a>
);
} else {
moreMessages = this.props.introText;
}
// Create post elements
postElements = this.createPosts(posts, order);
// Show ourselves if we are marked active
if (this.props.isActive) {
activeClass = '';
}
}
return (
<div
ref='postlist'
className={'post-list-holder-by-time ' + activeClass}
onScroll={this.handleScroll}
>
<div className='post-list__table'>
<div
ref='postlistcontent'
className='post-list__content'
>
{moreMessages}
{postElements}
</div>
</div>
</div>
);
}
}
PostsView.defaultProps = {
};
PostsView.propTypes = {
isActive: React.PropTypes.bool,
postList: React.PropTypes.object,
scrollPost: React.PropTypes.string,
scrollType: React.PropTypes.number,
postViewScrolled: React.PropTypes.func.isRequired,
loadMorePostsTopClicked: React.PropTypes.func.isRequired,
numPostsToDisplay: React.PropTypes.number,
introText: React.PropTypes.element,
messageSeparatorTime: React.PropTypes.number
};

264
web/react/components/posts_view_container.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,264 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const PostsView = require('./posts_view.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
const PostStore = require('../stores/post_store.jsx');
const Constants = require('../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes;
const Utils = require('../utils/utils.jsx');
const Client = require('../utils/client.jsx');
const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
const AsyncClient = require('../utils/async_client.jsx');
const LoadingScreen = require('./loading_screen.jsx');
import {createChannelIntroMessage} from '../utils/channel_intro_mssages.jsx';
export default class PostsViewContainer extends React.Component {
constructor() {
super();
this.onChannelChange = this.onChannelChange.bind(this);
this.onChannelLeave = this.onChannelLeave.bind(this);
this.onPostsChange = this.onPostsChange.bind(this);
this.handlePostsViewScroll = this.handlePostsViewScroll.bind(this);
this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
this.postsLoaded = this.postsLoaded.bind(this);
this.postsLoadedFailure = this.postsLoadedFailure.bind(this);
this.handlePostsViewJumpRequest = this.handlePostsViewJumpRequest.bind(this);
const currentChannelId = ChannelStore.getCurrentId();
const state = {
scrollType: PostsView.SCROLL_TYPE_BOTTOM,
scrollPost: null,
numPostsToDisplay: Constants.POST_CHUNK_SIZE
};
if (currentChannelId) {
Object.assign(state, {
currentChannelIndex: 0,
channels: [currentChannelId],
postLists: [this.getChannelPosts(currentChannelId)]
});
} else {
Object.assign(state, {
currentChannelIndex: null,
channels: [],
postLists: []
});
}
this.state = state;
}
componentDidMount() {
ChannelStore.addChangeListener(this.onChannelChange);
ChannelStore.addLeaveListener(this.onChannelLeave);
PostStore.addChangeListener(this.onPostsChange);
PostStore.addPostsViewJumpListener(this.handlePostsViewJumpRequest);
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onChannelChange);
ChannelStore.removeLeaveListener(this.onChannelLeave);
PostStore.removeChangeListener(this.onPostsChange);
PostStore.removePostsViewJumpListener(this.handlePostsViewJumpRequest);
}
handlePostsViewJumpRequest(type, post) {
switch (type) {
case Constants.PostsViewJumpTypes.BOTTOM:
this.setState({scrollType: PostsView.SCROLL_TYPE_BOTTOM});
break;
case Constants.PostsViewJumpTypes.POST:
this.setState({
scrollType: PostsView.SCROLL_TYPE_POST,
scrollPost: post
});
break;
case Constants.PostsViewJumpTypes.SIDEBAR_OPEN:
this.setState({scrollType: PostsView.SIDEBAR_OPEN});
break;
}
}
onChannelChange() {
const postLists = Object.assign({}, this.state.postLists);
const channels = this.state.channels.slice();
const channelId = ChannelStore.getCurrentId();
// Has the channel really changed?
if (channelId === channels[this.state.currentChannelIndex]) {
return;
}
PostStore.clearUnseenDeletedPosts(channelId);
let lastViewed = Number.MAX_VALUE;
const member = ChannelStore.getMember(channelId);
if (member != null) {
lastViewed = member.last_viewed_at;
}
let newIndex = channels.indexOf(channelId);
if (newIndex === -1) {
newIndex = channels.length;
channels.push(channelId);
postLists[newIndex] = this.getChannelPosts(channelId);
}
this.setState({
currentChannelIndex: newIndex,
currentLastViewed: lastViewed,
scrollType: PostsView.SCROLL_TYPE_BOTTOM,
channels,
postLists});
}
onChannelLeave(id) {
const postLists = Object.assign({}, this.state.postLists);
const channels = this.state.channels.slice();
const index = channels.indexOf(id);
if (index !== -1) {
postLists.splice(index, 1);
channels.splice(index, 1);
}
this.setState({channels, postLists});
}
onPostsChange() {
const channels = this.state.channels;
const postLists = Object.assign({}, this.state.postLists);
const newPostsView = this.getChannelPosts(channels[this.state.currentChannelIndex]);
postLists[this.state.currentChannelIndex] = newPostsView;
this.setState({postLists});
}
getChannelPosts(id) {
const postList = PostStore.getPosts(id);
if (postList != null) {
const deletedPosts = PostStore.getUnseenDeletedPosts(id);
if (deletedPosts && Object.keys(deletedPosts).length > 0) {
for (const pid in deletedPosts) {
if (deletedPosts.hasOwnProperty(pid)) {
postList.posts[pid] = deletedPosts[pid];
postList.order.unshift(pid);
}
}
postList.order.sort((a, b) => {
if (postList.posts[a].create_at > postList.posts[b].create_at) {
return -1;
}
if (postList.posts[a].create_at < postList.posts[b].create_at) {
return 1;
}
return 0;
});
}
const pendingPostList = PostStore.getPendingPosts(id);
if (pendingPostList) {
postList.order = pendingPostList.order.concat(postList.order);
for (const ppid in pendingPostList.posts) {
if (pendingPostList.posts.hasOwnProperty(ppid)) {
postList.posts[ppid] = pendingPostList.posts[ppid];
}
}
}
}
return postList;
}
loadMorePostsTop() {
const postLists = this.state.postLists;
const channels = this.state.channels;
const currentChannelId = channels[this.state.currentChannelIndex];
const currentPostList = postLists[this.state.currentChannelIndex];
this.setState({numPostsToDisplay: this.state.numPostsToDisplay + Constants.POST_CHUNK_SIZE});
Client.getPostsPage(
currentChannelId,
currentPostList.order.length,
Constants.POST_CHUNK_SIZE,
this.postsLoaded,
this.postsLoadedFailure
);
}
postsLoaded(data) {
if (!data) {
return;
}
if (data.order.length === 0) {
return;
}
const postLists = this.state.postLists;
const currentPostList = postLists[this.state.currentChannelIndex];
const channels = this.state.channels;
const currentChannelId = channels[this.state.currentChannelIndex];
var newPostList = {};
newPostList.posts = Object.assign(currentPostList.posts, data.posts);
newPostList.order = currentPostList.order.concat(data.order);
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_POSTS,
id: currentChannelId,
post_list: newPostList
});
Client.getProfiles();
}
postsLoadedFailure(err) {
AsyncClient.dispatchError(err, 'getPosts');
}
handlePostsViewScroll(atBottom) {
if (atBottom) {
this.setState({scrollType: PostsView.SCROLL_TYPE_BOTTOM});
} else {
this.setState({scrollType: PostsView.SCROLL_TYPE_FREE});
}
}
shouldComponentUpdate(nextProps, nextState) {
if (Utils.areStatesEqual(this.state, nextState)) {
return false;
}
return true;
}
render() {
const postLists = this.state.postLists;
const channels = this.state.channels;
const currentChannelId = channels[this.state.currentChannelIndex];
const channel = ChannelStore.get(currentChannelId);
const postListCtls = [];
for (let i = 0; i < channels.length; i++) {
const isActive = (channels[i] === currentChannelId);
postListCtls.push(
<PostsView
key={'postsviewkey' + i}
isActive={isActive}
postList={postLists[i]}
scrollType={this.state.scrollType}
scrollPost={this.state.scrollPost}
postViewScrolled={this.handlePostsViewScroll}
loadMorePostsTopClicked={this.loadMorePostsTop}
numPostsToDisplay={this.state.numPostsToDisplay}
introText={channel ? createChannelIntroMessage(channel) : null}
messageSeparatorTime={this.state.currentLastViewed}
/>
);
if ((!postLists[i] || !channel) && isActive) {
postListCtls.push(
<LoadingScreen
position='absolute'
key='loading'
/>
);
}
}
return (
<div>{postListCtls}</div>
);
}
}

10
web/react/components/rhs_thread.jsx
Просмотреть файл

@@ -34,12 +34,12 @@ export default class RhsThread extends React.Component {
}
var channelId = postList.posts[postList.order[0]].channel_id;
var pendingPostList = PostStore.getPendingPosts(channelId);
var pendingPostsList = PostStore.getPendingPosts(channelId);
if (pendingPostList) {
for (var pid in pendingPostList.posts) {
if (pendingPostList.posts.hasOwnProperty(pid)) {
postList.posts[pid] = pendingPostList.posts[pid];
if (pendingPostsList) {
for (var pid in pendingPostsList.posts) {
if (pendingPostsList.posts.hasOwnProperty(pid)) {
postList.posts[pid] = pendingPostsList.posts[pid];
}
}
}

17
web/react/components/sidebar.jsx
Просмотреть файл

@@ -178,10 +178,6 @@ export default class Sidebar extends React.Component {
window.addEventListener('resize', this.handleResize);
}
shouldComponentUpdate(nextProps, nextState) {
if (!Utils.areStatesEqual(nextProps, this.props)) {
return true;
}
if (!Utils.areStatesEqual(nextState, this.state)) {
return true;
}
@@ -235,7 +231,7 @@ export default class Sidebar extends React.Component {
const unread = this.getUnreadCount();
const mentionTitle = unread.mentions > 0 ? '(' + unread.mentions + ') ' : '';
const unreadTitle = unread.msgs > 0 ? '* ' : '';
document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + this.props.teamDisplayName + ' ' + currentSiteName;
document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + TeamStore.getCurrent().display_name + ' ' + currentSiteName;
}
}
onScroll() {
@@ -543,9 +539,9 @@ export default class Sidebar extends React.Component {
/>
<SidebarHeader
teamDisplayName={this.props.teamDisplayName}
teamName={this.props.teamName}
teamType={this.props.teamType}
teamDisplayName={TeamStore.getCurrent().display_name}
teamName={TeamStore.getCurrent().name}
teamType={TeamStore.getCurrent().type}
/>
<SearchBox />
@@ -631,11 +627,6 @@ export default class Sidebar extends React.Component {
}
Sidebar.defaultProps = {
teamType: '',
teamDisplayName: ''
};
Sidebar.propTypes = {
teamType: React.PropTypes.string,
teamDisplayName: React.PropTypes.string,
teamName: React.PropTypes.string
};

61
web/react/components/sidebar_right.jsx
Просмотреть файл

@@ -20,23 +20,48 @@ export default class SidebarRight extends React.Component {
this.onSelectedChange = this.onSelectedChange.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.doStrangeThings = this.doStrangeThings.bind(this);
this.state = getStateFromStores();
}
componentDidMount() {
SearchStore.addSearchChangeListener(this.onSearchChange);
PostStore.addSelectedPostChangeListener(this.onSelectedChange);
this.doStrangeThings();
}
componentWillUnmount() {
SearchStore.removeSearchChangeListener(this.onSearchChange);
PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
}
componentDidUpdate() {
if (this.plScrolledToBottom) {
var postHolder = $('.post-list-holder-by-time').not('.inactive');
postHolder.scrollTop(postHolder[0].scrollHeight);
} else {
$('.top-visible-post')[0].scrollIntoView();
componentWillUpdate() {
PostStore.jumpPostsViewSidebarOpen();
}
doStrangeThings() {
// We should have a better way to do this stuff
// Hence the function name.
$('.inner__wrap').removeClass('.move--right');
$('.inner__wrap').addClass('move--left');
$('.sidebar--left').removeClass('move--right');
$('.sidebar--right').addClass('move--left');
//$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
if (!(this.state.search_visible || this.state.post_right_visible)) {
$('.inner__wrap').removeClass('move--left').removeClass('move--right');
$('.sidebar--right').removeClass('move--left');
return (
<div></div>
);
}
/*setTimeout(() => {
$('.sidebar__overlay').fadeOut('200', () => {
$('.sidebar__overlay').remove();
});
}, 500);*/
}
componentDidUpdate() {
this.doStrangeThings();
}
onSelectedChange(fromSearch) {
var newState = getStateFromStores(fromSearch);
@@ -52,30 +77,6 @@ export default class SidebarRight extends React.Component {
}
}
render() {
var postHolder = $('.post-list-holder-by-time').not('.inactive');
const position = postHolder.scrollTop() + postHolder.height() + 14;
const bottom = postHolder[0].scrollHeight;
this.plScrolledToBottom = position >= bottom;
if (!(this.state.search_visible || this.state.post_right_visible)) {
$('.inner__wrap').removeClass('move--left').removeClass('move--right');
$('.sidebar--right').removeClass('move--left');
return (
<div></div>
);
}
$('.inner__wrap').removeClass('.move--right').addClass('move--left');
$('.sidebar--left').removeClass('move--right');
$('.sidebar--right').addClass('move--left');
$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
setTimeout(() => {
$('.sidebar__overlay').fadeOut('200', function fadeOverlay() {
$(this).remove();
});
}, 500);
var content = '';
if (this.state.search_visible) {

50
web/react/components/time_since.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,50 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
var Utils = require('../utils/utils.jsx');
var Tooltip = ReactBootstrap.Tooltip;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
export default class TimeSince extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.intervalId = setInterval(() => {
this.forceUpdate();
}, 30000);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
render() {
const displayDate = Utils.displayDate(this.props.eventTime);
const displayTime = Utils.displayTime(this.props.eventTime);
const tooltip = (
<Tooltip id={'time-since-tooltip-' + this.props.eventTime}>
{displayDate + ' at ' + displayTime}
</Tooltip>
);
return (
<OverlayTrigger
delayShow={400}
placement='top'
overlay={tooltip}
>
<time className='post-profile-time'>
{Utils.displayDateTime(this.props.eventTime)}
</time>
</OverlayTrigger>
);
}
}
TimeSince.defaultProps = {
eventTime: 0
};
TimeSince.propTypes = {
eventTime: React.PropTypes.number.isRequired
};

93
web/react/pages/channel.jsx
Просмотреть файл

@@ -2,13 +2,12 @@
// See License.txt for license information.
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
var Navbar = require('../components/navbar.jsx');
var Sidebar = require('../components/sidebar.jsx');
var ChannelHeader = require('../components/channel_header.jsx');
var PostListContainer = require('../components/post_list_container.jsx');
var CreatePost = require('../components/create_post.jsx');
var SidebarRight = require('../components/sidebar_right.jsx');
var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
var ChannelView = require('../components/channel_view.jsx');
var ChannelLoader = require('../components/channel_loader.jsx');
var ErrorBar = require('../components/error_bar.jsx');
var ErrorStore = require('../stores/error_store.jsx');
var MentionList = require('../components/mention_list.jsx');
var GetLinkModal = require('../components/get_link_modal.jsx');
var MemberInviteModal = require('../components/invite_member_modal.jsx');
var EditChannelModal = require('../components/edit_channel_modal.jsx');
@@ -24,15 +23,10 @@ var TeamSettingsModal = require('../components/team_settings_modal.jsx');
var ChannelMembersModal = require('../components/channel_members.jsx');
var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
var TeamMembersModal = require('../components/team_members.jsx');
var ErrorBar = require('../components/error_bar.jsx');
var ErrorStore = require('../stores/error_store.jsx');
var ChannelLoader = require('../components/channel_loader.jsx');
var MentionList = require('../components/mention_list.jsx');
var ChannelInfoModal = require('../components/channel_info_modal.jsx');
var AccessHistoryModal = require('../components/access_history_modal.jsx');
var ActivityLogModal = require('../components/activity_log_modal.jsx');
var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
var FileUploadOverlay = require('../components/file_upload_overlay.jsx');
var RegisterAppModal = require('../components/register_app_modal.jsx');
var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx');
@@ -61,19 +55,28 @@ function setupChannelPage(props) {
);
ReactDOM.render(
<Navbar teamDisplayName={props.TeamDisplayName} />,
document.getElementById('navbar')
<ChannelView/>,
document.getElementById('channel_view')
);
ReactDOM.render(
<Sidebar
teamDisplayName={props.TeamDisplayName}
teamName={props.TeamName}
teamType={props.TeamType}
/>,
document.getElementById('sidebar-left')
<MentionList id='post_textbox' />,
document.getElementById('post_mention_tab')
);
ReactDOM.render(
<MentionList id='reply_textbox' />,
document.getElementById('reply_mention_tab')
);
ReactDOM.render(
<MentionList id='edit_textbox' />,
document.getElementById('edit_mention_tab')
);
//
// Modals
//
ReactDOM.render(
<GetLinkModal />,
document.getElementById('get_link_modal')
@@ -104,11 +107,6 @@ function setupChannelPage(props) {
document.getElementById('invite_member_modal')
);
ReactDOM.render(
<ChannelHeader />,
document.getElementById('channel-header')
);
ReactDOM.render(
<EditChannelModal />,
document.getElementById('edit_channel_modal')
@@ -149,11 +147,6 @@ function setupChannelPage(props) {
document.getElementById('more_channels_modal')
);
ReactDOM.render(
<PostListContainer />,
document.getElementById('post-list')
);
ReactDOM.render(
<EditPostModal />,
document.getElementById('edit_post_modal')
@@ -169,39 +162,6 @@ function setupChannelPage(props) {
document.getElementById('post_deleted_modal')
);
ReactDOM.render(
<CreatePost />,
document.getElementById('post-create')
);
ReactDOM.render(
<SidebarRight />,
document.getElementById('sidebar-right')
);
ReactDOM.render(
<SidebarRightMenu
teamDisplayName={props.TeamDisplayName}
teamType={props.TeamType}
/>,
document.getElementById('sidebar-menu')
);
ReactDOM.render(
<MentionList id='post_textbox' />,
document.getElementById('post_mention_tab')
);
ReactDOM.render(
<MentionList id='reply_textbox' />,
document.getElementById('reply_mention_tab')
);
ReactDOM.render(
<MentionList id='edit_textbox' />,
document.getElementById('edit_mention_tab')
);
ReactDOM.render(
<AccessHistoryModal />,
document.getElementById('access_history_modal')
@@ -217,13 +177,6 @@ function setupChannelPage(props) {
document.getElementById('removed_from_channel_modal')
);
ReactDOM.render(
<FileUploadOverlay
overlayType='center'
/>,
document.getElementById('file_upload_overlay')
);
ReactDOM.render(
<RegisterAppModal />,
document.getElementById('register_app_modal')

43
web/react/stores/post_store.jsx
Просмотреть файл

@@ -14,6 +14,7 @@ var ActionTypes = Constants.ActionTypes;
var CHANGE_EVENT = 'change';
var SELECTED_POST_CHANGE_EVENT = 'selected_post_change';
var EDIT_POST_EVENT = 'edit_post';
var POSTS_VIEW_JUMP_EVENT = 'post_list_jump';
class PostStoreClass extends EventEmitter {
constructor() {
@@ -29,7 +30,11 @@ class PostStoreClass extends EventEmitter {
this.emitEditPost = this.emitEditPost.bind(this);
this.addEditPostListener = this.addEditPostListener.bind(this);
this.removeEditPostListener = this.removeEditPostListener.bind(this);
this.removeEditPostListener = this.removeEditPostListner.bind(this);
this.emitPostsViewJump = this.emitPostsViewJump.bind(this);
this.addPostsViewJumpListener = this.addPostsViewJumpListener.bind(this);
this.removePostsViewJumpListener = this.removePostsViewJumpListener.bind(this);
this.getCurrentPosts = this.getCurrentPosts.bind(this);
this.storePosts = this.storePosts.bind(this);
@@ -96,10 +101,34 @@ class PostStoreClass extends EventEmitter {
this.on(EDIT_POST_EVENT, callback);
}
removeEditPostListener(callback) {
removeEditPostListner(callback) {
this.removeListener(EDIT_POST_EVENT, callback);
}
emitPostsViewJump(type, post) {
this.emit(POSTS_VIEW_JUMP_EVENT, type, post);
}
addPostsViewJumpListener(callback) {
this.on(POSTS_VIEW_JUMP_EVENT, callback);
}
removePostsViewJumpListener(callback) {
this.removeListener(POSTS_VIEW_JUMP_EVENT, callback);
}
jumpPostsViewToBottom() {
this.emitPostsViewJump(Constants.PostsViewJumpTypes.BOTTOM, null);
}
jumpPostsViewToPost(post) {
this.emitPostsViewJump(Constants.PostsViewJumpTypes.POST, post);
}
jumpPostsViewSidebarOpen() {
this.emitPostsViewJump(Constants.PostsViewJumpTypes.SIDEBAR_OPEN, null);
}
getCurrentPosts() {
var currentId = ChannelStore.getCurrentId();
@@ -108,16 +137,16 @@ class PostStoreClass extends EventEmitter {
}
return null;
}
storePosts(channelId, newPostList) {
if (isPostListNull(newPostList)) {
storePosts(channelId, newPostsView) {
if (isPostListNull(newPostsView)) {
return;
}
var postList = makePostListNonNull(this.getPosts(channelId));
for (const pid in newPostList.posts) {
if (newPostList.posts.hasOwnProperty(pid)) {
const np = newPostList.posts[pid];
for (const pid in newPostsView.posts) {
if (newPostsView.posts.hasOwnProperty(pid)) {
const np = newPostsView.posts[pid];
if (np.delete_at === 0) {
postList.posts[pid] = np;
if (postList.order.indexOf(pid) === -1) {

218
web/react/utils/channel_intro_mssages.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,218 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const Utils = require('./utils.jsx');
const UserProfile = require('../components/user_profile.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
const Constants = require('../utils/constants.jsx');
const TeamStore = require('../stores/team_store.jsx');
export function createChannelIntroMessage(channel) {
if (channel.type === 'D') {
return createDMIntroMessage(channel);
} else if (ChannelStore.isDefault(channel)) {
return createDefaultIntroMessage(channel);
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
return createOffTopicIntroMessage(channel);
} else if (channel.type === 'O' || channel.type === 'P') {
return createStandardIntroMessage(channel);
}
}
export function createDMIntroMessage(channel) {
var teammate = Utils.getDirectTeammate(channel.id);
if (teammate) {
var teammateName = teammate.username;
if (teammate.nickname.length > 0) {
teammateName = teammate.nickname;
}
return (
<div className='channel-intro'>
<div className='post-profile-img__container channel-intro-img'>
<img
className='post-profile-img'
src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at + '&' + Utils.getSessionIndex()}
height='50'
width='50'
/>
</div>
<div className='channel-intro-profile'>
<strong>
<UserProfile userId={teammate.id} />
</strong>
</div>
<p className='channel-intro-text'>
{'This is the start of your direct message history with ' + teammateName + '.'}<br/>
{'Direct messages and files shared here are not shown to people outside this area.'}
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
</div>
);
}
return (
<div className='channel-intro'>
<p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p>
</div>
);
}
export function createOffTopicIntroMessage(channel) {
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'>
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
<br/>
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#channel_invite'
>
<i className='fa fa-user-plus'></i>{'Invite others to this channel'}
</a>
</div>
);
}
export function createDefaultIntroMessage(channel) {
const team = TeamStore.getCurrent();
let inviteModalLink;
if (team.type === Constants.INVITE_TEAM) {
inviteModalLink = (
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#invite_member'
>
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
</a>
);
} else {
inviteModalLink = (
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#get_link'
data-title='Team Invite'
data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
>
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
</a>
);
}
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'>
<strong>{'Welcome to ' + channel.display_name + '!'}</strong>
<br/><br/>
{'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
</p>
{inviteModalLink}
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<br/>
</div>
);
}
export function createStandardIntroMessage(channel) {
var uiName = channel.display_name;
var creatorName = '';
var uiType;
var memberMessage;
if (channel.type === 'P') {
uiType = 'private group';
memberMessage = ' Only invited members can see this private group.';
} else {
uiType = 'channel';
memberMessage = ' Any member can join and read this channel.';
}
var createMessage;
if (creatorName === '') {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
} else {
createMessage = (
<span>
{'This is the start of the '}
<strong>{uiName}</strong>
{' '}
{uiType}{', created by '}
<strong>{creatorName}</strong>
{' on '}
<strong>{Utils.displayDate(channel.create_at)}</strong>
</span>
);
}
return (
<div className='channel-intro'>
<h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
<p className='channel-intro__content'>
{createMessage}
{memberMessage}
<br/>
</p>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#edit_channel'
data-header={channel.header}
data-title={channel.display_name}
data-channelid={channel.id}
>
<i className='fa fa-pencil'></i>{'Set a header'}
</a>
<a
className='intro-links'
href='#'
data-toggle='modal'
data-target='#channel_invite'
>
<i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
</a>
</div>
);
}

5
web/react/utils/constants.jsx
Просмотреть файл

@@ -350,5 +350,10 @@ module.exports = {
ruby: 'Ruby',
java: 'Java',
ini: 'ini'
},
PostsViewJumpTypes: {
BOTTOM: 1,
POST: 2,
SIDEBAR_OPEN: 3
}
};

38
web/sass-files/sass/partials/_base.scss
Просмотреть файл

@@ -9,29 +9,37 @@ body {
position: relative;
height: 100%;
&.white {
background: #fff;
> .container-fluid {
overflow: auto;
}
.inner__wrap {
> .row.content {
min-height: 100%;
margin-bottom: -89px;
background: #fff;
> .container-fluid {
overflow: auto;
}
.inner__wrap {
> .row.content {
min-height: 100%;
margin-bottom: -89px;
}
}
}
}
.inner__wrap {
}
.inner__wrap {
height: 100%;
> .row.main {
height: 100%;
position: relative;
height: 100%;
position: relative;
}
}
> .container-fluid {
}
.container-fluid {
@include clearfix;
height: 100%;
position: relative;
}
.channel-view {
@include clearfix;
height: 100%;
position: relative;
}
}
img {

3
web/sass-files/sass/partials/_post.scss
Просмотреть файл

@@ -441,7 +441,10 @@ body.ios {
&.post-profile-img__container {
float: left;
.post-profile-img {
width: 36px;
height: 36px;
margin-right: 10px;
vertical-align: inherit;
@include border-radius(50px);
}
}

19
web/templates/channel.html
Просмотреть файл

@@ -5,24 +5,7 @@
{{template "head" . }}
<body>
<div id="error_bar"></div>
<div class="container-fluid">
<div class="sidebar--right" id="sidebar-right"></div>
<div class="sidebar--menu" id="sidebar-menu"></div>
<div class="sidebar--left" id="sidebar-left"></div>
<div class="inner__wrap channel__wrap">
<div class="row header">
<div id="navbar"></div>
</div>
<div class="row main">
<div id="file_upload_overlay"></div>
<div id="app-content" class="app__content">
<div id="channel-header"></div>
<div id="post-list"></div>
<div class="post-create__container" id="post-create"></div>
</div>
</div>
</div>
</div>
<div id="channel_view" class="channel-view"></div>
<div id="channel_loader"></div>
<div id="post_mention_tab"></div>
<div id="reply_mention_tab"></div>