mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
display zalgo'd nicknames correctly on chrome/osx
This commit is contained in:
parent
2d1b88e50d
commit
55a4f3e3a1
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user