From 55a4f3e3a1124fdbf7dad75cde040c6f7fa88c6e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 30 Jul 2015 00:48:20 +0100 Subject: [PATCH] display zalgo'd nicknames correctly on chrome/osx --- skins/base/css/molecules/MemberTile.css | 3 +++ skins/base/css/molecules/SenderProfile.css | 3 ++- skins/base/views/molecules/MemberTile.js | 14 ++++++++++++-- skins/base/views/molecules/MessageTile.js | 2 +- skins/base/views/molecules/SenderProfile.js | 13 ++++++++++++- 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index fcfc60a00e..2033b5b03e 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -98,6 +98,9 @@ limitations under the License. opacity: 0.5; } +.mx_MemberTile_zalgo { + font-family: Helvetica, Arial, Sans-Serif; +} .mx_MemberTile_leave { float: right; diff --git a/skins/base/css/molecules/SenderProfile.css b/skins/base/css/molecules/SenderProfile.css index 18523a9b3f..adf729dda0 100644 --- a/skins/base/css/molecules/SenderProfile.css +++ b/skins/base/css/molecules/SenderProfile.css @@ -14,5 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_SenderProfile { +.mx_SenderProfile_zalgo { + font-family: Helvetica, Arial, Sans-Serif; } diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 574be2254e..d37a0cb52c 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -25,6 +25,10 @@ var MemberTileController = require("../../../../src/controllers/molecules/Member var MemberInfo = ComponentBroker.get('molecules/MemberInfo'); var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog"); +// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them. +// Revert to Arial when this happens, which on OSX works at least. +var zalgo = /[\u0300-\u036f\u1ab0-\u1aff\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f]/; + module.exports = React.createClass({ displayName: 'MemberTile', mixins: [MemberTileController], @@ -65,18 +69,24 @@ module.exports = React.createClass({ var name = this.props.member.name; if (isMyUser) name += " (me)"; var leave = isMyUser ? X : null; + + var nameClass = this.state.hover ? "mx_MemberTile_nameSpan" : "mx_MemberTile_name"; + if (zalgo.test(name)) { + nameClass += " mx_MemberTile_zalgo"; + } + var nameEl; if (this.state.hover) { nameEl =
- {name} + {name} {leave}
} else { nameEl = -
+
{name} {leave}
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js index d868b143a5..b9a57079ff 100644 --- a/skins/base/views/molecules/MessageTile.js +++ b/skins/base/views/molecules/MessageTile.js @@ -57,7 +57,7 @@ module.exports = React.createClass({ mx_MessageTile_notSent: this.props.mxEvent.status == 'not_sent', mx_MessageTile_highlight: this.shouldHighlight(), mx_MessageTile_continuation: this.props.continuation, - mx_MessageTile_last: this.props.last + mx_MessageTile_last: this.props.last, }); var timestamp = var avatar, sender, resend; diff --git a/skins/base/views/molecules/SenderProfile.js b/skins/base/views/molecules/SenderProfile.js index d71d1c2226..c4bec306bc 100644 --- a/skins/base/views/molecules/SenderProfile.js +++ b/skins/base/views/molecules/SenderProfile.js @@ -17,9 +17,14 @@ limitations under the License. 'use strict'; var React = require('react'); +var classNames = require("classnames"); var SenderProfileController = require("../../../../src/controllers/molecules/SenderProfile"); +// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them. +// Revert to Arial when this happens, which on OSX works at least. +var zalgo = /[\u0300-\u036f\u1ab0-\u1aff\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f]/; + module.exports = React.createClass({ displayName: 'SenderProfile', mixins: [SenderProfileController], @@ -28,12 +33,18 @@ module.exports = React.createClass({ var mxEvent = this.props.mxEvent; var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); + var classes = classNames({ + mx_SenderProfile: true, + // taken from https://en.wikipedia.org/wiki/Combining_character + mx_SenderProfile_zalgo: zalgo.test(name), + }); + var msgtype = mxEvent.getContent().msgtype; if (msgtype && msgtype == 'm.emote') { name = ''; // emote message must include the name so don't duplicate it } return ( - + {name} );