[Content Display] Frontend: Update global design and logic of the preview modal

[RomaricMourgues]

US: https://www.notion.so/linagora/Content-display-An-image-gallery-30475bbbac704d69a9654bf8e944cd24

Update design of the preview modal to match the new UI.

This modal will take as argument a messages-file primary key and get from backend the message-file with context #2401 .

Next and previous buttons will be added using result from #2401 .

Modals context and buttons will also be added except for this list of actions: Save as, rotate image, zoom in, zoom out, video player, delete, share/forward. This actions will be implemented in another version.

[tprudentova]

Hi @RomaricMourgues! Here are some bugs I noticed (MacOS).

1. When a picture is opened in gallery view, the line with info and actions that can be preformed is cropped
2. Probably to be mentioned in a different topic but I’m not sure, where, so I’ll leave it here :) Path: upload a picture -> perform an action on your device with the same picture you just uploaded (rotate in my case) -> it won’t upload again. Refreshing the page or uploading a different picture solves the problem. https://images.zenhubusercontent.com/271994210/80b93219-0bd6-4047-b982-a0b8f39c05eb/vid_20220830_172306_tvchxjfr.mp4
3. Some trouble when shrinking wide images for preview. Compare: a wide picture (2144 × 560 px) almost isn’t shrinked at all, while the same picture after being rotated is shrinked a lot.
4. When a picture with a comment is opened in gallery view, the panel with info and actions isn’t there, it is replaced with the comment
5. Path: view all files by pressing Open gallery -> click any picture or video -> choose Jump to message on the bottom panel -> The window with all files isn't closed automatically so you don’t really see the message you jumped to https://images.zenhubusercontent.com/271994210/a7648be7-db6d-4800-b0c5-998528d26246/___.mp4

[RomaricMourgues]

@tprudentova could you test again this on QA ? I cannot reproduce it but I added something that should fix it on devices like iPhones and iPads, may be that's your case ?

[tprudentova]

@RomaricMourgues all of the bugs or some certain one?

[RomaricMourgues]

The 1 and 4 sorry :)

[RomaricMourgues]

Do you use an iPad for testing ?

[tprudentova]

@RomaricMourgues nope, I use MacBook and it's not fixed for it :( I believe the problem is with scaling, because I can see the menu bar if I zoom out (zooming out to maximum for images with description and zooming out a little for sole images)

[RomaricMourgues]

This time it should be good for the 1 and 4. 3 should also be better. 2 and 5 are not fixed yet. 2 will not be fixed for now. 5. I forgot about this one so I do it here: #2531

[tprudentova]

@RomaricMourgues 1, 3 and 4 work fine!

[RomaricMourgues]

5 is done too :)