Improve file thumbnails

Description

[NEEDS DESIGN FROM CHARLES]

There is a Help Wanted ticket in GitHub: https://github.com/mattermost/platform/issues/4868

Before starting work on this ticket, please check the GitHub issue to see if a community member has it in progress


Updated thumbnails as per screenshots below.

If there is one file shown, and it's file type is an image, show a larger thumbnail.
Also , as you pointed out, I've added the conditional below, but added one more thing to the "if" statement. If it's a gif then autoplay it.

Asaad will help with updating the UI / thumbnail sizes after the functionality is done.


ADDITIONAL Q&A

1. Only the image thumbnails needs to changed or other type of attachments as well?
--> Other attachments should be changed as well
2. Clicking on image name should download the image or open the modal box for preview?
--> Clicking on the image name should download the file
3. Clicking on thumb should download the image or open the modal box for preview?
--> Clicking on the thumbnail should open the preview
4. I can see that the sizes of the images are different in the attached screenshot that you have provided. Is there is any maximum width & height to fit the image within the block?
--> The minimum width should just depend on the image, it can even be 1px by 1px. But still the area should be clickable. The max width should be 100px, and the max height should be 60px.
5. In the current UI we show the file size as well. Is it not needed now to show the file size?
--> Yes, the file size will not be shown now.
6. What if the name is very long. Any maximum width & height for the name block after which we will show the ... if the name is bigger than certain characters?
--> The name container should observe a max width of 100px as the image, it can only exceed to 2 lines, and no longer than that. So the max-height should not be of concern here.

QA Test Steps

None

Mana

8

Assignee

Linda Mitchell

QA Assignee

None

Reporter

Lindsay Brock

Epic Link

None

Fix versions

None

Mattermost Team

None

Sprint

None

Labels

QA Testing Areas

None

GitHub Issue

None

Components

None
Configure