From 1dd8fb796675b94b9c6751ef5dfa74e95b50ed4a Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.org>
Date: Fri, 27 Jan 2017 15:25:01 -0800
Subject: [PATCH] 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                            |  4 ++--
 static/js/popovers.js                         | 20 ++++++++++++++++---
 static/styles/zulip.css                       |  6 ++++++
 .../emoji_popover_content.handlebars          | 10 ++++++++--
 tools/lint-all                                |  2 +-
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/static/js/emoji.js b/static/js/emoji.js
index 3d1957a85e..1900dbe1e1 100644
--- a/static/js/emoji.js
+++ b/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 = {};
diff --git a/static/js/popovers.js b/static/js/popovers.js
index 08e791fc24..765ab43c5f 100644
--- a/static/js/popovers.js
+++ b/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);
 
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 427c64a2c6..fdea6bbae8 100644
--- a/static/styles/zulip.css
+++ b/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;
diff --git a/static/templates/emoji_popover_content.handlebars b/static/templates/emoji_popover_content.handlebars
index 78797318a1..1288aebccd 100644
--- a/static/templates/emoji_popover_content.handlebars
+++ b/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}}
-
diff --git a/tools/lint-all b/tools/lint-all
index 7640fd1a23..68b7127aee 100755
--- a/tools/lint-all
+++ b/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>')