Mattermost-server: Add a container to images below a min-width and min-height to maintain clickable areas

[mattermod]

Expected behavior

The minimum width and height of posted images will remain unrestricted, however if the image is below 48px in height or width, the image will be placed inside a container with a 1px border and 4px corner radii. This allows for a larger click/tap area vs restricting or having to scale the image which may not be desired by users.

Image examples:

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-15232

[niklabh]

image examples not visible in description. Please reupload

[hanzei]

@niklabh Done

[abdusabri]

Hi, I would like to work on this issue.

@esethna, I've a few questions about the expected behavior:

1. Should the container have a white or a transparent background color?
2. The container should have a cursor pointer and a hover effect, correct?
3. The hover effect of the enclosed image will be disabled, correct?
4. Should this behavior apply to in-line markdown images as well?

Would you please attach or add links to the sources of the example images (without borders and the added width/height)?

Thanks!

[jespino]

@asaadmahmood can you give some information here?

@abdusabri sorry the delay in the reply.

[asaadmahmood]

@andrewbrown00 The floor is yours.

[esethna]

@abdusabri, thanks for your interest here:

1. Container should have the same background color as the center channel theme color
2. Yes it should have the hand cursor, same as single image attachments now
3. The container itself should have the hover effect, same as single image attachments now, but the image within should not have it's own hover effect
4. Yes, same behavior should apply to in-line markdown images

See example of a single image attachment: https://community-release.mattermost.com/core/pl/cbaeoe4mrtbsdn5ezo1axj67ya

[andrewbrown00]

Thanks @abdusabri for taking this ticket 😄. Answers to your questions are below:

1. Should the container have a white or a transparent background color? White, when it's smaller than 48. Everything above that 48 threshold will be transparent with no border.
2. The container should have a cursor pointer and a hover effect, correct? Yes
3. The hover effect of the enclosed image will be disabled, correct? Yes, the container has the hover effect as noted in 2 above.
4. Should this behavior apply to in-line markdown images as well? Partially, same rules as 1, but no need for pointer cursor or hover effects since it's inline.

Images attached

[abdusabri]

@andrewbrown00 Thanks for the feedback and for attaching the sources!

Re in-line markdown images, please check this PR 🙂 https://github.com/mattermost/mattermost-webapp/pull/3639, that's why I asked and Eric confirmed

Re background color (and border), here is how it looks like in my early stage implementation

I've used the center channel theme color as Eric suggested (which is currently white 🙂). It would be great if you just confirm the below style rules, especially for the border

background: var(--center-channel-bg);
border: 1px solid var(--center-channel-color-30);

[abdusabri]

Here are a couple of screenshots showing a whole range of cases to demonstrate the expected behavior

[abdusabri]

@esethna, while testing, i discovered an existing issue where images with a big height don't respect max height constraints

Existing issue

Fix before container is added

Fix with container added

Let me know whether i should include this fix or you would like to have it fixed in a separate ticket. Thanks!

[esethna]

Thanks for the catch @abdusabri, feel free to fix in this PR (with container added)

[esethna]

@abdusabri thanks for the excellent PRs recently, feel free to direct message me on our Community server if you are looking for new tickets, I'm sure we have many more that may be of interest!

https://community-daily.mattermost.com/core/channels/tickets

[abdusabri]

Thanks @esethna, my pleasure! 🙂