Skip to content
Permalink
Browse files

feat: emojify ALL THE THINGS!

  • Loading branch information
aviraldg committed Jul 5, 2016
1 parent 9c0dc74 commit 020f1f4320ff05fead13aca72d40d0e765c91c9b
@@ -233,5 +233,11 @@ module.exports = {
}
},

}
emojifyText: function(text) {
emojione.imageType = 'svg';
return {
__html: emojione.unicodeToImage(escape(text)),
};
},
};

@@ -18,6 +18,7 @@ limitations under the License.

var React = require('react');
var AvatarLogic = require("../../../Avatar");
import {emojifyText} from '../../../HtmlUtils';

module.exports = React.createClass({
displayName: 'BaseAvatar',
@@ -137,14 +138,14 @@ module.exports = React.createClass({
var imageUrl = this.state.imageUrls[this.state.urlsIndex];

if (imageUrl === this.state.defaultImageUrl) {
var initialLetter = this._getInitialLetter(this.props.name);
var initialLetter = emojifyText(this._getInitialLetter(this.props.name));
return (
<span className="mx_BaseAvatar" {...this.props}>
<span className="mx_BaseAvatar_initial" aria-hidden="true"
style={{ fontSize: (this.props.width * 0.65) + "px",
width: this.props.width + "px",
lineHeight: this.props.height + "px" }}>
{ initialLetter }
lineHeight: this.props.height + "px" }}
dangerouslySetInnerHTML={initialLetter}>
</span>
<img className="mx_BaseAvatar_image" src={imageUrl}
alt="" title={this.props.title} onError={this.onError}
@@ -19,6 +19,7 @@ limitations under the License.
var React = require('react');

var TextForEvent = require('../../../TextForEvent');
import {emojifyText} from '../../../HtmlUtils';

module.exports = React.createClass({
displayName: 'TextualEvent',
@@ -31,11 +32,11 @@ module.exports = React.createClass({

render: function() {
var text = TextForEvent.textForEvent(this.props.mxEvent);
if (text == null || text.length == 0) return null;
if (text == null || text.length === 0) return null;
let textHTML = emojifyText(TextForEvent.textForEvent(this.props.mxEvent));

return (
<div className="mx_TextualEvent">
{TextForEvent.textForEvent(this.props.mxEvent)}
<div className="mx_TextualEvent" dangerouslySetInnerHTML={textHTML}>
</div>
);
},
@@ -20,6 +20,7 @@ var React = require('react');

var MatrixClientPeg = require('../../../MatrixClientPeg');
var sdk = require('../../../index');
import {emojifyText} from '../../../HtmlUtils';


var PRESENCE_CLASS = {
@@ -82,6 +83,7 @@ module.exports = React.createClass({
var mainClassName = "mx_EntityTile ";
mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : "");
var nameEl;
let nameHTML = emojifyText(this.props.name);

if (this.state.hover && !this.props.suppressOnHover) {
var activeAgo = this.props.presenceLastActiveAgo ?
@@ -92,7 +94,7 @@ module.exports = React.createClass({
nameEl = (
<div className="mx_EntityTile_details">
<img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
<div className="mx_EntityTile_name_hover">{ this.props.name }</div>
<div className="mx_EntityTile_name_hover" dangerouslySetInnerHTML={nameHTML}></div>
<PresenceLabel activeAgo={ activeAgo }
currentlyActive={this.props.presenceCurrentlyActive}
presenceState={this.props.presenceState} />
@@ -101,8 +103,7 @@ module.exports = React.createClass({
}
else {
nameEl = (
<div className="mx_EntityTile_name">
{ this.props.name }
<div className="mx_EntityTile_name" dangerouslySetInnerHTML={nameHTML}>
</div>
);
}
@@ -24,6 +24,7 @@ var Modal = require("../../../Modal");
var linkify = require('linkifyjs');
var linkifyElement = require('linkifyjs/element');
var linkifyMatrix = require('../../../linkify-matrix');
import {emojifyText} from '../../../HtmlUtils';

linkifyMatrix(linkify);

@@ -211,9 +212,11 @@ module.exports = React.createClass({
roomName = this.props.room.name;
}

let roomNameHTML = emojifyText(roomName);

name =
<div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
<div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName }>{ roomName }</div>
<div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName } dangerouslySetInnerHTML={roomNameHTML}></div>
{ searchStatus }
<div className="mx_RoomHeader_settingsButton" title="Settings">
<TintableSvg src="img/settings.svg" width="12" height="12"/>
@@ -21,6 +21,7 @@ var classNames = require('classnames');
var dis = require("../../../dispatcher");
var MatrixClientPeg = require('../../../MatrixClientPeg');
var sdk = require('../../../index');
import {emojifyText} from '../../../HtmlUtils';

module.exports = React.createClass({
displayName: 'RoomTile',
@@ -104,10 +105,13 @@ module.exports = React.createClass({
var label;
if (!this.props.collapsed) {
var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : '');
let nameHTML = emojifyText(name);
if (this.props.selected) {
name = <span>{ name }</span>;
name = <span dangerouslySetInnerHTML={nameHTML}></span>;
label = <div className={ className }>{ name }</div>;
} else {
label = <div className={ className } dangerouslySetInnerHTML={nameHTML}></div>;
}
label = <div className={ className }>{ name }</div>;
}
else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");

0 comments on commit 020f1f4

Please sign in to comment.
You can’t perform that action at this time.