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

Merge pull request #386 from mattermost/revert-372-MM-1640

Просмотр исходного кода 
Revert "Mm 1640 Fixed odd scrolling issues on channel refresh"
Этот коммит содержится в:
Joram Wilander
2015-08-17 11:38:08 -04:00
родитель 1c65fe1f84 646214b49b
Коммит 996f0d79a7
4 изменённых файлов: 223 добавлений и 254 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -88,6 +88,7 @@ module.exports = React.createClass({
); );
} }
$('.post-list-holder-by-time').perfectScrollbar('update');
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
this.resizePostHolder(); this.resizePostHolder();

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

@@ -21,65 +21,81 @@ function getStateFromStores() {
if (channel == null) channel = {}; if (channel == null) channel = {};
return { return {
postList: PostStore.getCurrentPosts(), post_list: PostStore.getCurrentPosts(),
channel: channel channel: channel
}; };
} }
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'PostList', displayName: "PostList",
holdPosition: true, // The default state is to hold your scroll position scrollPosition: 0,
// This behavior should NOT be taken advantage of, always set this to the desired state preventScrollTrigger: false,
gotMorePosts: false,
scrollHeightFromBottom: 0, // This represents the distance from the container's scrollHeight oldScrollHeight: 0,
// and current scrollTop oldZoom: 0,
// Based on equation scrollTop + scrollHeightFromBottom = scrollHeight scrolledToNew: false,
componentDidMount: function() { componentDidMount: function() {
// Add CSS required to have the theme colors
var user = UserStore.getCurrentUser(); var user = UserStore.getCurrentUser();
if (user.props && user.props.theme) { if (user.props && user.props.theme) {
utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';'); utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';'); utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';'); utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
utils.changeCss('.mention', 'background: ' + user.props.theme + ';'); utils.changeCss('.mention', 'background: ' + user.props.theme+';');
utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
} }
if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { if (user.props.theme != '#000000' && user.props.theme != '#585858') {
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';'); utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';');
utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;'); utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
} else if (user.props.theme === '#000000') { } else if (user.props.theme == '#000000') {
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, 50) + ';'); utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';');
$('.team__header').addClass('theme--black'); $('.team__header').addClass('theme--black');
} else if (user.props.theme === '#585858') { } else if (user.props.theme == '#585858') {
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, 10) + ';'); utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';');
$('.team__header').addClass('theme--gray'); $('.team__header').addClass('theme--gray');
} }
// Start our Store listeners PostStore.addChangeListener(this._onChange);
PostStore.addChangeListener(this.onListenerChange); ChannelStore.addChangeListener(this._onChange);
ChannelStore.addChangeListener(this.onListenerChange); UserStore.addStatusesChangeListener(this._onTimeChange);
UserStore.addStatusesChangeListener(this.onTimeChange); SocketStore.addChangeListener(this._onSocketChange);
SocketStore.addChangeListener(this.onSocketChange);
$(".post-list-holder-by-time").perfectScrollbar();
this.resize();
var post_holder = $(".post-list-holder-by-time")[0];
this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
this.oldScrollHeight = post_holder.scrollHeight;
this.oldZoom = (window.outerWidth - 8) / window.innerWidth;
// Timeout exists for the DOM to fully render before making changes
var self = this; var self = this;
function initialScroll() { $(window).resize(function(){
self.holdPosition = false; $(post_holder).perfectScrollbar('update');
self.scrollWindow();
$(document).off('DOMContentLoaded', initialScroll);
}
$(document).on('DOMContentLoaded', initialScroll); // this only kind of works, detecting zoom in browsers is a nightmare
var newZoom = (window.outerWidth - 8) / window.innerWidth;
// Handle browser resizing if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize();
$(window).resize(this.onResize);
self.oldZoom = newZoom;
if ($('#create_post').length > 0) {
var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
$(".post-list-holder-by-time").css("height", height + "px");
}
});
$(post_holder).scroll(function(e){
if (!self.preventScrollTrigger) {
self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
}
self.preventScrollTrigger = false;
});
// Highlight stylingx
$('body').on('click.userpopover', function(e){ $('body').on('click.userpopover', function(e){
if ($(e.target).attr('data-toggle') !== 'popover' && if ($(e.target).attr('data-toggle') !== 'popover'
$(e.target).parents('.popover.in').length === 0) { && $(e.target).parents('.popover.in').length === 0) {
$('.user-popover').popover('hide'); $('.user-popover').popover('hide');
} }
}); });
@@ -88,208 +104,180 @@ module.exports = React.createClass({
$('.post-list__content div:last-child .post').addClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last');
$('body').on('mouseenter mouseleave', '.post', function(ev){ $('body').on('mouseenter mouseleave', '.post', function(ev){
if (ev.type === 'mouseenter') { if(ev.type === 'mouseenter'){
$(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
$(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
} else { }
else {
$(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after'); $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
$(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
} }
}); });
$('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){ $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){
if (ev.type === 'mouseenter') { if(ev.type === 'mouseenter'){
$(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment'); $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
$(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment');
} else { }
else {
$(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment'); $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment');
$(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
} }
}); });
},
componentWillUpdate: function() {
this.prepareScrollWindow();
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
this.scrollWindow(); this.resize();
var post_holder = $(".post-list-holder-by-time")[0];
this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
this.oldScrollHeight = post_holder.scrollHeight;
$('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div .post').removeClass('post--last');
$('.post-list__content div:last-child .post').addClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last');
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
PostStore.removeChangeListener(this.onListenerChange); PostStore.removeChangeListener(this._onChange);
ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeChangeListener(this._onChange);
UserStore.removeStatusesChangeListener(this.onTimeChange); UserStore.removeStatusesChangeListener(this._onTimeChange);
SocketStore.removeChangeListener(this.onSocketChange); SocketStore.removeChangeListener(this._onSocketChange);
$('body').off('click.userpopover'); $('body').off('click.userpopover');
}, },
prepareScrollWindow: function() { resize: function() {
var container = $('.post-list-holder-by-time'); var post_holder = $(".post-list-holder-by-time")[0];
if (this.holdPosition) { this.preventScrollTrigger = true;
this.scrollHeightFromBottom = container[0].scrollHeight - container.scrollTop(); if (this.gotMorePosts) {
} this.gotMorePosts = false;
}, $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) );
scrollWindow: function() {
var container = $('.post-list-holder-by-time');
// If there's a new message, jump the window to it
// If there's no new message, we check if there is a scroll position to retrieve from the previous state
// If we don't, then we just jump to the bottom
if ($('#new_message').length) {
container.scrollTop(container.scrollTop() + $('#new_message').offset().top - container.offset().top - $('.new-separator').height());
} else if (this.holdPosition) {
container.scrollTop(container[0].scrollHeight - this.scrollHeightFromBottom);
} else { } else {
container.scrollTop(container[0].scrollHeight - container.innerHeight()); if ($("#new_message")[0] && !this.scrolledToNew) {
$(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63);
this.scrolledToNew = true;
} else {
$(post_holder).scrollTop(post_holder.scrollHeight);
}
} }
this.holdPosition = true; $(post_holder).perfectScrollbar('update');
}, },
onResize: function() { _onChange: function() {
this.holdPosition = true;
if ($('#create_post').length > 0) {
var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
$('.post-list-holder-by-time').css('height', height + 'px');
}
this.forceUpdate();
},
onListenerChange: function() {
var newState = getStateFromStores(); var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) { if (!utils.areStatesEqual(newState, this.state)) {
this.holdPosition = (newState.channel.id === this.state.channel.id); // If we're on a new channel, go to the bottom, otherwise hold your position if (this.state.post_list && this.state.post_list.order) {
if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) {
this.gotMorePosts = true;
}
}
if (this.state.channel.id !== newState.channel.id) {
this.scrolledToNew = false;
}
this.setState(newState); this.setState(newState);
} }
}, },
onSocketChange: function(msg) { _onSocketChange: function(msg) {
var postList; if (msg.action == "posted") {
var post; var post = JSON.parse(msg.props.post);
if (msg.action === 'posted') {
post = JSON.parse(msg.props.post);
postList = PostStore.getPosts(msg.channel_id); var post_list = PostStore.getPosts(msg.channel_id);
if (!postList) { if (!post_list) return;
return;
}
postList.posts[post.id] = post; post_list.posts[post.id] = post;
if (postList.order.indexOf(post.id) === -1) { if (post_list.order.indexOf(post.id) === -1) {
postList.order.unshift(post.id); post_list.order.unshift(post.id);
} }
if (this.state.channel.id === msg.channel_id) { if (this.state.channel.id === msg.channel_id) {
this.holdPosition = false; this.setState({ post_list: post_list });
this.setState({postList: postList}); };
} else {
this.holdPosition = true;
}
PostStore.storePosts(post.channel_id, postList); PostStore.storePosts(post.channel_id, post_list);
} else if (msg.action === 'post_edited') { } else if (msg.action == "post_edited") {
if (this.state.channel.id === msg.channel_id) { if (this.state.channel.id == msg.channel_id) {
postList = this.state.postList; var post_list = this.state.post_list;
if (!(msg.props.post_id in postList.posts)) { if (!(msg.props.post_id in post_list.posts)) return;
return;
}
post = postList.posts[msg.props.post_id]; var post = post_list.posts[msg.props.post_id];
post.message = msg.props.message; post.message = msg.props.message;
postList.posts[post.id] = post; post_list.posts[post.id] = post;
this.setState({postList: postList}); this.setState({ post_list: post_list });
this.holdPosition = true; PostStore.storePosts(msg.channel_id, post_list);
PostStore.storePosts(msg.channel_id, postList);
} else { } else {
AsyncClient.getPosts(true, msg.channel_id); AsyncClient.getPosts(true, msg.channel_id);
} }
} else if (msg.action === 'post_deleted') { } else if (msg.action == "post_deleted") {
var activeRoot = $(document.activeElement).closest('.comment-create-body')[0]; var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
var activeRootPostId = ''; var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : "";
if (activeRoot && activeRoot.id.length > 0) {
activeRootPostId = activeRoot.id;
}
if (this.state.channel.id === msg.channel_id) { if (this.state.channel.id == msg.channel_id) {
postList = this.state.postList; var post_list = this.state.post_list;
if (!(msg.props.post_id in this.state.postList.posts)) { if (!(msg.props.post_id in this.state.post_list.posts)) return;
return;
}
delete postList.posts[msg.props.post_id]; delete post_list.posts[msg.props.post_id];
var index = postList.order.indexOf(msg.props.post_id); var index = post_list.order.indexOf(msg.props.post_id);
if (index > -1) { if (index > -1) post_list.order.splice(index, 1);
postList.order.splice(index, 1);
}
this.holdPosition = true; this.setState({ post_list: post_list });
this.setState({postList: postList}); PostStore.storePosts(msg.channel_id, post_list);
PostStore.storePosts(msg.channel_id, postList);
} else { } else {
AsyncClient.getPosts(true, msg.channel_id); AsyncClient.getPosts(true, msg.channel_id);
} }
if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) { if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) {
$('#post_deleted').modal('show'); $('#post_deleted').modal('show');
} }
} else if (msg.action === 'new_user') { } else if (msg.action == "new_user") {
AsyncClient.getProfiles(); AsyncClient.getProfiles();
} }
}, },
onTimeChange: function() { _onTimeChange: function() {
if (!this.state.postList) { if (!this.state.post_list) return;
return; for (var id in this.state.post_list.posts) {
} if (!this.refs[id]) continue;
for (var id in this.state.postList.posts) {
if (!this.refs[id]) {
continue;
}
this.refs[id].forceUpdateInfo(); this.refs[id].forceUpdateInfo();
} }
}, },
getMorePosts: function(e) { getMorePosts: function(e) {
e.preventDefault(); e.preventDefault();
if (!this.state.postList) { if (!this.state.post_list) return;
return;
}
var posts = this.state.postList.posts; var posts = this.state.post_list.posts;
var order = this.state.postList.order; var order = this.state.post_list.order;
var channelId = this.state.channel.id; var channel_id = this.state.channel.id;
$(this.refs.loadmore.getDOMNode()).text('Retrieving more messages...'); $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages...");
var self = this; var self = this;
this.holdPosition = true; var currentPos = $(".post-list").scrollTop;
Client.getPosts( Client.getPosts(
channelId, channel_id,
order.length, order.length,
Constants.POST_CHUNK_SIZE, Constants.POST_CHUNK_SIZE,
function(data) { function(data) {
$(self.refs.loadmore.getDOMNode()).text('Load more messages'); $(self.refs.loadmore.getDOMNode()).text("Load more messages");
if (!data) return; if (!data) return;
if (data.order.length === 0) return; if (data.order.length === 0) return;
var postList = {} var post_list = {}
postList.posts = $.extend(posts, data.posts); post_list.posts = $.extend(posts, data.posts);
postList.order = order.concat(data.order); post_list.order = order.concat(data.order);
AppDispatcher.handleServerAction({ AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_POSTS, type: ActionTypes.RECIEVED_POSTS,
id: channelId, id: channel_id,
postList: postList post_list: post_list
}); });
Client.getProfiles(); Client.getProfiles();
$(".post-list").scrollTop(currentPos);
}, },
function(err) { function(err) {
$(self.refs.loadmore.getDOMNode()).text('Load more messages'); $(self.refs.loadmore.getDOMNode()).text("Load more messages");
AsyncClient.dispatchError(err, 'getPosts'); AsyncClient.dispatchError(err, "getPosts");
} }
); );
}, },
@@ -300,20 +288,19 @@ module.exports = React.createClass({
var order = []; var order = [];
var posts; var posts;
var lastViewed = Number.MAX_VALUE; var last_viewed = Number.MAX_VALUE;
if (ChannelStore.getCurrentMember() != null) { if (ChannelStore.getCurrentMember() != null)
lastViewed = ChannelStore.getCurrentMember().last_viewed_at; last_viewed = ChannelStore.getCurrentMember().last_viewed_at;
if (this.state.post_list != null) {
posts = this.state.post_list.posts;
order = this.state.post_list.order;
} }
if (this.state.postList != null) { var rendered_last_viewed = false;
posts = this.state.postList.posts;
order = this.state.postList.order;
}
var renderedLastViewed = false; var user_id = "";
var user_id = '';
if (UserStore.getCurrentId()) { if (UserStore.getCurrentId()) {
user_id = UserStore.getCurrentId(); user_id = UserStore.getCurrentId();
} else { } else {
@@ -322,65 +309,60 @@ module.exports = React.createClass({
var channel = this.state.channel; var channel = this.state.channel;
var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>; var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>;
var userStyle = {color: UserStore.getCurrentUser().props.theme}; var userStyle = { color: UserStore.getCurrentUser().props.theme }
if (channel != null) { if (channel != null) {
if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) {
moreMessages = <a ref='loadmore' className='more-messages-text theme' href='#' onClick={this.getMorePosts}>Load more messages</a>; more_messages = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>;
} else if (channel.type === 'D') { } else if (channel.type === 'D') {
var teammate = utils.getDirectTeammate(channel.id); var teammate = utils.getDirectTeammate(channel.id)
if (teammate) { if (teammate) {
var teammateName; var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username;
if (teammate.nickname.length > 0) { more_messages = (
teammateName = teammate.nickname; <div className="channel-intro">
} else { <div className="post-profile-img__container channel-intro-img">
teammateName = teammate.username; <img className="post-profile-img" src={"/api/v1/users/" + teammate.id + "/image?time=" + teammate.update_at} height="50" width="50" />
}
moreMessages = (
<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} height='50' width='50' />
</div> </div>
<div className='channel-intro-profile'> <div className="channel-intro-profile">
<strong><UserProfile userId={teammate.id} /></strong> <strong><UserProfile userId={teammate.id} /></strong>
</div> </div>
<p className='channel-intro-text'> <p className="channel-intro-text">
{'This is the start of your private message history with ' + teammateName + '.'}<br/> {"This is the start of your private message history with " + teammate_name + "." }<br/>
{'Private messages and files shared here are not shown to people outside this area.'} {"Private messages and files shared here are not shown to people outside this area."}
</p> </p>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
</div> </div>
); );
} else { } else {
moreMessages = ( more_messages = (
<div className='channel-intro'> <div className="channel-intro">
<p className='channel-intro-text'>{'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}</p> <p className="channel-intro-text">{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}</p>
</div> </div>
); );
} }
} else if (channel.type === 'P' || channel.type === 'O') { } else if (channel.type === 'P' || channel.type === 'O') {
var uiName = channel.display_name; var ui_name = channel.display_name
var members = ChannelStore.getCurrentExtraInfo().members; var members = ChannelStore.getCurrentExtraInfo().members;
var createorName = ''; var creator_name = "";
for (var i = 0; i < members.length; i++) { for (var i = 0; i < members.length; i++) {
if (members[i].roles.indexOf('admin') > -1) { if (members[i].roles.indexOf('admin') > -1) {
createorName = members[i].username; creator_name = members[i].username;
break; break;
} }
} }
if (ChannelStore.isDefault(channel)) { if (ChannelStore.isDefault(channel)) {
moreMessages = ( more_messages = (
<div className='channel-intro'> <div className="channel-intro">
<h4 className='channel-intro__title'>Beginning of {uiName}</h4> <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
<p className='channel-intro__content'> <p className="channel-intro__content">
Welcome to {uiName}! Welcome to {ui_name}!
<br/><br/> <br/><br/>
{'This is the first channel ' + strings.Team + 'mates see when they'} {"This is the first channel " + strings.Team + "mates see when they"}
<br/> <br/>
sign up - use it for posting updates everyone needs to know. sign up - use it for posting updates everyone needs to know.
<br/><br/> <br/><br/>
@@ -392,43 +374,29 @@ module.exports = React.createClass({
</div> </div>
); );
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) { } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
moreMessages = ( more_messages = (
<div className='channel-intro'> <div className="channel-intro">
<h4 className='channel-intro__title'>Beginning of {uiName}</h4> <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
<p className='channel-intro__content'> <p className="channel-intro__content">
{'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} {"This is the start of " + ui_name + ", a channel for non-work-related conversations."}
<br/> <br/>
</p> </p>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
</div> </div>
); );
} else { } else {
var uiType; var ui_type = channel.type === 'P' ? "private group" : "channel";
var permissions; more_messages = (
if (channel.type === 'P') { <div className="channel-intro">
uiType = 'private group'; <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
permissions = ' Only invited members can see this private group.'; <p className="channel-intro__content">
} else { { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
uiType = 'channel'; : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
permissions = ' Any member can join and read this channel.'; { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
}
var createorText;
if (createorName !== '') {
createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + createorName + ' on ' + utils.displayDate(channel.create_at) + '.';
} else {
createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created on '+ utils.displayDate(channel.create_at) + '.';
}
moreMessages = (
<div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4>
<p className='channel-intro__content'>
{createorText}
{permissions}
<br/> <br/>
</p> </p>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#channel_invite'><i className='fa fa-user-plus'></i>Invite others to this {uiType}</a> <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
</div> </div>
); );
} }
@@ -443,23 +411,15 @@ module.exports = React.createClass({
for (var i = order.length-1; i >= 0; i--) { for (var i = order.length-1; i >= 0; i--) {
var post = posts[order[i]]; var post = posts[order[i]];
var parentPost = null; var parentPost = post.parent_id ? posts[post.parent_id] : null;
if (post.parent_id) {
parentPost = posts[post.parent_id];
}
var sameUser = ''; var sameUser = '';
var sameRoot = false; var sameRoot = false;
var hideProfilePic = false; var hideProfilePic = false;
var prevPost = null; var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null;
if (i < order.length - 1) {
prevPost = posts[order[i + 1]];
}
if (prevPost) { if (prevPost) {
if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) { sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : "";
sameUser = 'same--user';
}
sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id); sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
@@ -468,7 +428,7 @@ module.exports = React.createClass({
// check if it's the last comment in a consecutive string of comments on the same post // 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 // 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 isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id);
var postCtl = ( var postCtl = (
<Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id}
@@ -477,21 +437,21 @@ module.exports = React.createClass({
); );
currentPostDay = utils.getDateForUnixTicks(post.create_at); currentPostDay = utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) { if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
postCtls.push( postCtls.push(
<div key={currentPostDay.toDateString()} className='date-separator'> <div key={currentPostDay.toDateString()} className="date-separator">
<hr className='separator__hr' /> <hr className="separator__hr" />
<div className='separator__text'>{currentPostDay.toDateString()}</div> <div className="separator__text">{currentPostDay.toDateString()}</div>
</div> </div>
); );
} }
if (post.create_at > lastViewed && !renderedLastViewed) { if (post.create_at > last_viewed && !rendered_last_viewed) {
renderedLastViewed = true; rendered_last_viewed = true;
postCtls.push( postCtls.push(
<div key='unviewed' className='new-separator'> <div key="unviewed" className="new-separator">
<hr id='new_message' className='separator__hr' /> <hr id="new_message" className="separator__hr" />
<div className='separator__text'>New Messages</div> <div className="separator__text">New Messages</div>
</div> </div>
); );
} }
@@ -499,15 +459,15 @@ module.exports = React.createClass({
previousPostDay = currentPostDay; previousPostDay = currentPostDay;
} }
} else { } else {
postCtls.push(<LoadingScreen position='absolute' />); postCtls.push(<LoadingScreen position="absolute" />);
} }
return ( return (
<div ref='postlist' className='post-list-holder-by-time'> <div ref="postlist" className="post-list-holder-by-time">
<div className='post-list__table'> <div className="post-list__table">
<div className='post-list__content'> <div className="post-list__content">
{moreMessages} { more_messages }
{postCtls} { postCtls }
</div> </div>
</div> </div>
</div> </div>

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

@@ -38,6 +38,10 @@ module.exports = React.createClass({
} }
} }
}, },
resize: function() {
$(".post-list-holder-by-time").scrollTop(100000);
$(".post-list-holder-by-time").perfectScrollbar('update');
},
getInitialState: function() { getInitialState: function() {
return getStateFromStores(); return getStateFromStores();
}, },
@@ -45,6 +49,7 @@ module.exports = React.createClass({
if (! (this.state.search_visible || this.state.post_right_visible)) { if (! (this.state.search_visible || this.state.post_right_visible)) {
$('.inner__wrap').removeClass('move--left').removeClass('move--right'); $('.inner__wrap').removeClass('move--left').removeClass('move--right');
$('.sidebar--right').removeClass('move--left'); $('.sidebar--right').removeClass('move--left');
this.resize();
return ( return (
<div></div> <div></div>
); );
@@ -54,6 +59,7 @@ module.exports = React.createClass({
$('.sidebar--left').removeClass('move--right'); $('.sidebar--left').removeClass('move--right');
$('.sidebar--right').addClass('move--left'); $('.sidebar--right').addClass('move--left');
$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); $('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
this.resize();
setTimeout(function(){ setTimeout(function(){
$('.sidebar__overlay').fadeOut("200", function(){ $('.sidebar__overlay').fadeOut("200", function(){
$(this).remove(); $(this).remove();

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

@@ -313,6 +313,8 @@ var getYoutubeEmbed = function(link) {
var metadata = data.items[0].snippet; var metadata = data.items[0].snippet;
$('.video-uploader.'+youtubeId).html(metadata.channelTitle); $('.video-uploader.'+youtubeId).html(metadata.channelTitle);
$('.video-title.'+youtubeId).find('a').html(metadata.title); $('.video-title.'+youtubeId).find('a').html(metadata.title);
$(".post-list-holder-by-time").scrollTop($(".post-list-holder-by-time")[0].scrollHeight);
$(".post-list-holder-by-time").perfectScrollbar('update');
}; };
if(config.GoogleDeveloperKey) { if(config.GoogleDeveloperKey) {