diff options
author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-08-03 14:29:31 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-08-03 14:29:31 +0800 |
commit | f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687 (patch) | |
tree | 8555be93795821a35dfe64ec6c8e749d235bbd4d /webapp/components | |
parent | 345bb2236f1f34c2b1ddfec0024ea47c4b1b8950 (diff) | |
download | chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.tar.gz chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.tar.bz2 chat-f3934bc7e1e8ef555e1c2e1fe0ece3dbd88ea687.zip |
[PLT-1249] Add close button 'x' to the right of a link preview (#7017)
* add close button 'x' to the right of a link preview
* Updating webhook UI
* UI improvements for close button
* Adding hover state
* Making the close button visible on mobile
* previews are permanently disabled/closed for that link
* make post as required props
* fix JS error of undefined
* fix update issue both at center and RHS view
Diffstat (limited to 'webapp/components')
3 files changed, 70 insertions, 8 deletions
diff --git a/webapp/components/post_view/post_attachment_opengraph/index.js b/webapp/components/post_view/post_attachment_opengraph/index.js index e0bec8f36..1f889f1d6 100644 --- a/webapp/components/post_view/post_attachment_opengraph/index.js +++ b/webapp/components/post_view/post_attachment_opengraph/index.js @@ -2,6 +2,7 @@ // See License.txt for license information. import {connect} from 'react-redux'; +import {getCurrentUser} from 'mattermost-redux/selectors/entities/users'; import {bindActionCreators} from 'redux'; import {getOpenGraphMetadata} from 'mattermost-redux/actions/posts'; import {getOpenGraphMetadataForUrl} from 'mattermost-redux/selectors/entities/posts'; @@ -11,7 +12,8 @@ import PostAttachmentOpenGraph from './post_attachment_opengraph.jsx'; function mapStateToProps(state, ownProps) { return { ...ownProps, - openGraphData: getOpenGraphMetadataForUrl(state, ownProps.link) + openGraphData: getOpenGraphMetadataForUrl(state, ownProps.link), + currentUser: getCurrentUser(state), }; } diff --git a/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx index 743d7a22a..04738fdcc 100644 --- a/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx +++ b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx @@ -5,9 +5,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import {postListScrollChange} from 'actions/global_actions.jsx'; +import {updatePost} from 'actions/post_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import * as CommonUtils from 'utils/commons.jsx'; +import {PostTypes} from 'utils/constants.jsx'; export default class PostAttachmentOpenGraph extends React.PureComponent { static propTypes = { @@ -18,6 +20,16 @@ export default class PostAttachmentOpenGraph extends React.PureComponent { link: PropTypes.string.isRequired, /** + * The current user viewing the post + */ + currentUser: PropTypes.object, + + /** + * The post where this link is included + */ + post: PropTypes.object, + + /** * The open graph data to render */ openGraphData: PropTypes.object, @@ -62,18 +74,28 @@ export default class PostAttachmentOpenGraph extends React.PureComponent { this.toggleImageVisibility = this.toggleImageVisibility.bind(this); this.onImageLoad = this.onImageLoad.bind(this); this.onImageError = this.onImageError.bind(this); + this.handleRemovePreview = this.handleRemovePreview.bind(this); } componentWillMount() { + const removePreview = this.isRemovePreview(this.props.post, this.props.currentUser); + this.setState({ imageLoaded: this.IMAGE_LOADED.LOADING, imageVisible: this.props.previewCollapsed.startsWith('false'), - hasLargeImage: false + hasLargeImage: false, + removePreview }); this.fetchData(this.props.link); } componentWillReceiveProps(nextProps) { + if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { + const removePreview = this.isRemovePreview(nextProps.post, nextProps.currentUser); + this.setState({ + removePreview + }); + } if (nextProps.link !== this.props.link) { this.fetchData(nextProps.link); } @@ -94,12 +116,12 @@ export default class PostAttachmentOpenGraph extends React.PureComponent { } } - getBestImageUrl() { - if (Utils.isEmptyObject(this.props.openGraphData.images)) { + getBestImageUrl(data) { + if (Utils.isEmptyObject(data.images)) { return null; } - const bestImage = CommonUtils.getNearestPoint(this.imageDimentions, this.props.openGraphData.images, 'width', 'height'); + const bestImage = CommonUtils.getNearestPoint(this.imageDimentions, data.images, 'width', 'height'); return bestImage.secure_url || bestImage.url; } @@ -208,14 +230,50 @@ export default class PostAttachmentOpenGraph extends React.PureComponent { return text; } + handleRemovePreview() { + const props = Object.assign({}, this.props.post.props); + props[PostTypes.REMOVE_LINK_PREVIEW] = 'true'; + + const patchedPost = ({ + id: this.props.post.id, + props + }); + + updatePost(patchedPost, () => { + this.setState({removePreview: true}); + }); + } + + isRemovePreview(post, currentUser) { + if (post && post.props && currentUser.id === post.user_id) { + return post.props[PostTypes.REMOVE_LINK_PREVIEW] && post.props[PostTypes.REMOVE_LINK_PREVIEW] === 'true'; + } + + return false; + } + render() { - if (!this.props.openGraphData || Utils.isEmptyObject(this.props.openGraphData.description)) { + const data = this.props.openGraphData; + if (!data || Utils.isEmptyObject(data.description) || this.state.removePreview) { return null; } - const data = this.props.openGraphData; - const imageUrl = this.getBestImageUrl(); + let removePreviewButton; + if (this.props.currentUser.id === this.props.post.user_id) { + removePreviewButton = ( + <button + id='removePreviewButton' + type='button' + className='btn-close' + aria-label='Close' + onClick={this.handleRemovePreview} + > + <span aria-hidden='true'>{'×'}</span> + </button> + ); + } + const imageUrl = this.getBestImageUrl(data); if (imageUrl) { this.loadImage(imageUrl); } @@ -233,6 +291,7 @@ export default class PostAttachmentOpenGraph extends React.PureComponent { className={'attachment__body__wrap attachment__body__wrap--opengraph'} > <span className='sitename'>{this.truncateText(data.site_name)}</span> + {removePreviewButton} <h1 className={'attachment__title attachment__title--opengraph' + (data.title ? '' : ' is-url')} > diff --git a/webapp/components/post_view/post_body_additional_content.jsx b/webapp/components/post_view/post_body_additional_content.jsx index be9e37827..1d900018a 100644 --- a/webapp/components/post_view/post_body_additional_content.jsx +++ b/webapp/components/post_view/post_body_additional_content.jsx @@ -162,6 +162,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent { <PostAttachmentOpenGraph link={link} previewCollapsed={this.props.previewCollapsed} + post={this.props.post} /> ); } |