diff --git a/app/components/post/post.js b/app/components/post/post.js index 885f18ec8..478fe9dd8 100644 --- a/app/components/post/post.js +++ b/app/components/post/post.js @@ -23,12 +23,17 @@ import ProfilePicture from 'app/components/profile_picture'; import FileAttachmentList from 'app/components/file_attachment_list/file_attachment_list_container'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import webhookIcon from 'assets/images/icons/webhook.jpg'; + import {Constants} from 'mattermost-redux/constants'; import {isSystemMessage} from 'mattermost-redux/utils/post_utils'; import {isAdmin} from 'mattermost-redux/utils/user_utils'; +const BOT_NAME = 'BOT'; + class Post extends PureComponent { static propTypes = { + config: PropTypes.object.isRequired, currentTeamId: PropTypes.string.isRequired, currentUserId: PropTypes.string.isRequired, intl: intlShape.isRequired, @@ -252,17 +257,18 @@ class Post extends PureComponent { }; render() { - const style = getStyleSheet(this.props.theme); + const {config, post, theme} = this.props; + const style = getStyleSheet(theme); const PROFILE_PICTURE_SIZE = 32; let profilePicture; let displayName; let messageStyle; - if (isSystemMessage(this.props.post)) { + if (isSystemMessage(post)) { profilePicture = ( @@ -278,24 +284,43 @@ class Post extends PureComponent { ); messageStyle = [style.message, style.systemMessage]; - } else if (this.props.post.props && this.props.post.props.from_webhook) { - profilePicture = ( - - + + + ); + } else { + profilePicture = ( + - - ); + ); + } + let name = this.props.displayName; + if (post.props.override_username && config.EnablePostUsernameOverride === 'true') { + name = post.props.override_username; + } displayName = ( - - {this.props.post.props.override_username} - + + + {name} + + + {BOT_NAME} + + ); messageStyle = [style.message, style.webhookMessage]; } else { @@ -426,14 +451,29 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { marginBottom: 10 }, displayName: { + color: theme.centerChannelColor, fontSize: 14, fontWeight: '600', - marginRight: 10, - color: theme.centerChannelColor + marginRight: 5 + }, + botContainer: { + flexDirection: 'row' + }, + bot: { + alignSelf: 'center', + backgroundColor: changeOpacity(theme.centerChannelColor, 0.15), + borderRadius: 2, + color: theme.centerChannelColor, + fontSize: 10, + fontWeight: '600', + marginRight: 5, + paddingVertical: 2, + paddingHorizontal: 4 }, time: { color: theme.centerChannelColor, fontSize: 12, + marginLeft: 5, opacity: 0.5 }, commentedOn: { diff --git a/app/components/post/post_container.js b/app/components/post/post_container.js index bbefe0a90..4925bf60d 100644 --- a/app/components/post/post_container.js +++ b/app/components/post/post_container.js @@ -21,6 +21,7 @@ function mapStateToProps(state, ownProps) { const myPreferences = getMyPreferences(state); return { + config: state.entities.general.config, commentedOnDisplayName: displayUsername(commentedOnUser, myPreferences), currentTeamId: getCurrentTeamId(state), currentUserId: getCurrentUserId(state), diff --git a/assets/base/images/icons/webhook.jpg b/assets/base/images/icons/webhook.jpg new file mode 100644 index 000000000..80f0b1cb6 Binary files /dev/null and b/assets/base/images/icons/webhook.jpg differ