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

emoji: Replace the old compose emoji picker with the reactions picker. 

This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.
This commit is contained in:
Jack Zhang 2017-04-29 03:43:13 -04:00 committed by Tim Abbott
parent 58a92a0eff
commit a9505654da
12 changed files with 12 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend_tests/node_tests/templates.js
View File

@ -522,34 +522,6 @@ function render(template_name, args) {
assert.equal(li.text(), 'The email will be forwarded to this stream');
}());
(function emoji_popover_content() {
var args = (function () {
var map = {};
for (var x in global.emoji.emojis_name_to_css_class) {
if (!global.emoji.realm_emojis[x]) {
map[x] = {
name: x,
css_name: global.emoji.emojis_name_to_css_class[x],
url: global.emoji.emojis_by_name[x],
};
}
}
return {
emoji_list: map,
realm_emoji: global.emoji.realm_emojis,
};
}());
var html = '<div style="height: 250px">';
html += render('emoji_popover_content', args);
html += "</div>";
// test to make sure the first emoji is present in the popover
var emoji_key = $(html).find(".emoji-100").attr('title');
assert.equal(emoji_key, ':100:');
global.write_handlebars_output("emoji_popover_content", html);
}());
(function group_pms() {
var args = {
group_pms: [

4
static/js/click_handlers.js
View File

@ -386,7 +386,7 @@ $(function () {
function handle_compose_click(e) {
// Emoji clicks should be handled by their own click handler in emoji_picker.js
if ($(e.target).is("#emoji_map, .emoji_popover, .emoji_popover.inner, img.emoji, .drag")) {
if ($(e.target).is("#emoji_map, img.emoji, .drag")) {
return;
}
// Don't let clicks in the compose area count as
@ -580,7 +580,7 @@ $(function () {
if (compose_state.composing() && !$(e.target).is("a") &&
($(e.target).closest(".modal").length === 0) &&
window.getSelection().toString() === "" &&
($(e.target).closest('#emoji_map').length === 0)) {
($(e.target).closest('.popover-content').length === 0)) {
compose_actions.cancel();
}
});

70
static/js/emoji_picker.js
View File

@ -6,30 +6,6 @@ var exports = {};
// compose emoji picker with the emoji picker widget
// implemented in this module.
var current_message_reactions_popover_elem;
var emoji_map_is_open = false;
var emoji_map_is_rendered = false;
function render_emoji_popover() {
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').empty();
$('.emoji_popover').append(content);
}
function promote_popular(a, b) {
function rank(name) {
@ -171,55 +147,21 @@ exports.hide_reactions_popover = function () {
}
};
exports.reset_emoji_popover = function () {
emoji_map_is_rendered = false;
};
exports.hide_emoji_map_popover = function () {
if (emoji_map_is_open) {
$('.emoji_popover').css('display', 'none');
$('.drag').css('display', 'none');
$("#new_message_content").focus();
emoji_map_is_open = false;
}
};
exports.show_emoji_map_popover = function () {
if (!emoji_map_is_open) {
$('.emoji_popover').css('display', 'inline-block');
$('.emoji_popover').scrollTop(0);
$('.drag').show();
$("#new_message_content").focus();
emoji_map_is_open = true;
}
};
exports.register_click_handlers = function () {
$("body").on("click", ".emoji_popover", function (e) {
e.stopPropagation();
});
$(".emoji_popover").on("click", ".emoji", function (e) {
var emoji_choice = $(e.target).attr("title");
$(document).on('click', '.reaction-popover-reaction.composition', function (e) {
var emoji_text = ':' + this.title + ':';
var textarea = $("#new_message_content");
textarea.caret(emoji_choice);
textarea.caret(emoji_text);
textarea.focus();
e.stopPropagation();
emoji_picker.hide_reactions_popover();
});
$("#compose").on("click", "#emoji_map", function (e) {
e.preventDefault();
e.stopPropagation();
if (emoji_map_is_open) {
// If the popover is already shown, clicking again should toggle it.
emoji_picker.hide_emoji_map_popover();
} else {
// If the emoji_map is not rendered before then, a call to render_emoji_popover is made.
if (!emoji_map_is_rendered) {
render_emoji_popover();
emoji_map_is_rendered = true;
}
emoji_picker.show_emoji_map_popover();
}
emoji_picker.toggle_reactions_popover(this);
});
$("#main_div").on("click", ".reactions_hover, .reaction_button", function (e) {

6
static/js/hotkey.js
View File

@ -209,12 +209,6 @@ exports.process_escape_key = function (e) {
return true;
}
// emoji window should trap escape before it is able to close the compose box
if ($('.emoji_popover').css('display') === 'inline-block') {
emoji_picker.hide_emoji_map_popover();
return true;
}
if (exports.processing_text()) {
if ($(".message_edit_content").filter(":focus").length > 0) {
row = $(".message_edit_content").filter(":focus").closest(".message_row");

42
static/js/popovers.js
View File

@ -284,44 +284,6 @@ exports.register_click_handlers = function () {
show_message_info_popover(this, rows.id(row));
});
(function () {
// create locally scoped variables for drag tracking.
var meta = {
drag: false,
c: {
y: null,
},
$popover: $(".emoji_popover"),
MIN_HEIGHT: 25,
MAX_HEIGHT: 300,
};
// drag must start within the .drag zone.
$(".drag").on("mousedown", function (e) {
meta.drag = true;
meta.c.y = e.screenY;
});
// mouse move that originated in .drag zone can go anywhere.
$("body").on("mousemove", function (e) {
if (meta.drag) {
var diff = e.screenY - meta.c.y;
var resolved_height = meta.$popover.height() - diff;
if (resolved_height > meta.MIN_HEIGHT && resolved_height < meta.MAX_HEIGHT) {
meta.$popover.height(resolved_height);
}
meta.c.y = e.screenY;
}
});
// drag ends on mouseup. This cancels all drag events without interfering
// with any other events.
$("body").on("mouseup", function () {
meta.drag = false;
});
}());
$('body').on('click', '.user_popover .narrow_to_private_messages', function (e) {
var user_id = $(e.target).parents('ul').attr('data-user-id');
var email = people.get_person_from_user_id(user_id).email;
@ -562,8 +524,7 @@ exports.any_active = function () {
// True if any popover (that this module manages) is currently shown.
return popovers.actions_popped() || user_sidebar_popped() ||
stream_popover.stream_popped() || stream_popover.topic_popped() ||
message_info_popped() || emoji_picker.emoji_map_is_open ||
emoji_picker.reactions_popped();
message_info_popped() || emoji_picker.reactions_popped();
};
exports.hide_all = function () {
@ -576,7 +537,6 @@ exports.hide_all = function () {
popovers.hide_user_sidebar_popover();
popovers.hide_userlist_sidebar();
stream_popover.restore_stream_list_size();
emoji_picker.hide_emoji_map_popover();
// look through all the popovers that have been added and removed.
list_of_popovers.forEach(function ($o) {

2
static/js/reactions.js
View File

@ -121,7 +121,7 @@ function maybe_select_emoji(e) {
}
}
$(document).on('click', '.reaction-popover-reaction', function () {
$(document).on('click', '.reaction-popover-reaction.reaction', function () {
// When an emoji is clicked in the popover,
// if the user has reacted to this message with this emoji
// the reaction is removed

1
static/js/server_events.js
View File

@ -129,7 +129,6 @@ function dispatch_normal_event(event) {
case 'realm_emoji':
emoji.update_emojis(event.realm_emoji);
settings_emoji.populate_emoji(event.realm_emoji);
emoji_picker.reset_emoji_popover();
break;
case 'realm_filters':

5
static/js/ui_init.js
View File

@ -98,11 +98,6 @@ $(function () {
}
});
// Override the #compose mousewheel prevention below just for the emoji box
$('.emoji_popover').mousewheel(function (e) {
e.stopPropagation();
});
// Ignore wheel events in the compose area which weren't already handled above.
$('#compose').mousewheel(function (e) {
e.stopPropagation();

31
static/styles/compose.css
View File

@ -421,37 +421,6 @@ input.recipient_box {
cursor: ns-resize;
}
.emoji_popover {
display: none;
position: relative;
margin-top: 10px;
bottom: 0px;
z-index: 1010;
/* take away 2px of borders and 2px of padding. */
width: calc(100% - 2px - 2px);
height: 140px;
padding: 1px;
text-align: center;
background-color: #ffffff;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
overflow: hidden;
overflow-y: scroll;
}
.emoji_popover .emoji {
margin: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
}
.emoji_popover .emoji:active {
border-radius: 5px;
border: 2px white solid;
}
#enter_sends {
margin-top: 0px;
margin-right: 5px;

11
static/templates/emoji_popover_content.handlebars
View File

@ -1,11 +0,0 @@
{{! Contents of the "emoji map" popup }}
{{#each emoji_list}}
{{#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}}

4
static/templates/reaction_popover_content.handlebars
View File

@ -7,7 +7,7 @@
{{#if message_id}} {{! message_id -> message reaction, no message_id -> compose }}
<div class="reaction-popover-emoji-map" data-message-id="{{message_id}}">
{{#each emojis}}
<div class="reaction-popover-reaction {{#if has_reacted}} reacted {{/if}}" title={{name}} tabindex="0">
<div class="reaction-popover-reaction {{#if has_reacted}} reacted {{/if}} reaction" title={{name}} tabindex="0">
{{#if is_realm_emoji}}
<img src="{{url}}" class="emoji" title= ":{{name}}:" />
{{else}}
@ -19,7 +19,7 @@
{{else}}
<div class="reaction-popover-emoji-map">
{{#each emojis}}
<div class="reaction-popover-reaction" title={{name}} tabindex="0">
<div class="reaction-popover-reaction composition" title={{name}} tabindex="0">
{{#if is_realm_emoji}}
<img src="{{url}}" class="emoji" title= ":{{name}}:" />
{{else}}

1
templates/zerver/compose.html
View File

@ -84,7 +84,6 @@
<div id="preview_content"></div>
</div>
<div class="drag"></div>
<div class="emoji_popover"></div>
<div id="below-compose-content">
<input type="file" id="file_input" class="notvisible pull-left" multiple />
<a class="message-control-button icon-vector-smile"