Merge pull request #274 from mattermost/mm-1497

MM-1497 image thumbnails now scale appropriately so there is no whitespace

web/react/components/file_attachment.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 var utils = require('../utils/utils.jsx');
+var Constants = require('../utils/constants.jsx');
 
 module.exports = React.createClass({
     displayName: "FileAttachment",
@@ -44,6 +45,16 @@ module.exports = React.createClass({
                         $(imgDiv).removeClass('post__load');
                         $(imgDiv).addClass('post__image');
 
+                        var width = this.width || $(this).width();
+                        var height = this.height || $(this).height();
+
+                        if (width < Constants.THUMBNAIL_WIDTH
+                                && height < Constants.THUMBNAIL_HEIGHT) {
+                            $(imgDiv).addClass('small');
+                        } else {
+                            $(imgDiv).addClass('normal');
+                        }
+
                         var re1 = new RegExp(' ', 'g');
                         var re2 = new RegExp('\\(', 'g');
                         var re3 = new RegExp('\\)', 'g');

web/react/utils/constants.jsx

@@ -52,6 +52,8 @@ module.exports = {
   MAX_DISPLAY_FILES: 5,
   MAX_UPLOAD_FILES: 5,
   MAX_FILE_SIZE: 50000000, // 50 MB
+  THUMBNAIL_WIDTH: 128,
+  THUMBNAIL_HEIGHT: 100,
   DEFAULT_CHANNEL: 'town-square',
   OFFTOPIC_CHANNEL: 'off-topic',
   POST_CHUNK_SIZE: 60,

web/sass-files/sass/partials/_files.scss

@@ -129,7 +129,12 @@
     height: 100%;
     background-color: #FFF;
     background-repeat: no-repeat;
-    background-position: top left;
+    &.small {
+        background-position: center;
+    }
+    &.normal {
+        background-position: top left;
+    }
   }
   .post-image__thumbnail {
     width: 50%;