diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-07-19 16:47:50 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-07-19 13:47:50 -0700 |
commit | 23a59b03dd272ea26878622a3f46576fcf9e59c8 (patch) | |
tree | 228b924310a633453bf89207da2d83ddd84f3afd /webapp | |
parent | ea6f37e68da6458ba91943ae56fe60760a35b736 (diff) | |
download | chat-23a59b03dd272ea26878622a3f46576fcf9e59c8.tar.gz chat-23a59b03dd272ea26878622a3f46576fcf9e59c8.tar.bz2 chat-23a59b03dd272ea26878622a3f46576fcf9e59c8.zip |
PLT-7115 Changed cropping for unposted files to match posted ones (#6926)
* PLT-7115 Changed cropping for unposted files to match ones that have been posted
* Cleaned up file_preview.jsx
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/file_preview.jsx | 49 | ||||
-rw-r--r-- | webapp/sass/components/_files.scss | 6 |
2 files changed, 30 insertions, 25 deletions
diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 0606c1b31..93ee53515 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -1,17 +1,28 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ReactDOM from 'react-dom'; -import * as Utils from 'utils/utils.jsx'; -import {getFileThumbnailUrl} from 'mattermost-redux/utils/file_utils'; - import PropTypes from 'prop-types'; - import React from 'react'; import loadingGif from 'images/load.gif'; +import Constants from 'utils/constants.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import {getFileThumbnailUrl} from 'mattermost-redux/utils/file_utils'; + export default class FilePreview extends React.Component { + static propTypes = { + onRemove: PropTypes.func.isRequired, + fileInfos: PropTypes.arrayOf(PropTypes.object).isRequired, + uploadsInProgress: PropTypes.array + }; + + static defaultProps = { + fileInfos: [], + uploadsInProgress: [] + }; + constructor(props) { super(props); @@ -20,7 +31,7 @@ export default class FilePreview extends React.Component { componentDidUpdate() { if (this.props.uploadsInProgress.length > 0) { - ReactDOM.findDOMNode(this.refs[this.props.uploadsInProgress[0]]).scrollIntoView(); + this.refs[this.props.uploadsInProgress[0]].scrollIntoView(); } } @@ -36,10 +47,20 @@ export default class FilePreview extends React.Component { let className = 'file-preview'; let previewImage; if (type === 'image' || type === 'svg') { + let imageClassName = 'post-image'; + + if (info.width < Constants.THUMBNAIL_WIDTH && info.height < Constants.THUMBNAIL_HEIGHT) { + imageClassName += ' small'; + } else { + imageClassName += ' normal'; + } + previewImage = ( - <img - className='file-preview__image' - src={getFileThumbnailUrl(info.id)} + <div + className={imageClassName} + style={{ + backgroundImage: `url(${getFileThumbnailUrl(info.id)})` + }} /> ); } else { @@ -95,13 +116,3 @@ export default class FilePreview extends React.Component { ); } } - -FilePreview.defaultProps = { - fileInfos: [], - uploadsInProgress: [] -}; -FilePreview.propTypes = { - onRemove: PropTypes.func.isRequired, - fileInfos: PropTypes.arrayOf(PropTypes.object).isRequired, - uploadsInProgress: PropTypes.array -}; diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss index 906c5e273..b72180b42 100644 --- a/webapp/sass/components/_files.scss +++ b/webapp/sass/components/_files.scss @@ -35,12 +35,6 @@ } } -.file-preview__image { - display: block; - height: auto; - max-width: 100%; -} - .file-preview__remove { background: alpha-color($black, .5); border-radius: 0 0 0 2px; |