diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index 32ccf6b0bb..a0da7e2539 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -14,9 +14,35 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_VerificationShowSas_sas { +.mx_VerificationShowSas_decimalSas { text-align: center; font-weight: bold; padding-left: 3px; padding-right: 3px; } + +.mx_VerificationShowSas_decimalSas span { + margin-left: 5px; + margin-right: 5px; +} + +.mx_VerificationShowSas_emojiSas { + text-align: center; +} + +.mx_VerificationShowSas_emojiSas_block { + display: inline-block; + margin-left: 15px; + margin-right: 15px; + text-align: center; + margin-bottom: 20px; +} + +.mx_VerificationShowSas_emojiSas_emoji { + font-size: 48px; +} + +.mx_VerificationShowSas_emojiSas_label { + text-align: center; + font-weight: bold; +} diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 371804725d..2e08c059eb 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -68,8 +68,10 @@ export function containsEmoji(str) { /* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js * because we want to include emoji shortnames in title text */ -function unicodeToImage(str) { - let replaceWith; let unicode; let alt; let short; let fname; +function unicodeToImage(str, addAlt) { + if (addAlt === undefined) addAlt = true; + + let replaceWith; let unicode; let short; let fname; const mappedUnicode = emojione.mapUnicodeToShort(); str = str.replace(emojione.regUnicode, function(unicodeChar) { @@ -84,10 +86,14 @@ function unicodeToImage(str) { fname = emojione.emojioneList[short].fname; // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname - alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode]; const title = mappedUnicode[unicode]; - replaceWith = ``; + if (addAlt) { + const alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode]; + replaceWith = ``; + } else { + replaceWith = ``; + } return replaceWith; } }); @@ -508,9 +514,9 @@ export function bodyToHtml(content, highlights, opts={}) { { strippedBody }; } -export function emojifyText(text) { +export function emojifyText(text, addAlt) { return { - __html: unicodeToImage(escape(text)), + __html: unicodeToImage(escape(text), addAlt), }; } diff --git a/src/components/views/elements/EmojiText.js b/src/components/views/elements/EmojiText.js index 9fb650b2c3..b7f3e45321 100644 --- a/src/components/views/elements/EmojiText.js +++ b/src/components/views/elements/EmojiText.js @@ -20,12 +20,12 @@ import PropTypes from 'prop-types'; import {emojifyText, containsEmoji} from '../../../HtmlUtils'; export default function EmojiText(props) { - const {element, children, ...restProps} = props; + const {element, children, addAlt, ...restProps} = props; // fast path: simple regex to detect strings that don't contain // emoji and just return them if (containsEmoji(children)) { - restProps.dangerouslySetInnerHTML = emojifyText(children); + restProps.dangerouslySetInnerHTML = emojifyText(children, addAlt); return React.createElement(element, restProps); } else { return React.createElement(element, restProps, children); @@ -39,4 +39,5 @@ EmojiText.propTypes = { EmojiText.defaultProps = { element: 'span', + addAlt: true, }; diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 0224571d9e..bca68e92d3 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/src/components/views/verification/VerificationShowSas.js @@ -17,13 +17,17 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import sdk from '../../../index'; -import { _t } from '../../../languageHandler'; +import { _t, _td } from '../../../languageHandler'; + +function capFirst(s) { + return s.charAt(0).toUpperCase() + s.slice(1); +} export default class VerificationShowSas extends React.Component { static propTypes = { onDone: PropTypes.func.isRequired, onCancel: PropTypes.func.isRequired, - sas: PropTypes.string.isRequired, + sas: PropTypes.object.isRequired, } constructor() { @@ -32,17 +36,55 @@ export default class VerificationShowSas extends React.Component { render() { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - return
{_t( + const EmojiText = sdk.getComponent('views.elements.EmojiText'); + + let sasDisplay; + let sasCaption; + if (this.props.sas.emoji) { + const emojiBlocks = this.props.sas.emoji.map( + (emoji, i) =>
{sasCaption}
{_t( "For maximum security, we recommend you do this in person or use another " + "trusted means of communication.", )}
-