Enable display of emoji as their alt codes in reactions.

This currently only supports this in emoji reactions, not in actual
emoji in message bodies, but it's a great start for people who want a
text-only view.

Tweaked to update the text by tabbott.

Fixes #3169.
This commit is contained in:
Sourav Badami
2017-03-02 14:30:53 +07:00
committed by Tim Abbott
parent 2bbfdeeb7b
commit 4616ee7762
15 changed files with 141 additions and 6 deletions

View File

@@ -343,6 +343,12 @@ var event_fixtures = {
setting: true,
},
update_display_settings__emoji_alt_code: {
type: 'update_display_settings',
setting_name: 'emoji_alt_code',
setting: true,
},
update_display_settings__twenty_four_hour_time: {
type: 'update_display_settings',
setting_name: 'twenty_four_hour_time',
@@ -705,6 +711,11 @@ run(function (override) {
dispatch(event);
assert_same(page_params.twenty_four_hour_time, true);
event = event_fixtures.update_display_settings__emoji_alt_code;
page_params.emoji_alt_code = false;
dispatch(event);
assert_same(page_params.emoji_alt_code, true);
});
run(function (override, capture, args) {

View File

@@ -127,6 +127,7 @@ exports.add_reaction = function (event) {
}
event.count = 1;
event.title = new_title;
event.emoji_alt_code = page_params.emoji_alt_code;
if (event.user.id === page_params.user_id) {
event.class = "message_reaction reacted";
} else {
@@ -204,6 +205,7 @@ exports.get_message_reactions = function (message) {
emoji_name_css_class: emoji.emoji_name_to_css_class(item[0]),
count: item[1].length,
title: generate_title(item[0], item[1]),
emoji_alt_code: page_params.emoji_alt_code,
};
if (emoji.realm_emojis[reaction.emoji_name]) {
reaction.is_realm_emoji = true;

View File

@@ -216,6 +216,14 @@ function dispatch_normal_event(event) {
message_list.narrowed.rerender();
}
}
if (event.setting_name === 'emoji_alt_code') {
page_params.emoji_alt_code = event.setting;
// Rerender the whole message list UI
home_msg_list.rerender();
if (current_msg_list === message_list.narrowed) {
message_list.narrowed.rerender();
}
}
if (event.setting_name === 'left_side_userlist') {
// TODO: Make this change the view immediately rather
// than requiring a reload or page resize.

View File

@@ -502,6 +502,30 @@ function _setup_page() {
});
});
$("#emoji_alt_code").change(function () {
var emoji_alt_code = this.checked;
var data = {};
data.emoji_alt_code = JSON.stringify(emoji_alt_code);
var context = {};
if (data.emoji_alt_code === "true") {
context.text_or_images = i18n.t('text');
} else {
context.text_or_images = i18n.t('images');
}
channel.patch({
url: '/json/settings/display',
data: data,
success: function () {
ui.report_success(i18n.t("Emoji reactions will appear as __text_or_images__!", context),
$('#display-settings-status').expectOne());
},
error: function (xhr) {
ui.report_error(i18n.t("Error updating emoji appearance setting"), xhr, $('#display-settings-status').expectOne());
},
});
});
$("#twenty_four_hour_time").change(function () {
var data = {};
var setting_value = $("#twenty_four_hour_time").is(":checked");
@@ -938,6 +962,7 @@ function _setup_page() {
function _update_page() {
$("#twenty_four_hour_time").prop('checked', page_params.twenty_four_hour_time);
$("#left_side_userlist").prop('checked', page_params.left_side_userlist);
$("#emoji_alt_code").prop('checked', page_params.emoji_alt_code);
$("#default_language_name").text(page_params.default_language_name);
$("#enable_stream_desktop_notifications").prop('checked', page_params.stream_desktop_notifications_enabled);

View File

@@ -161,3 +161,14 @@
background-color: #eef7fa;
border-color: #add8e6;
}
.emoji_alt_code {
position: relative;
top: 4px;
font-size: 0.8em;
display: inline-block;
vertical-align: top;
color: #333;
margin: 0px 1px 0px 0px;
line-height: 1em;
}

View File

@@ -1,8 +1,12 @@
<div class="{{this.class}}" title="{{this.title}}" data-emoji-name="{{this.emoji_name}}">
{{#if this.is_realm_emoji}}
<img src="{{this.url}}" class="emoji" />
{{#if this.emoji_alt_code}}
<div class="emoji_alt_code">&nbsp:{{this.emoji_name}}:</div>
{{else}}
<div class="emoji emoji-{{this.emoji_name_css_class}}" />
{{#if this.is_realm_emoji}}
<img src="{{this.url}}" class="emoji" />
{{else}}
<div class="emoji emoji-{{this.emoji_name_css_class}}" />
{{/if}}
{{/if}}
<div class="message_reaction_count">{{this.count}}</div>
</div>

View File

@@ -71,6 +71,17 @@
<label for="left_side_userlist" class="inline-block">{{t "Display user list on left side in narrow windows." }}</label>
</div>
<div class="input-group">
<label class="checkbox">
<input type="checkbox" name="emoji_alt_code" id="emoji_alt_code"
{{#if page_params.emoji_alt_code}}
checked="checked"
{{/if}} />
<span></span>
</label>
<label for="emoji_alt_code" class="inline-block">{{t 'Display emoji reactions as text (:heart: instead of <img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2764.png" title=":heart:"/>).' }}</label>
</div>
<div class="input-group">
<label class="checkbox">
<input type="checkbox" name="twenty_four_hour_time" id="twenty_four_hour_time"

View File

@@ -2377,6 +2377,18 @@ def do_change_left_side_userlist(user_profile, setting_value, log=True):
log_event(event)
send_event(event, [user_profile.id])
def do_change_emoji_alt_code(user_profile, setting_value, log=True):
# type: (UserProfile, bool, bool) -> None
user_profile.emoji_alt_code = setting_value
user_profile.save(update_fields=["emoji_alt_code"])
event = {'type': 'update_display_settings',
'user': user_profile.email,
'setting_name': 'emoji_alt_code',
'setting': setting_value}
if log:
log_event(event)
send_event(event, [user_profile.id])
def do_change_default_language(user_profile, setting_value, log=True):
# type: (UserProfile, Text, bool) -> None

View File

@@ -148,6 +148,7 @@ def fetch_initial_state_data(user_profile, event_types, queue_id,
if want('update_display_settings'):
state['twenty_four_hour_time'] = user_profile.twenty_four_hour_time
state['left_side_userlist'] = user_profile.left_side_userlist
state['emoji_alt_code'] = user_profile.emoji_alt_code
default_language = user_profile.default_language
state['default_language'] = default_language
@@ -374,6 +375,8 @@ def apply_event(state, event, user_profile, include_subscribers):
state['twenty_four_hour_time'] = event["setting"]
if event['setting_name'] == 'left_side_userlist':
state['left_side_userlist'] = event["setting"]
if event['setting_name'] == 'emoji_alt_code':
state['emoji_alt_code'] = event["setting"]
elif event['type'] == "update_global_notifications":
if event['notification_name'] == "enable_stream_desktop_notifications":
state['enable_stream_desktop_notifications'] = event['setting']

View File

@@ -0,0 +1,20 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.10.5 on 2017-03-02 07:28
from __future__ import unicode_literals
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('zerver', '0055_attachment_size'),
]
operations = [
migrations.AddField(
model_name='userprofile',
name='emoji_alt_code',
field=models.BooleanField(default=False),
),
]

View File

@@ -566,6 +566,7 @@ class UserProfile(ModelReprMixin, AbstractBaseUser, PermissionsMixin):
enter_sends = models.NullBooleanField(default=False) # type: Optional[bool]
autoscroll_forever = models.BooleanField(default=False) # type: bool
left_side_userlist = models.BooleanField(default=False) # type: bool
emoji_alt_code = models.BooleanField(default=False) # type: bool
# display settings
twenty_four_hour_time = models.BooleanField(default=False) # type: bool

View File

@@ -52,6 +52,7 @@ from zerver.lib.actions import (
do_update_pointer,
do_change_twenty_four_hour_time,
do_change_left_side_userlist,
do_change_emoji_alt_code,
do_change_enable_stream_desktop_notifications,
do_change_enable_stream_sounds,
do_change_enable_desktop_notifications,
@@ -717,6 +718,20 @@ class EventsRegisterTest(ZulipTestCase):
error = schema_checker('events[0]', events[0])
self.assert_on_error(error)
def test_change_emoji_alt_code(self):
# type: () -> None
schema_checker = check_dict([
('type', equals('update_display_settings')),
('setting_name', equals('emoji_alt_code')),
('user', check_string),
('setting', check_bool),
])
do_change_emoji_alt_code(self.user_profile, False)
for setting_value in [True, False]:
events = self.do_test(lambda: do_change_emoji_alt_code(self.user_profile, setting_value))
error = schema_checker('events[0]', events[0])
self.assert_on_error(error)
def test_change_enable_stream_desktop_notifications(self):
# type: () -> None
schema_checker = check_dict([

View File

@@ -1730,6 +1730,10 @@ class ChangeSettingsTest(ZulipTestCase):
# type: () -> None
self.check_for_toggle_param_patch("/json/settings/display", "left_side_userlist")
def test_toggling_emoji_alt_code(self):
# type: () -> None
self.check_for_toggle_param_patch("/json/settings/display", "emoji_alt_code")
def test_time_setting(self):
# type: () -> None
self.check_for_toggle_param_patch("/json/settings/display", "twenty_four_hour_time")
@@ -1953,6 +1957,7 @@ class HomeTest(ZulipTestCase):
"domain",
"domains",
"email",
"emoji_alt_code",
"enable_digest_emails",
"enable_offline_email_notifications",
"enable_offline_push_notifications",

View File

@@ -283,6 +283,7 @@ def home_real(request):
'alert_words',
'attachments',
'default_language',
'emoji_alt_code',
'last_event_id',
'left_side_userlist',
'max_message_id',

View File

@@ -20,7 +20,7 @@ from zerver.lib.actions import do_change_password, \
do_change_default_desktop_notifications, do_change_autoscroll_forever, \
do_change_enable_stream_desktop_notifications, do_change_enable_stream_sounds, \
do_regenerate_api_key, do_change_avatar_fields, do_change_twenty_four_hour_time, \
do_change_left_side_userlist, do_change_default_language, \
do_change_left_side_userlist, do_change_emoji_alt_code, do_change_default_language, \
do_change_pm_content_in_desktop_notifications, validate_email, \
do_change_user_email, do_start_email_change_process
from zerver.lib.avatar import avatar_url
@@ -149,8 +149,9 @@ def json_change_settings(request, user_profile,
def update_display_settings_backend(request, user_profile,
twenty_four_hour_time=REQ(validator=check_bool, default=None),
default_language=REQ(validator=check_string, default=None),
left_side_userlist=REQ(validator=check_bool, default=None)):
# type: (HttpRequest, UserProfile, Optional[bool], Optional[str], Optional[bool]) -> HttpResponse
left_side_userlist=REQ(validator=check_bool, default=None),
emoji_alt_code=REQ(validator=check_bool, default=None)):
# type: (HttpRequest, UserProfile, Optional[bool], Optional[str], Optional[bool], Optional[bool]) -> HttpResponse
if (default_language is not None and
default_language not in get_available_language_codes()):
raise JsonableError(_("Invalid language '%s'" % (default_language,)))
@@ -171,6 +172,11 @@ def update_display_settings_backend(request, user_profile,
do_change_left_side_userlist(user_profile, left_side_userlist)
result['left_side_userlist'] = left_side_userlist
elif (emoji_alt_code is not None and
user_profile.emoji_alt_code != emoji_alt_code):
do_change_emoji_alt_code(user_profile, emoji_alt_code)
result['emoji_alt_code'] = emoji_alt_code
return json_success(result)
@has_request_variables