From a541f09380ab2adbe4d0ba7c80ff72015767bd81 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Wed, 29 Jul 2015 10:09:11 -0400 Subject: image thumbnails now scale appropriately so there is no whitespace, also generalized some thumbnail loading code --- web/react/utils/constants.jsx | 2 ++ web/react/utils/utils.jsx | 44 ++++++++++++++++++++++++++++++++ web/sass-files/sass/partials/_files.scss | 7 ++++- 3 files changed, 52 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 77ce19530..3509c9514 100644 --- a/web/react/utils/constants.jsx +++ b/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, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index e51f7f3f4..942264fdb 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -913,3 +913,47 @@ module.exports.getFileName = function(path) { var split = path.split('/'); return split[split.length - 1]; }; + +module.exports.loadThumbnails = function(filenames, self) { + if (filenames) { + var re1 = new RegExp(' ', 'g'); + var re2 = new RegExp('\\(', 'g'); + var re3 = new RegExp('\\)', 'g'); + for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { + var fileInfo = module.exports.splitFileLocation(filenames[i]); + if (Object.keys(fileInfo).length === 0) continue; + + var type = module.exports.getFileType(fileInfo.ext); + + // This is a temporary patch to fix issue with old files using absolute paths + if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { + fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; + } + fileInfo.path = module.exports.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; + + if (type === "image") { + $('').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() { + $(this).remove(); + if (name in self.refs) { + var imgDiv = self.refs[name].getDOMNode(); + $(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 url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); + $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)'); + } + }}(fileInfo.path, filenames[i])); + } + } + } +} diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ea7548267..ddc5e98bb 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/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%; -- cgit v1.2.3-1-g7c22 From 8542fbd1ace1296030dbfaceec774e41a6fe07a1 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 31 Jul 2015 09:39:53 -0400 Subject: removed uneccessary utils loadThumbnails function --- web/react/utils/utils.jsx | 44 -------------------------------------------- 1 file changed, 44 deletions(-) (limited to 'web') diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 942264fdb..e51f7f3f4 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -913,47 +913,3 @@ module.exports.getFileName = function(path) { var split = path.split('/'); return split[split.length - 1]; }; - -module.exports.loadThumbnails = function(filenames, self) { - if (filenames) { - var re1 = new RegExp(' ', 'g'); - var re2 = new RegExp('\\(', 'g'); - var re3 = new RegExp('\\)', 'g'); - for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { - var fileInfo = module.exports.splitFileLocation(filenames[i]); - if (Object.keys(fileInfo).length === 0) continue; - - var type = module.exports.getFileType(fileInfo.ext); - - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { - fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; - } - fileInfo.path = module.exports.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; - - if (type === "image") { - $('').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() { - $(this).remove(); - if (name in self.refs) { - var imgDiv = self.refs[name].getDOMNode(); - $(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 url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); - $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)'); - } - }}(fileInfo.path, filenames[i])); - } - } - } -} -- cgit v1.2.3-1-g7c22 From dad78514234029791ff02c9a0efd2cbacdac5280 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Fri, 31 Jul 2015 09:52:18 -0400 Subject: center small thumbnails and top left larger thumbnails --- web/react/components/file_attachment.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'web') diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 3cd791887..b7ea5734f 100644 --- a/web/react/components/file_attachment.jsx +++ b/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'); -- cgit v1.2.3-1-g7c22