fix(angular): make images bigger in image modal #277
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Goal
This is an Angular-only change, React uses a different UI for image modals.
🛠 Implementation details
On the Angular SDK the images in the attachment modal were quite small. There were two reasons for this:
🎨 UI Changes
Before:
![IMG_3350](https://private-user-images.githubusercontent.com/6690098/314446819-b15b310c-1c43-41b4-9adf-e4d23f904b5a.PNG?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1Mjg0MzEsIm5iZiI6MTcyMTUyODEzMSwicGF0aCI6Ii82NjkwMDk4LzMxNDQ0NjgxOS1iMTViMzEwYy0xYzQzLTQxYjQtOWFkZi1lNGQyM2Y5MDRiNWEuUE5HP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDIxNTMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTIzNWFkNjdjNDExN2RmOGYyOGRlNTZiNzBhOTMyNGVjYTY4MDEwZjU0Y2ZlZjAzNzE1NWRmZWY4NTAyODQxNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.32U6Yr4PIVQaFwPiPpZVzsxVyIOsz2rMx5rLLqJclhA)
After:
![IMG_3349](https://private-user-images.githubusercontent.com/6690098/314446642-b1aafa00-1aef-4dce-b31e-c696f27d20d0.PNG?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1Mjg0MzEsIm5iZiI6MTcyMTUyODEzMSwicGF0aCI6Ii82NjkwMDk4LzMxNDQ0NjY0Mi1iMWFhZmEwMC0xYWVmLTRkY2UtYjMxZS1jNjk2ZjI3ZDIwZDAuUE5HP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDIxNTMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGFlODQ3MDBiN2E2MWY0MTY2MjVhMGE0OGY0MWFkMzRiM2I1MTA4YTUzMWE0ZGFhNWFkMjI5ZjhhMWU4MTkzZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Z78hZHKgWogoGc-Z51s0Y5IoouyzympO2PQq9htScY8)
Make sure to test with both Angular and React (with both
MessageList
andVirtualizedMessageList
components) SDKs