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

PLT-6297 Added post--pinned CSS class to pinned posts (#6303)

Просмотр исходного кода
Этот коммит содержится в:
Harrison Healey
2017-05-03 11:54:32 -04:00
коммит произвёл Corey Hulen
родитель c3ed7b2540
Коммит aa65478445
3 изменённых файлов: 142 добавлений и 126 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

193
webapp/components/post_view/components/post.jsx
Просмотреть файл

@@ -1,32 +1,53 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import PostHeader from './post_header.jsx';
import PostBody from './post_body.jsx';
import React, {Component, PropTypes} from 'react';
import ProfilePicture from 'components/profile_picture.jsx';
import Constants from 'utils/constants.jsx';
const ActionTypes = Constants.ActionTypes;
import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
import React from 'react';
import Constants, {ActionTypes} from 'utils/constants.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import * as Utils from 'utils/utils.jsx';
import PostBody from './post_body.jsx';
import PostHeader from './post_header.jsx';
export default class Post extends Component {
static propTypes = {
post: PropTypes.object.isRequired,
parentPost: PropTypes.object,
user: PropTypes.object,
sameUser: PropTypes.bool,
sameRoot: PropTypes.bool,
hideProfilePic: PropTypes.bool,
isLastPost: PropTypes.bool,
isLastComment: PropTypes.bool,
shouldHighlight: PropTypes.bool,
displayNameType: PropTypes.string,
currentUser: PropTypes.object.isRequired,
center: PropTypes.bool,
compactDisplay: PropTypes.bool,
previewCollapsed: PropTypes.string,
commentCount: PropTypes.number,
isCommentMention: PropTypes.bool,
useMilitaryTime: PropTypes.bool.isRequired,
isFlagged: PropTypes.bool,
status: PropTypes.string,
isBusy: PropTypes.bool,
childComponentDidUpdateFunction: PropTypes.func
};
export default class Post extends React.Component {
constructor(props) {
super(props);
this.handleCommentClick = this.handleCommentClick.bind(this);
this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
this.state = {
dropdownOpened: false
};
}
handleCommentClick(e) {
handleCommentClick = (e) => {
e.preventDefault();
AppDispatcher.handleServerAction({
@@ -39,12 +60,14 @@ export default class Post extends React.Component {
results: null
});
}
handleDropdownOpened(opened) {
handleDropdownOpened = (opened) => {
this.setState({
dropdownOpened: opened
});
}
forceUpdateInfo() {
forceUpdateInfo = () => {
this.refs.info.forceUpdate();
this.refs.header.forceUpdate();
}
@@ -116,26 +139,17 @@ export default class Post extends React.Component {
return false;
}
render() {
const post = this.props.post;
const parentPost = this.props.parentPost;
const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
if (!post.props) {
post.props = {};
}
getClassName = (post, isSystemMessage, fromWebhook) => {
let className = 'post';
let type = 'Post';
if (post.root_id && post.root_id.length > 0) {
type = 'Comment';
}
let hideControls = '';
if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) {
hideControls = 'post--hide-controls';
className += ' post--hide-controls';
}
const commentCount = this.props.commentCount;
if (this.props.shouldHighlight) {
className += ' post--highlight';
}
let rootUser;
if (this.props.sameRoot) {
@@ -145,10 +159,55 @@ export default class Post extends React.Component {
}
let currentUserCss = '';
if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) {
if (this.props.currentUser.id === post.user_id && !fromWebhook && !isSystemMessage) {
currentUserCss = 'current--user';
}
let sameUserClass = '';
if (this.props.sameUser) {
sameUserClass = 'same--user';
}
let postType = '';
if (post.root_id && post.root_id.length > 0) {
postType = 'post--comment';
} else if (this.props.commentCount > 0) {
postType = 'post--root';
sameUserClass = '';
rootUser = '';
}
if (isSystemMessage) {
className += ' post--system';
sameUserClass = '';
currentUserCss = '';
postType = '';
rootUser = '';
}
if (this.props.compactDisplay) {
className += ' post--compact';
}
if (this.state.dropdownOpened) {
className += ' post--hovered';
}
if (post.is_pinned) {
className += ' post--pinned';
}
return className + ' ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss;
}
render() {
const post = this.props.post;
const parentPost = this.props.parentPost;
const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
const isSystemMessage = PostUtils.isSystemMessage(post);
const fromWebhook = post.props && post.props.from_webhook === 'true';
let timestamp = 0;
if (!this.props.user || this.props.user.last_picture_update == null) {
timestamp = this.props.currentUser.last_picture_update;
@@ -156,36 +215,8 @@ export default class Post extends React.Component {
timestamp = this.props.user.last_picture_update;
}
let sameUserClass = '';
if (this.props.sameUser) {
sameUserClass = 'same--user';
}
let shouldHighlightClass = '';
if (this.props.shouldHighlight) {
shouldHighlightClass = 'post--highlight';
}
let postType = '';
if (type !== 'Post') {
postType = 'post--comment';
} else if (commentCount > 0) {
postType = 'post--root';
sameUserClass = '';
rootUser = '';
}
let systemMessageClass = '';
if (PostUtils.isSystemMessage(post)) {
systemMessageClass = 'post--system';
sameUserClass = '';
currentUserCss = '';
postType = '';
rootUser = '';
}
let status = this.props.status;
if (post.props && post.props.from_webhook === 'true') {
if (fromWebhook) {
status = null;
}
@@ -198,13 +229,13 @@ export default class Post extends React.Component {
/>
);
if (post.props && post.props.from_webhook) {
if (fromWebhook) {
profilePic = (
<ProfilePicture
src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
/>
);
} else if (PostUtils.isSystemMessage(post)) {
} else if (isSystemMessage) {
profilePic = (
<span
className='icon'
@@ -218,10 +249,7 @@ export default class Post extends React.Component {
centerClass = 'center';
}
let compactClass = '';
if (this.props.compactDisplay) {
compactClass = 'post--compact';
if (post.props && post.props.from_webhook) {
profilePic = (
<ProfilePicture
@@ -243,11 +271,6 @@ export default class Post extends React.Component {
const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
let dropdownOpenedClass = '';
if (this.state.dropdownOpened) {
dropdownOpenedClass = 'post--hovered';
}
return (
<div
ref={(div) => {
@@ -256,7 +279,7 @@ export default class Post extends React.Component {
>
<div
id={'post_' + post.id}
className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls + ' ' + dropdownOpenedClass}
className={this.getClassName(this.props.post, isSystemMessage, fromWebhook)}
>
<div className={'post__content ' + centerClass}>
{profilePicContainer}
@@ -265,7 +288,7 @@ export default class Post extends React.Component {
ref='header'
post={post}
sameRoot={this.props.sameRoot}
commentCount={commentCount}
commentCount={this.props.commentCount}
handleCommentClick={this.handleCommentClick}
handleDropdownOpened={this.handleDropdownOpened}
isLastComment={this.props.isLastComment}
@@ -298,27 +321,3 @@ export default class Post extends React.Component {
);
}
}
Post.propTypes = {
post: React.PropTypes.object.isRequired,
parentPost: React.PropTypes.object,
user: React.PropTypes.object,
sameUser: React.PropTypes.bool,
sameRoot: React.PropTypes.bool,
hideProfilePic: React.PropTypes.bool,
isLastPost: React.PropTypes.bool,
isLastComment: React.PropTypes.bool,
shouldHighlight: React.PropTypes.bool,
displayNameType: React.PropTypes.string,
currentUser: React.PropTypes.object.isRequired,
center: React.PropTypes.bool,
compactDisplay: React.PropTypes.bool,
previewCollapsed: React.PropTypes.string,
commentCount: React.PropTypes.number,
isCommentMention: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired,
isFlagged: React.PropTypes.bool,
status: React.PropTypes.string,
isBusy: React.PropTypes.bool,
childComponentDidUpdateFunction: React.PropTypes.func
};

37
webapp/components/rhs_comment.jsx
Просмотреть файл

@@ -360,6 +360,28 @@ export default class RhsComment extends React.Component {
addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
}
getClassName = (post, isSystemMessage) => {
let className = 'post post--thread';
if (this.props.currentUser.id === post.user_id) {
className += ' current--user';
}
if (isSystemMessage) {
className += ' post--system';
}
if (this.props.compactDisplay) {
className += 'post--compact';
}
if (post.is_pinned) {
className += ' post--pinned';
}
return className;
}
render() {
const post = this.props.post;
const flagIcon = Constants.FLAG_ICON_SVG;
@@ -369,11 +391,6 @@ export default class RhsComment extends React.Component {
const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
const isSystemMessage = PostUtils.isSystemMessage(post);
var currentUserCss = '';
if (this.props.currentUser.id === post.user_id) {
currentUserCss = 'current--user';
}
var timestamp = this.props.currentUser.last_picture_update;
let status = this.props.status;
@@ -445,11 +462,6 @@ export default class RhsComment extends React.Component {
postClass += ' post--edited';
}
let systemMessageClass = '';
if (isSystemMessage) {
systemMessageClass = 'post--system';
}
let profilePic = (
<ProfilePicture
src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
@@ -480,10 +492,7 @@ export default class RhsComment extends React.Component {
);
}
let compactClass = '';
if (this.props.compactDisplay) {
compactClass = 'post--compact';
if (post.props && post.props.from_webhook) {
profilePic = (
<ProfilePicture
@@ -646,7 +655,7 @@ export default class RhsComment extends React.Component {
return (
<div
ref={'post_body_' + post.id}
className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}
className={this.getClassName(post, isSystemMessage)}
>
<div className='post__content'>
{profilePicContainer}

38
webapp/components/rhs_root_post.jsx
Просмотреть файл

@@ -176,6 +176,27 @@ export default class RhsRootPost extends React.Component {
addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
}
getClassName = (post, isSystemMessage) => {
let className = 'post post--root post--thread';
if (UserStore.getCurrentId() === post.user_id) {
className += ' current--user';
}
if (isSystemMessage) {
className += ' post--system';
}
if (this.props.compactDisplay) {
className += 'post--compact';
}
if (post.is_pinned) {
className += ' post--pinned';
}
return className;
}
render() {
const post = this.props.post;
const user = this.props.user;
@@ -196,16 +217,6 @@ export default class RhsRootPost extends React.Component {
type = 'Comment';
}
var userCss = '';
if (UserStore.getCurrentId() === post.user_id) {
userCss = 'current--user';
}
var systemMessageClass = '';
if (isSystemMessage) {
systemMessageClass = 'post--system';
}
var channelName;
if (channel) {
if (channel.type === 'D') {
@@ -493,11 +504,7 @@ export default class RhsRootPost extends React.Component {
);
}
let compactClass = '';
let postClass = '';
if (this.props.compactDisplay) {
compactClass = 'post--compact';
if (post.props && post.props.from_webhook) {
profilePic = (
<ProfilePicture
@@ -516,6 +523,7 @@ export default class RhsRootPost extends React.Component {
}
}
let postClass = '';
if (PostUtils.isEdited(this.props.post)) {
postClass += ' post--edited';
}
@@ -581,7 +589,7 @@ export default class RhsRootPost extends React.Component {
return (
<div
id='thread--root'
className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}
className={this.getClassName(post, isSystemMessage)}
>
<div className='post-right-channel__name'>{channelName}</div>
<div className='post__content'>