From ca2f93db31ea181e046cb2abddea3366580af149 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Fri, 10 Nov 2017 16:55:40 -0800
Subject: [PATCH] settings: Restyle "emoji style" section.

This restyles and rewords some of the emoji style section to look
better and fit it more with the current style guide.

Tweaked by tabbott to modify the historical migration rather than
adding a new one.  This is OK because the emojiset choices text change
doesn't touch the database; it's just a Django Python code thing.

Also removed translation tags, since we don't need them for a set of
brand names.
---
 static/styles/settings.css                    | 24 +++++++++++++++----
 .../settings/display-settings.handlebars      | 13 +++++-----
 .../migrations/0076_userprofile_emojiset.py   |  2 +-
 zerver/models.py                              |  8 +++----
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/static/styles/settings.css b/static/styles/settings.css
index 4c3de5b234..fe76ac2d8d 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -838,8 +838,9 @@ input[type=checkbox].inline-block {
 }
 
 .emojiset_choices {
-    padding-left: 20px;
-    width: 230px;
+    width: 250px;
+    margin-top: 10px;
+    padding: 0px 10px;
 }
 
 .emojiset_choices .emoji {
@@ -848,10 +849,25 @@ input[type=checkbox].inline-block {
 }
 
 .emojiset_choices label {
-    line-height: 2em;
+    border-bottom: 1px solid #ddd;
+    padding: 8px 0px 10px 0px;
 }
 
-.emojiset_choices span {
+.emojiset_choices label:last-of-type {
+    border-bottom: none;
+}
+
+.emojiset_choices label input[type=radio] {
+    position: relative;
+    top: -2px;
+    margin: 0px 5px 0px 0px;
+}
+
+.emojiset_choices label input[type=radio]:checked + span {
+    font-weight: 600;
+}
+
+.emojiset_choices .right {
     float: right;
 }
 
diff --git a/static/templates/settings/display-settings.handlebars b/static/templates/settings/display-settings.handlebars
index 0a6be7080c..0b72f17e47 100644
--- a/static/templates/settings/display-settings.handlebars
+++ b/static/templates/settings/display-settings.handlebars
@@ -82,19 +82,18 @@
             </div>
         </div>
 
-        <h3 class="light">Emoji settings</h3>
+        <h3 class="light">Emoji style</h3>
         <div class="input-group side-padded-container">
-            <label>{{t "Emoji style" }}:</label>
-            <div class="emojiset_choices">
-                {{#each page_params.emojiset_choices}}
+            <div class="emojiset_choices grey-box">
+                {{#each page_params.emojiset_choices }}
                 <label>
                     <input type="radio" class="emojiset_choice" name="emojiset_group" value="{{@key}}" />
-                    {{this}}
-                    <span>
+                    <span>{{this}}</span>
+                    <span class="right">
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f642.png" />
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f44d.png" />
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f680.png" />
-                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f4a9.png" />
+                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f389.png" />
                     </span>
                 </label>
                 {{/each}}
diff --git a/zerver/migrations/0076_userprofile_emojiset.py b/zerver/migrations/0076_userprofile_emojiset.py
index 280dae5c38..f1ba7f25fe 100644
--- a/zerver/migrations/0076_userprofile_emojiset.py
+++ b/zerver/migrations/0076_userprofile_emojiset.py
@@ -14,6 +14,6 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='userprofile',
             name='emojiset',
-            field=models.CharField(choices=[('apple', 'Apple style'), ('emojione', 'Emoji One style'), ('google', 'Google style'), ('twitter', 'Twitter style')], default='google', max_length=20),
+            field=models.CharField(choices=[('apple', 'Apple'), ('emojione', 'Emoji One'), ('google', 'Google'), ('twitter', 'Twitter')], default='google', max_length=20),
         ),
     ]
diff --git a/zerver/models.py b/zerver/models.py
index cf51f7fa28..e6ee8841a6 100644
--- a/zerver/models.py
+++ b/zerver/models.py
@@ -650,10 +650,10 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     EMOJIONE_EMOJISET   = u'emojione'
     GOOGLE_EMOJISET     = u'google'
     TWITTER_EMOJISET    = u'twitter'
-    EMOJISET_CHOICES    = ((APPLE_EMOJISET, _("Apple style")),
-                           (EMOJIONE_EMOJISET, _("Emoji One style")),
-                           (GOOGLE_EMOJISET, _("Google style")),
-                           (TWITTER_EMOJISET, _("Twitter style")))
+    EMOJISET_CHOICES    = ((APPLE_EMOJISET, "Apple"),
+                           (EMOJIONE_EMOJISET, "Emoji One"),
+                           (GOOGLE_EMOJISET, "Google"),
+                           (TWITTER_EMOJISET, "Twitter"))
     emojiset = models.CharField(default=GOOGLE_EMOJISET, choices=EMOJISET_CHOICES, max_length=20)  # type: Text
 
     # Define the types of the various automatically managed properties