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.", )}
-