chat: fb-like msg style re-design #107
Conversation
There was a problem hiding this comment.
Spent a little while testing it and there are small bugs. I would rather not mess around with message padding/margin because it varies from language to language AFAIK. The removal of invisble-space is also not ideal.
The following works without issues, plus it looks great! The second rule is for bubble's bottom padding - it has 6px padding on top and 8px padding on the bottom for some reason. The default font stack on Linux looks out of place, so I'd like to know what it looks like on Windows.
- ._1RNhZ { margin: -16px -54px -5px 4px !important }
- .-N6Gq { padding: 6px 64px 8px 9px !important }
- .selectable-text.invisible-space:after { display: none }
+ ._1RNhZ { margin-top: -16px i }
+ .-N6Gq { padding-bottom: 6px i }
It looks fine: I really do think though finding a better solution to fit the timestamp next to text will benefit this message-style a lot. |
|
Here is what it looks like on my end:
With your changes:
Additional tweaks will be needed to make it work with LTR/RTL layouts. |
|
Interesting. In both cases on your end, it seems like the timestamp is a bit beneath the text itself. |
|
We can adjust the timestamp. The problem is in adjusting both LTR and RTL layouts in all cases, which is not really an ideal solution IMO. |
Fixes inconsistencies in RTL layouts. The fix is only applied to RTL messages so that LTR messages are left as-is, and there is no need to disable this setting. If there are issues, please let us know. Relates to #107.
|
@E-RELevant I suppose we could (re)use this PR to port this feature to v3. What do you think? |
Strangely enough, the `{ md }, > div > div` will actually compile
successfully, yet produce no output, and it took me a _while_ to figure
that out.
A workaround is to put interpolation at the very end, and for whatever
reason it _just works_. However, it seems like it doesn't play well with
the `&:not({ ... })` selector so that one had to be split to two lines.
|
@E-RELevant I only need to port RTL hacks for |
Change it to look much more fb-like.
From:
to: