diff --git a/app/components/post_header/__snapshots__/post_header.test.js.snap b/app/components/post_header/__snapshots__/post_header.test.js.snap index 73b3b3730..1fc62210e 100644 --- a/app/components/post_header/__snapshots__/post_header.test.js.snap +++ b/app/components/post_header/__snapshots__/post_header.test.js.snap @@ -70,6 +70,78 @@ exports[`PostHeader should match snapshot when just a base post 1`] = ` `; +exports[`PostHeader should match snapshot when just a base post in landscape mode 1`] = ` + + + + + + John Smith + + + + + + +`; + exports[`PostHeader should match snapshot when post is autoresponder 1`] = ` `; +exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyButton in landscape mode 1`] = ` + + + + + + John Smith + + + + + + + + + 0 + + + + + + +`; + exports[`PostHeader should match snapshot when post renders Commented On for new post 1`] = ` { + const { + fromWebHook, + fromAutoResponder, + renderReplies, + shouldRenderReplyButton, + commentedOnDisplayName, + commentCount, + isBot, + isLandscape, + theme, + } = this.props; + + const style = getStyleSheet(theme); + const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies); + const reduceWidth = showReply && (isBot || fromAutoResponder || fromWebHook); + + if (reduceWidth && isLandscape) { + return style.displayNameContainerLandscapeBotReplyWidth; + } else if (isLandscape) { + return style.displayNameContainerLandscape; + } else if (reduceWidth) { + return style.displayNameContainerBotReplyWidth; + } + return null; + } + renderDisplayName = () => { const { displayName, @@ -119,16 +147,12 @@ export default class PostHeader extends PureComponent { fromAutoResponder, overrideUsername, theme, - renderReplies, - shouldRenderReplyButton, - commentedOnDisplayName, - commentCount, - isBot, } = this.props; const style = getStyleSheet(theme); - const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies); - const displayNameStyle = [style.displayNameContainer, showReply && (isBot || fromAutoResponder || fromWebHook) ? style.displayNameContainerBotReplyWidth : null]; + + const displayNameWidth = this.calcNameWidth(); + const displayNameStyle = [style.displayNameContainer, displayNameWidth]; if (fromAutoResponder || fromWebHook) { let name = displayName; @@ -369,5 +393,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { displayNameContainerBotReplyWidth: { maxWidth: '50%', }, + displayNameContainerLandscape: { + maxWidth: '80%', + }, + displayNameContainerLandscapeBotReplyWidth: { + maxWidth: '70%', + }, + }; }); diff --git a/app/components/post_header/post_header.test.js b/app/components/post_header/post_header.test.js index bfd9f4fde..6cff0863d 100644 --- a/app/components/post_header/post_header.test.js +++ b/app/components/post_header/post_header.test.js @@ -29,6 +29,7 @@ describe('PostHeader', () => { username: 'JohnSmith', isBot: false, isGuest: false, + isLandscape: false, userTimezone: '', enableTimezone: false, previousPostExists: false, @@ -126,4 +127,31 @@ describe('PostHeader', () => { ); expect(wrapper.getElement()).toMatchSnapshot(); }); + + test('should match snapshot when just a base post in landscape mode', () => { + const props = { + ...baseProps, + isLandscape: true, + }; + + const wrapper = shallow( + + ); + expect(wrapper.getElement()).toMatchSnapshot(); + expect(wrapper.find('#ReplyIcon').exists()).toEqual(false); + }); + + test('should match snapshot when post isBot and shouldRenderReplyButton in landscape mode', () => { + const props = { + ...baseProps, + shouldRenderReplyButton: true, + isBot: true, + isLandscape: true, + }; + + const wrapper = shallow( + + ); + expect(wrapper.getElement()).toMatchSnapshot(); + }); }); \ No newline at end of file