summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorHarrison Healey <harrisonmhealey@gmail.com>2017-07-19 16:47:50 -0400
committerChristopher Speller <crspeller@gmail.com>2017-07-19 13:47:50 -0700
commit23a59b03dd272ea26878622a3f46576fcf9e59c8 (patch)
tree228b924310a633453bf89207da2d83ddd84f3afd /webapp
parentea6f37e68da6458ba91943ae56fe60760a35b736 (diff)
downloadchat-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.jsx49
-rw-r--r--webapp/sass/components/_files.scss6
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;