imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Emojibase and switch to IamCal (Slack-style) shortcodes

Browse source 
for consistency with shortcodes commonly used by other platforms, as
was decided in https://github.com/vector-im/element-web/issues/13857.

One thing to be aware of is that the currently used version of Twemoji
does not support a few of the newer emoji present in Emojibase, so these
look a little out of place in the emoji picker. Optimally Twemoji would
be updated at the same time, though I don't know how to do that.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-07-10 22:40:30 -04:00
parent 829169ec87
commit 718887dd27
7 changed files with 72 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/emojipicker/Preview.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import { IEmoji } from "../../../emoji";
import { IEmoji, getShortcodes } from "../../../emoji";
import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps {
@ -30,8 +30,8 @@ class Preview extends React.PureComponent<IProps> {
const {
unicode = "",
annotation = "",
shortcodes: [shortcode = ""],
} = this.props.emoji || {};
} = this.props.emoji;
const shortcode = getShortcodes(this.props.emoji)[0];
return (
<div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
@ -42,9 +42,9 @@ class Preview extends React.PureComponent<IProps> {
<div className="mx_EmojiPicker_name mx_EmojiPicker_preview_name">
{annotation}
</div>
<div className="mx_EmojiPicker_shortcode">
{shortcode}
</div>
{ shortcode ?
<div className="mx_EmojiPicker_shortcode">{shortcode}</div> :
null }
</div>
</div>
);

7
src/components/views/emojipicker/QuickReactions.tsx
View file

@ -18,7 +18,7 @@ limitations under the License.
import React from 'react';
import { _t } from '../../../languageHandler';
import { getEmojiFromUnicode, IEmoji } from "../../../emoji";
import { getEmojiFromUnicode, getShortcodes, IEmoji } from "../../../emoji";
import Emoji from "./Emoji";
import { replaceableComponent } from "../../../utils/replaceableComponent";
@ -62,6 +62,7 @@ class QuickReactions extends React.Component<IProps, IState> {
};
render() {
const shortcode = this.state.hover ? getShortcodes(this.state.hover)[0] : undefined;
return (
<section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
<h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
@ -69,7 +70,9 @@ class QuickReactions extends React.Component<IProps, IState> {
? _t("Quick Reactions")
: <React.Fragment>
<span className="mx_EmojiPicker_name">{this.state.hover.annotation}</span>
<span className="mx_EmojiPicker_shortcode">{this.state.hover.shortcodes[0]}</span>
{ shortcode ?
<span className="mx_EmojiPicker_shortcode">{shortcode}</span> :
null }
</React.Fragment>
}
</h2>