toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UI when rendering link previews in a reply (#1318)

Browse source 
* Fix UI when rendering link previews in a reply

* feedback review
This commit is contained in:
enahum 2018-01-02 19:24:03 -03:00 committed by Harrison Healey
parent 224099a9dc
commit 9509e1a83e
4 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/components/post/post.js
View file

@ -287,17 +287,20 @@ class Post extends PureComponent {
removePost(post);
};
isReplyPost = () => {
const {renderReplies, post} = this.props;
return Boolean(renderReplies && post.root_id && !isPostEphemeral(post));
};
renderReplyBar = () => {
const {
commentedOnPost,
isFirstReply,
isLastReply,
post,
renderReplies,
theme
} = this.props;
if (!renderReplies || !post.root_id || isPostEphemeral(post)) {
if (!this.isReplyPost()) {
return null;
}
@ -367,6 +370,7 @@ class Post extends PureComponent {
const style = getStyleSheet(theme);
const selected = this.state && this.state.selected ? style.selected : null;
const highlighted = highlight ? style.highlight : null;
const isReplyPost = this.isReplyPost();
const onUsernamePress = Config.ExperimentalUsernamePressIsMention ? this.autofillUserMention : this.viewUserProfile;
@ -411,6 +415,7 @@ class Post extends PureComponent {
toggleSelected={this.toggleSelected}
managedConfig={managedConfig}
isFlagged={isFlagged}
isReplyPost={isReplyPost}
/>
</View>
</View>

7
app/components/post_attachment_opengraph/post_attachment_opengraph.js
View file

@ -26,6 +26,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
actions: PropTypes.shape({
getOpenGraphMetadata: PropTypes.func.isRequired
}).isRequired,
isReplyPost: PropTypes.bool,
link: PropTypes.string.isRequired,
openGraphData: PropTypes.object,
theme: PropTypes.object.isRequired
@ -67,7 +68,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
calculateLargeImageDimensions = (width, height) => {
const {width: deviceWidth} = Dimensions.get('window');
let maxHeight = MAX_IMAGE_HEIGHT;
let maxWidth = deviceWidth - 88;
let maxWidth = deviceWidth - 88 - (this.props.isReplyPost ? 15 : 0);
if (height <= MAX_IMAGE_HEIGHT) {
maxHeight = height;
@ -160,7 +161,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
};
render() {
const {openGraphData, theme} = this.props;
const {isReplyPost, openGraphData, theme} = this.props;
const {hasLargeImage, height, imageLoaded, imageUrl, offset, width} = this.state;
if (!openGraphData || !openGraphData.description) {
@ -187,7 +188,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
onPress={this.goToLink}
>
<Text
style={style.siteSubtitle}
style={[style.siteSubtitle, {marginRight: isReplyPost ? 10 : 0}]}
numberOfLines={3}
ellipsizeMode='tail'
>

4
app/components/post_body/post_body.js
View file

@ -41,6 +41,7 @@ class PostBody extends PureComponent {
isFlagged: PropTypes.bool,
isPending: PropTypes.bool,
isPostEphemeral: PropTypes.bool,
isReplyPost: PropTypes.bool,
isSearchResult: PropTypes.bool,
isSystemMessage: PropTypes.bool,
managedConfig: PropTypes.object,
@ -142,6 +143,7 @@ class PostBody extends PureComponent {
isFlagged,
isPending,
isPostEphemeral,
isReplyPost,
isSearchResult,
isSystemMessage,
intl,
@ -266,6 +268,7 @@ class PostBody extends PureComponent {
postId={postId}
postProps={postProps}
textStyles={textStyles}
isReplyPost={isReplyPost}
/>
{this.renderFileAttachments()}
</View>
@ -290,6 +293,7 @@ class PostBody extends PureComponent {
postProps={postProps}
textStyles={textStyles}
onLongPress={this.showOptionsContext}
isReplyPost={isReplyPost}
/>
{this.renderFileAttachments()}
{hasReactions && <Reactions postId={postId}/>}

4
app/components/post_body_additional_content/post_body_additional_content.js
View file

@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
config: PropTypes.object,
deviceHeight: PropTypes.number.isRequired,
deviceWidth: PropTypes.number.isRequired,
isReplyPost: PropTypes.bool,
link: PropTypes.string,
message: PropTypes.string.isRequired,
navigator: PropTypes.object.isRequired,
@ -106,7 +107,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
return null;
}
const {link, openGraphData, showLinkPreviews, theme} = this.props;
const {isReplyPost, link, openGraphData, showLinkPreviews, theme} = this.props;
const attachments = this.getSlackAttachment();
if (attachments) {
return attachments;
@ -115,6 +116,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
if (link && showLinkPreviews) {
return (
<PostAttachmentOpenGraph
isReplyPost={isReplyPost}
link={link}
openGraphData={openGraphData}
theme={theme}