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

emoji: Migrate popover from Bootstrap to Tippy. 

Fixes part of #23632.
This commit is contained in:
Daniil Fadeev 2023-08-25 13:19:43 +03:00 committed by Tim Abbott
parent 8fc4d99e33
commit 82ca794f94
11 changed files with 140 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
web/src/emoji_picker.js
View File

@ -9,30 +9,27 @@ import render_emoji_showcase from "../templates/emoji_showcase.hbs";
import * as blueslip from "./blueslip"; import * as blueslip from "./blueslip";
import * as compose_ui from "./compose_ui"; import * as compose_ui from "./compose_ui";
import {media_breakpoints_num} from "./css_variables";
import * as emoji from "./emoji"; import * as emoji from "./emoji";
import * as keydown_util from "./keydown_util"; import * as keydown_util from "./keydown_util";
import * as message_lists from "./message_lists"; import * as message_lists from "./message_lists";
import * as message_store from "./message_store"; import * as message_store from "./message_store";
import {page_params} from "./page_params"; import {page_params} from "./page_params";
import * as popovers from "./popovers"; import * as popover_menus from "./popover_menus";
import * as reactions from "./reactions"; import * as reactions from "./reactions";
import * as rows from "./rows"; import * as rows from "./rows";
import * as scroll_util from "./scroll_util"; import * as scroll_util from "./scroll_util";
import * as spectators from "./spectators"; import * as spectators from "./spectators";
import * as ui_util from "./ui_util";
import {user_settings} from "./user_settings"; import {user_settings} from "./user_settings";
import * as user_status_ui from "./user_status_ui"; import * as user_status_ui from "./user_status_ui";
// Emoji picker is of fixed width and height. Update these
// whenever these values are changed in `reactions.css`.
const APPROX_HEIGHT = 375;
const APPROX_WIDTH = 255;
// The functionalities for reacting to a message with an emoji // The functionalities for reacting to a message with an emoji
// and composing a message with an emoji share a single widget, // and composing a message with an emoji share a single widget,
// implemented as the emoji_popover. // implemented as the emoji_popover.
export let complete_emoji_catalog = []; export let complete_emoji_catalog = [];
let $current_message_emoji_popover_elem; let emoji_popover_instance = null;
let emoji_catalog_last_coordinates = { let emoji_catalog_last_coordinates = {
section: 0, section: 0,
index: 0, index: 0,
@ -43,6 +40,7 @@ let search_is_active = false;
const search_results = []; const search_results = [];
let section_head_offsets = []; let section_head_offsets = [];
let edit_message_id = null; let edit_message_id = null;
let current_message_id = null;
const EMOJI_CATEGORIES = [ const EMOJI_CATEGORIES = [
{name: "Popular", icon: "fa-star-o"}, {name: "Popular", icon: "fa-star-o"},
@ -108,6 +106,7 @@ function show_search_results() {
} }
function show_emoji_catalog() { function show_emoji_catalog() {
reset_emoji_showcase();
$(".emoji-popover-emoji-map").show(); $(".emoji-popover-emoji-map").show();
$(".emoji-popover-category-tabs").show(); $(".emoji-popover-category-tabs").show();
$(".emoji-search-results-container").hide(); $(".emoji-search-results-container").hide();
@ -164,7 +163,7 @@ export function rebuild_catalog() {
const generate_emoji_picker_content = function (id) { const generate_emoji_picker_content = function (id) {
let emojis_used = []; let emojis_used = [];
if (id !== undefined) { if (id) {
emojis_used = reactions.get_emojis_used_by_user_for_message_id(id); emojis_used = reactions.get_emojis_used_by_user_for_message_id(id);
} }
for (const emoji_dict of emoji.emojis_by_name.values()) { for (const emoji_dict of emoji.emojis_by_name.values()) {
@ -189,22 +188,24 @@ function refill_section_head_offsets($popover) {
} }
export function reactions_popped() { export function reactions_popped() {
return $current_message_emoji_popover_elem !== undefined; return Boolean(emoji_popover_instance);
} }
export function hide_emoji_popover() { export function hide_emoji_popover() {
$(".has_popover").removeClass("has_popover has_emoji_popover"); if (!reactions_popped()) {
return;
}
current_message_id = null;
if (user_status_ui.user_status_picker_open()) { if (user_status_ui.user_status_picker_open()) {
// Re-enable clicking events for other elements after closing // Re-enable clicking events for other elements after closing
// the popover. This is the inverse of the hack of in the // the popover. This is the inverse of the hack of in the
// handler that opens the "user status modal" emoji picker. // handler that opens the "user status modal" emoji picker.
$(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "all"); $(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "all");
} }
if (reactions_popped()) { $(emoji_popover_instance.reference).removeClass("reaction_button_visible");
$current_message_emoji_popover_elem.popover("destroy"); $(emoji_popover_instance.reference).parent().removeClass("reaction_button_visible");
$current_message_emoji_popover_elem.removeClass("reaction_button_visible"); emoji_popover_instance.destroy();
$current_message_emoji_popover_elem = undefined; emoji_popover_instance = null;
}
} }
function get_selected_emoji() { function get_selected_emoji() {
@ -433,7 +434,8 @@ function get_next_emoji_coordinates(move_by) {
} }
function change_focus_to_filter() { function change_focus_to_filter() {
$(".emoji-popover-filter").trigger("focus"); const $popover = $(emoji_popover_instance.popper);
$popover.find(".emoji-popover-filter").trigger("focus");
// If search is active reset current selected emoji to first emoji. // If search is active reset current selected emoji to first emoji.
if (search_is_active) { if (search_is_active) {
current_section = 0; current_section = 0;
@ -619,71 +621,80 @@ function register_popover_events($popover) {
}); });
} }
export function build_emoji_popover(element, id) { function get_default_emoji_popover_options() {
const $elt = $(element); return {
if (id !== undefined) { placement: "top",
message_lists.current.select_id(id); popperOptions: {
} modifiers: [
{
let placement = popovers.compute_placement($elt, APPROX_HEIGHT, APPROX_WIDTH, true); // The placement is set to top, but if that placement does not fit,
// the opposite bottom or left placement will be used.
if (placement === "viewport_center") { name: "flip",
// For legacy reasons `compute_placement` actually can options: {
// return `viewport_center`, but bootstrap doesn't actually // We list both bottom and top here, because
// support that. // some callers override the default
placement = "left"; // placement.
} fallbackPlacements: ["bottom", "top", "left", "right"],
},
let template = render_emoji_popover(); },
],
// if the window is mobile sized, add the `.popover-flex` wrapper to the emoji },
// popover so that it will be wrapped in flex and centered in the screen. onCreate(instance) {
if (window.innerWidth <= 768) { if (current_message_id) {
template = "<div class='popover-flex'>" + template + "</div>"; message_lists.current.select_id(current_message_id);
} }
emoji_popover_instance = instance;
$elt.popover({ const $popover = $(instance.popper);
// temporary patch for handling popover placement of `viewport_center` $popover.addClass("emoji-popover-root");
placement, instance.setContent(ui_util.parse_html(render_emoji_popover()));
fix_positions: true, $popover
template, .find(".popover-content")
title: "", .append(generate_emoji_picker_content(current_message_id));
content: generate_emoji_picker_content(id), emoji_catalog_last_coordinates = {
html: true, section: 0,
trigger: "manual", index: 0,
fixed: true, };
}); },
$elt.popover("show"); onShow(instance) {
$elt.addClass("reaction_button_visible"); const $reference = $(instance.reference);
$elt.closest(".message_row").toggleClass("has_popover has_emoji_popover"); $reference.addClass("reaction_button_visible");
$reference.parent().addClass("reaction_button_visible");
const $popover = $elt.data("popover").$tip; },
$popover.find(".emoji-popover-filter").trigger("focus"); onMount(instance) {
$current_message_emoji_popover_elem = $elt; const $popover = $(instance.popper);
refill_section_head_offsets($popover);
emoji_catalog_last_coordinates = { register_popover_events($popover);
section: 0, show_emoji_catalog();
index: 0, change_focus_to_filter();
},
onHidden() {
hide_emoji_popover();
},
}; };
show_emoji_catalog();
reset_emoji_showcase();
$(() => refill_section_head_offsets($popover));
register_popover_events($popover);
} }
export function toggle_emoji_popover(element, id) { export function toggle_emoji_popover(target, id, additional_popover_options) {
const $last_popover_elem = $current_message_emoji_popover_elem; if (id) {
popovers.hide_all(); current_message_id = id;
if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
} }
build_emoji_popover(element, id); let show_as_overlay = false;
}
// If the window is mobile-sized, we will render the
// emoji popover centered on the screen with the overlay.
if (window.innerWidth <= media_breakpoints_num.md) {
show_as_overlay = true;
}
popover_menus.toggle_popover_menu(
target,
{
...get_default_emoji_popover_options(),
...additional_popover_options,
},
{show_as_overlay},
);
}
export function register_click_handlers() { export function register_click_handlers() {
$(document).on("click", ".emoji-popover-emoji.reaction", function (e) { $(document).on("click", ".emoji-popover-emoji.reaction", function (e) {
// When an emoji is clicked in the popover, // When an emoji is clicked in the popover,
@ -729,7 +740,7 @@ export function register_click_handlers() {
toggle_emoji_popover(compose_click_target); toggle_emoji_popover(compose_click_target);
}); });
$("#main_div").on("click", ".reaction_button", function (e) { $("#main_div").on("click", ".emoji-message-control-button-container", function (e) {
e.stopPropagation(); e.stopPropagation();
if (page_params.is_spectator) { if (page_params.is_spectator) {
@ -738,7 +749,7 @@ export function register_click_handlers() {
} }
const message_id = rows.get_message_id(this); const message_id = rows.get_message_id(this);
toggle_emoji_popover(this, message_id); toggle_emoji_popover(e.currentTarget, message_id, {placement: "bottom"});
}); });
$("body").on("click", ".emoji-popover-tab-item", function (e) { $("body").on("click", ".emoji-popover-tab-item", function (e) {
@ -780,12 +791,17 @@ export function register_click_handlers() {
$("body").on("click", "#set-user-status-modal #selected_emoji", (e) => { $("body").on("click", "#set-user-status-modal #selected_emoji", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggle_emoji_popover(e.target); toggle_emoji_popover(e.target, undefined, {placement: "bottom"});
// Because the emoji picker gets drawn on top of the user if (reactions_popped()) {
// status modal, we need this hack to make clicking outside // Because the emoji picker gets drawn on top of the user
// the emoji picker only close the emoji picker, and not the // status modal, we need this hack to make clicking outside
// whole user status modal. // the emoji picker only close the emoji picker, and not the
$(".app, .header, .modal__overlay, #set-user-status-modal").css("pointer-events", "none"); // whole user status modal.
$(".app, .header, .modal__overlay, #set-user-status-modal").css(
"pointer-events",
"none",
);
}
}); });
$(document).on("click", ".emoji-popover-emoji.status-emoji", function (e) { $(document).on("click", ".emoji-popover-emoji.status-emoji", function (e) {

5
web/src/hotkey.js
View File

@ -1000,8 +1000,11 @@ export function process_hotkey(e, hotkey) {
case "toggle_reactions_popover": { case "toggle_reactions_popover": {
const $row = message_lists.current.selected_row(); const $row = message_lists.current.selected_row();
emoji_picker.toggle_emoji_popover( emoji_picker.toggle_emoji_popover(
msg.sent_by_me ? $row.find(".actions_hover")[0] : $row.find(".reaction_button")[0], msg.sent_by_me
? $row.find(".message-actions-menu-button")[0]
: $row.find(".emoji-message-control-button-container")[0],
msg.id, msg.id,
{placement: "bottom"},
); );
return true; return true;
} }

8
web/src/popover_menus.js
View File

@ -895,11 +895,9 @@ export function initialize() {
// emoji_picker which we don't want to hide after actions popover is hidden. // emoji_picker which we don't want to hide after actions popover is hidden.
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
emoji_picker.toggle_emoji_popover( emoji_picker.toggle_emoji_popover(instance.reference.parentElement, message_id, {
instance.reference.parentElement, placement: "bottom",
message_id, });
true,
);
instance.hide(); instance.hide();
}); });

15
web/styles/popovers.css
View File

@ -738,7 +738,8 @@ ul {
left: -1px; left: -1px;
} }
.giphy-popover { .giphy-popover,
.emoji-popover-root {
.tippy-content { .tippy-content {
/* We remove the default padding from this container /* We remove the default padding from this container
as it is not necessary for the Giphy popover. */ as it is not necessary for the Giphy popover. */
@ -750,6 +751,18 @@ ul {
} }
} }
.emoji-popover-root {
/* The emoji popover has a different background color for the
header and footer, so we customize the arrow to match this color. */
.tippy-box[data-placement="top"] .tippy-arrow::before {
border-top-color: hsl(0deg 0% 93%);
}
.tippy-box[data-placement="bottom"] .tippy-arrow::before {
border-bottom-color: hsl(0deg 0% 93%);
}
}
#giphy_grid_in_popover { #giphy_grid_in_popover {
/* 300px of GIPHY grid + 5px is the extra gutter space /* 300px of GIPHY grid + 5px is the extra gutter space
* between gif columns. */ * between gif columns. */

8
web/styles/reactions.css
View File

@ -81,10 +81,13 @@
background-color: hsl(0deg 0% 98%); background-color: hsl(0deg 0% 98%);
} }
.reaction_button { .reaction_button,
.emoji-message-control-button-container {
display: flex; display: flex;
align-items: center; align-items: center;
}
.reaction_button {
& i { & i {
font-size: 1em; font-size: 1em;
} }
@ -170,7 +173,7 @@
background-color: hsl(0deg 0% 93%); background-color: hsl(0deg 0% 93%);
border-radius: 5px 5px 0 0; border-radius: 3px 3px 0 0;
.fa-search { .fa-search {
position: absolute; position: absolute;
@ -277,6 +280,7 @@
background-color: hsl(0deg 0% 93%); background-color: hsl(0deg 0% 93%);
min-height: 44px; min-height: 44px;
width: 250px; width: 250px;
border-radius: 0 0 3px 3px;
.emoji-preview { .emoji-preview {
position: absolute; position: absolute;

2
web/styles/zulip.css
View File

@ -1203,7 +1203,7 @@ td.pointer {
text-align: center; text-align: center;
color: var(--color-message-action-visible); color: var(--color-message-action-visible);
> i { & i {
vertical-align: middle; vertical-align: middle;
/* TODO: Math for these values, possibly with variables. /* TODO: Math for these values, possibly with variables.
In short, the icon body is 16px square; the current In short, the icon body is 16px square; the current

5
web/templates/compose_control_buttons.hbs
View File

@ -6,8 +6,9 @@
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a> <a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a> <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a> <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
<a role="button" class="compose_control_button fa fa-phone audio_link" aria-label="{{t 'Add audio call' }}" tabindex=0 data-tippy-content="{{t 'Add audio call' }}"></a> <div class="compose_control_button_container" data-tippy-content="{{t 'Add emoji' }}">
<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a> <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0></a>
</div>
<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none"></a> <a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none"></a>
<div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}}" data-tippy-content="{{t 'Add GIF' }}"> <div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}}" data-tippy-content="{{t 'Add GIF' }}">
<a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a> <a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>

7
web/templates/emoji_popover.hbs
View File

@ -1,7 +1,4 @@
<div class="popover emoji-info-popover"> <div class="emoji-info-popover">
<div class="arrow"></div> <div class="popover-content"></div>
<div class="popover-content">
<div></div>
</div>
<div class="emoji-showcase-container"></div> <div class="emoji-showcase-container"></div>
</div> </div>

4
web/templates/message_controls.hbs
View File

@ -5,7 +5,9 @@
{{#unless msg/sent_by_me}} {{#unless msg/sent_by_me}}
<div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template"> <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
<i class="zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i> <div class="emoji-message-control-button-container">
<i class="zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
</div>
</div> </div>
{{/unless}} {{/unless}}

6
web/templates/message_reactions.hbs
View File

@ -2,6 +2,8 @@
{{> message_reaction}} {{> message_reaction}}
{{/each}} {{/each}}
<div class="reaction_button" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)"> <div class="reaction_button" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)">
<i class="zulip-icon zulip-icon-smile" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i> <div class="emoji-message-control-button-container">
<div class="message_reaction_count">+</div> <i class="zulip-icon zulip-icon-smile" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
<div class="message_reaction_count">+</div>
</div>
</div> </div>

2
web/tests/hotkey.test.js
View File

@ -101,7 +101,7 @@ message_lists.current = {
}, },
selected_row() { selected_row() {
const $row = $.create("selected-row-stub"); const $row = $.create("selected-row-stub");
$row.set_find_results(".actions_hover", []); $row.set_find_results(".message-actions-menu-button", []);
return $row; return $row;
}, },
selected_message() { selected_message() {