PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

display zalgo'd nicknames correctly on chrome/osx

Browse source
This commit is contained in:
Matthew Hodgson 2015-07-30 00:48:20 +01:00
parent 2d1b88e50d
commit 55a4f3e3a1
5 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
skins/base/css/molecules/MemberTile.css
View file

@ -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;

3
skins/base/css/molecules/SenderProfile.css
View file

@ -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;
}

14
skins/base/views/molecules/MemberTile.js
View file

@ -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 ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : 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 =
<div className="mx_MemberTile_nameWrapper">
<MemberInfo member={this.props.member} />
<span className="mx_MemberTile_nameSpan">{name}</span>
<span className={nameClass}>{name}</span>
{leave}
</div>
}
else {
nameEl =
<div className="mx_MemberTile_name">
<div className={nameClass}>
{name}
{leave}
</div>

2
skins/base/views/molecules/MessageTile.js
View file

@ -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 = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
var avatar, sender, resend;

13
skins/base/views/molecules/SenderProfile.js
View file

@ -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 (
<span className="mx_SenderProfile">
<span className={classes}>
{name}
</span>
);