Room UI Redesign: Miscellaneous Fixes #3727
Conversation
robertlong
commented
Jan 19, 2021
robertlong
commented
- Center the hero content on mobile
- Fixes chat message line height
- Fixes the modal width for the verify auth page and all other modals on mobile
- Fixes Chat message do not preserve line breaks (shift + enter) #3702
- Fixes Viewport is not correctly updated after a fullscreen in Fenix #3694
|
Couldn't test the chat message spawning locally so I tested on staging. There seems to be some issues with the new presence-log styles. Fixing now. |
|
I couldn't find the right SVG foreign element CSS incantation so I fixed the chat message rendering with html2canvas which needs thorough testing, particularly with VR perf. I could have rendered chat bubbles manually, but multi-line text, emojis etc. would have been a lot of work. If perf isn't an issue I think html2canvas is easier to maintain as we can more or less style chat messages as we want. It could also be used for more things in the future. |
| @@ -37,6 +37,7 @@ | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| flex: 1; | |||
|
|
||
| const formattedBody = <Linkify properties={{ target: "_blank", rel: "noopener referrer" }}>{bodyWithEmojis}</Linkify>; | ||
| if (messages.length === 1) { | ||
| const emojiComponents = toEmojis(cleanedBody); |
There was a problem hiding this comment.
i am a potato
here are some emojis
| @@ -4,12 +4,10 @@ import PropTypes from "prop-types"; | |||
| import styles from "../assets/stylesheets/presence-log.scss"; | |||
| import classNames from "classnames"; | |||
| import { toArray as toEmojis } from "react-emoji-render"; | |||
| import serializeElement from "../utils/serialize-element"; | |||
| import html2canvas from "html2canvas"; | |||
There was a problem hiding this comment.
I don't have a VR headset handy to test perf... (you mentioned in your comments this might be a problem)
But it seems good that html2canvas only pulls in a single dependency (which pulls in just one more).
