Display realm emojis in the emoji picker container.

This displays the realm emojis in the emoji picker container in their
own divs styled similarly to the existing .emoji divs.

static/js/emoji.js

@@ -18,7 +18,7 @@ var unicode_emoji_names = ["1f198", "1f3ed", "0034", "1f341", "1f3d7", "26f9", "
 emoji_names.push("zulip");
 exports.realm_emojis.zulip = {
     emoji_name: 'zulip',
-    emoji_url: '/static/third/gemoji/images/emoji/zulip.png',
+    emoji_url: '/static/generated/emoji/images/emoji/zulip.png',
 };
 
 _.each(emoji_names, function (value) {
@@ -40,7 +40,7 @@ exports.update_emojis = function update_emojis(realm_emojis) {
     // Copy the default emoji list and add realm-specific emoji to it
     exports.emojis = default_emojis.slice(0);
     _.each(realm_emojis, function (data, name) {
-        exports.emojis.push({emoji_name: name, emoji_url: data.display_url});
+        exports.emojis.push({emoji_name: name, emoji_url: data.display_url, is_realm_emoji: true});
         exports.realm_emojis[name] = {emoji_name: name, emoji_url: data.display_url};
     });
     exports.emojis_by_name = {};

static/js/popovers.js

@@ -373,9 +373,23 @@ exports.hide_user_sidebar_popover = function () {
 };
 
 function render_emoji_popover() {
-    var content = templates.render('emoji_popover_content', {
-        emoji_list: emoji.emojis_name_to_css_class,
+    var content = (function () {
+        var map = {};
+        for (var x in emoji.emojis_name_to_css_class) {
+            if (!emoji.realm_emojis[x]) {
+                map[x] = {
+                    name: x,
+                    css_name: emoji.emojis_name_to_css_class[x],
+                    url: emoji.emojis_by_name[x],
+                };
+            }
+        }
+
+        return templates.render('emoji_popover_content', {
+            emoji_list: map,
+            realm_emoji: emoji.realm_emojis,
         });
+    }());
 
     $('.emoji_popover').append(content);
 

static/styles/zulip.css

@@ -2123,6 +2123,12 @@ button.topic_edit_cancel {
     margin-top: -7px;
 }
 
+.emoji.realm-emoji {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .twitter-tweet {
     border: 1px solid #ddd;
     padding: .5em .75em;

static/templates/emoji_popover_content.handlebars

@@ -1,5 +1,11 @@
 {{! Contents of the "emoji map" popup }}
 {{#each emoji_list}}
-    <div class="emoji emoji-{{this}}" title= ":{{@key}}:" />
+    {{#with this}}
+    <div class="emoji emoji-{{css_name}}" title=":{{name}}:" />
+    {{/with}}
+{{/each}}
+{{#each realm_emoji}}
+    {{#with this}}
+    <div class="emoji realm-emoji emoji-{{emoji_name}}" title=":{{emoji_name}}:" style="background-image: url('{{emoji_url}}')"></div>
+    {{/with}}
 {{/each}}
-

tools/lint-all

@@ -447,7 +447,7 @@ def build_custom_checkers(by_lang):
          'description': "`placeholder` value should be translatable."},
         {'pattern': "title='[^{]",
          'description': "`title` value should be translatable."},
-        {'pattern': 'title="[^{]',
+        {'pattern': 'title="[^{\:]',
          'exclude_line': set([
              ('templates/zerver/markdown_help.html',
               '<td><img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/heart.png" title=":heart:" /></td>')