diff --git a/webapp/components/post_view/post_body/post_body.jsx b/webapp/components/post_view/post_body/post_body.jsx index 4c0e00c470..2f8f86d82c 100644 --- a/webapp/components/post_view/post_body/post_body.jsx +++ b/webapp/components/post_view/post_body/post_body.jsx @@ -162,6 +162,7 @@ export default class PostBody extends React.PureComponent { ); diff --git a/webapp/components/post_view/post_info/post_info.jsx b/webapp/components/post_view/post_info/post_info.jsx index 6eaef0e0b0..71f73b631b 100644 --- a/webapp/components/post_view/post_info/post_info.jsx +++ b/webapp/components/post_view/post_info/post_info.jsx @@ -54,6 +54,11 @@ export default class PostInfo extends React.PureComponent { */ lastPostCount: PropTypes.number, + /** + * Set to render in compact view + */ + compactDisplay: PropTypes.bool, + /** * Function to get the post list HTML element */ @@ -208,6 +213,18 @@ export default class PostInfo extends React.PureComponent { } } + let visibleMessage; + if (isEphemeral && !this.props.compactDisplay) { + visibleMessage = ( + + + + ); + } + let pinnedBadge; if (post.is_pinned) { pinnedBadge = ( @@ -237,6 +254,7 @@ export default class PostInfo extends React.PureComponent { isFlagged={this.props.isFlagged} isEphemeral={isEphemeral} /> + {visibleMessage} {options} diff --git a/webapp/components/post_view/post_message_view/post_message_view.jsx b/webapp/components/post_view/post_message_view/post_message_view.jsx index 76037741fc..1c6035df9d 100644 --- a/webapp/components/post_view/post_message_view/post_message_view.jsx +++ b/webapp/components/post_view/post_message_view/post_message_view.jsx @@ -61,7 +61,12 @@ export default class PostMessageView extends React.PureComponent { /* * Post identifiers for selenium tests */ - lastPostCount: PropTypes.number + lastPostCount: PropTypes.number, + + /** + * Set to render post body compactly + */ + compactDisplay: PropTypes.bool }; static defaultProps = { @@ -167,7 +172,13 @@ export default class PostMessageView extends React.PureComponent { postId = Utils.createSafeId('lastPostMessageText' + this.props.lastPostCount); } - const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options); + let message = this.props.post.message; + const isEphemeral = Utils.isPostEphemeral(this.props.post); + if (this.props.compactDisplay && isEphemeral) { + const visibleMessage = Utils.localizeMessage('post_info.message.visible.compact', ' (Only visible to you)'); + message = message.concat(visibleMessage); + } + const htmlFormattedText = TextFormatting.formatText(message, options); const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText); return ( diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 6592c487d4..3813fe5a04 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -226,6 +226,7 @@ export default class RhsComment extends React.Component { /> ); + let visibleMessage; if (post.props && post.props.from_webhook) { if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') { userProfile = ( @@ -259,6 +260,15 @@ export default class RhsComment extends React.Component { disablePopover={true} /> ); + + visibleMessage = ( + + + + ); } let failedPostOptions; @@ -430,6 +440,7 @@ export default class RhsComment extends React.Component { isFlagged={this.props.isFlagged} isEphemeral={isEphemeral} /> + {visibleMessage} {options} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 34c6207b5e..1ba02cfff6 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1903,6 +1903,8 @@ "post_delete.okay": "Okay", "post_delete.someone": "Someone deleted the message on which you tried to post a comment.", "post_focus_view.beginning": "Beginning of Channel Archives", + "post_info.message.visible": "(Only visible to you)", + "post_info.message.visible.compact": " (Only visible to you)", "post_info.del": "Delete", "post_info.edit": "Edit", "post_info.mobile.flag": "Flag", diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index b227d818c6..272d224797 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1383,6 +1383,12 @@ } } + .post__visibility { + @include opacity(.6); + font-size: .9em; + padding: 8px; + } + .post__time { @include opacity(.6); font-size: .9em;