Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

emoji: Switch to using iamcal sprite sheets for reactions and pickers. 

Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.

It requires some small changes to CSS to ensure emoji are centered
properly in the new design.

Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
This commit is contained in:
Tim Abbott 2017-05-03 13:11:35 -07:00
parent ddd3bbd32c
commit b20a24875a
4 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/js/emoji.js
View File

@ -19,18 +19,19 @@ var zulip_emoji = {
_.each(emoji_codes.names, function (value) {
var base_name = emoji_codes.name_to_codepoint[value];
default_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
default_emojis.push({emoji_name: value,
codepoint: emoji_codes.name_to_codepoint[value],
emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
});
_.each(emoji_codes.codepoints, function (value) {
default_unicode_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
default_unicode_emojis.push({emoji_name: value,
codepoint: value,
emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
});
exports.emoji_name_to_css_class = function (emoji_name) {
if (emoji_name.indexOf("+") >= 0) {
return emoji_name.replace("+", "");
}
return emoji_name;
return emoji_codes.name_to_codepoint[emoji_name];
};
exports.update_emojis = function update_emojis(realm_emojis) {
@ -50,7 +51,7 @@ exports.update_emojis = function update_emojis(realm_emojis) {
exports.emojis_by_name = {};
exports.emojis_name_to_css_class = {};
_.each(exports.emojis, function (emoji) {
_.each(default_emojis, function (emoji) {
var css_class = exports.emoji_name_to_css_class(emoji.emoji_name);
exports.emojis_name_to_css_class[emoji.emoji_name] = css_class;
exports.emojis_by_name[emoji.emoji_name] = emoji.emoji_url;
@ -65,7 +66,7 @@ exports.initialize = function initialize() {
// Load the sprite image in the background so that the browser
// can cache it for later use.
var sprite = new Image();
sprite.src = '/static/generated/emoji/sprite.png';
sprite.src = '/static/generated/emoji/sheet_google_32.png';
};
exports.update_emojis(page_params.realm_emoji);

10
static/styles/zulip.css
View File

@ -2337,6 +2337,16 @@ button.topic_edit_cancel {
margin-top: -7px;
}
div.emoji {
/* This is needed when using the sprite sheets */
top: 6px;
}
img.emoji {
/* This is the right offset for <img> style emoji */
top: 3px;
}
.emoji.realm-emoji {
background-size: contain;
background-position: center;

2
templates/zerver/index.html
View File

@ -14,7 +14,7 @@ var page_params = {{ page_params }};
{% block customhead %}
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link rel="stylesheet" type="text/css" href="/static/generated/emoji/sprite.css" />
<link rel="stylesheet" type="text/css" href="/static/generated/emoji/google_sprite.css" />
<style type="text/css">
#css-loading {

2
version.py
View File

@ -1,2 +1,2 @@
ZULIP_VERSION = "1.5.1+git"
PROVISION_VERSION = '4.22'
PROVISION_VERSION = '4.23'