Make sticker picker mobile friendlier and fix sending from Riot Mobile #296
Conversation
| @@ -27,7 +27,7 @@ | |||
| <div class="stickers"> | |||
| <div class="sticker" *ngFor="let sticker of pack.stickers trackById" | |||
| (click)="sendSticker(sticker, pack)"> | |||
| <img [src]="getThumbnailUrl(sticker.thumbnail.mxc, 48, 48)" width="48" height="48" class="image" | |||
| <img [src]="getThumbnailUrl(sticker.thumbnail.mxc, 48, 48)" class="image" | |||
There was a problem hiding this comment.
We can't lose the width and height because the media repo is not guaranteed to return the size we requested. It can return (much) larger images.
There was a problem hiding this comment.
It seems like that the thumbnails never load as 48x48 but as 240x240 on my end anyway. The CSS guarantees that the image always resizes itself to fit in the sticker square for all screen sizes as setting 48x48 statically made it very small on mobile. I can re-add height/width HTML back, but from trying it out quickly it doesn't have any effect as the CSS already overrides it.
There was a problem hiding this comment.
hmm, I'll take a look at this too then.
|
This causes some rendering problems on the web version, which do need to be fixed:
Before (expected): After (this PR): |
|
Thanks for checking out! I'll look further, maybe it's some sort of DPI issue as I had to manually add rulings to make it fit on mobile. This has been tested without the port view fix from another pull request, right? |
|
This was all tested with that viewport fix because it's on the master branch. |
|
Hey, this has been a while that has been looked at. Since there will be changes to how sticker picker will work in e.g. RiotX and there have been layout changes like the picker selector on the bottom, I'll rather close this one and revisit in a later date with a new branch and pull request |
|
What changes are planned for the sticker picker in RiotX? I haven't heard anything about this, and as far as I'm aware there's no technical possibility for it to change. |
|
Since RiotX is a rewrite it possibly will use a more improved WebView that handles screen sizes and DPI better than how it was on riot-android. This means that the layout potentially looks different even with the new CSS changes I've included in this pull request. Rather than keeping it like this where it's way behind since July 29 and kind of breaks the layout on Riot Desktop, I would just test from current master again and work from there. Oh and I forgot that it includes a workaround to make it work on riot-android which probably is unnecessary since RiotX v0.22 - but I'll have to look into it |
|
Ah, phew. I thought you meant they were going to replace the sticker picker with some sort of proper UI and was worried how they were going to achieve that. If it's just a webview change, that's fine. |
This PR fixes a few issues for making the sticker picker more usable on Riot Mobile apps.
The sticker picker itself changes the title size and stickers to be more tapable on the mobile screen. There's currently a media rule because the WebView for Riot Mobile is not DPI aware which has to be worked around. It has also been tested on Riot Desktop and there is no usability issue. The stickers are now arranged in a 5 column layout.
The sendSticker function now sends a body with the sticker's description because Riot Android needs a body for the JSON content or else it throws it away making it fail to finish the event. This makes Dimension stickers finally usable on Android at least.
Related issues:
#59 Mobile app support