paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose_mobile_button: Use tippyjs for popover.

Browse Source 
There are several benefits of using tippyjs here:
* Removes dependency on bootstrap.
* We don't have to manually handle show/hide of popover.
* There cannot be any memory leak since we don't store
  the instance.
This commit is contained in:
Aman Agrawal
2021-06-16 10:37:51 +00:00
committed by Tim Abbott
parent f171b436f3
commit 563f8aba1e
4 changed files with 48 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/js/compose_closed_ui.js
View File

@@ -6,7 +6,6 @@ import * as message_lists from "./message_lists";
import * as message_store from "./message_store";
import * as narrow_state from "./narrow_state";
import * as people from "./people";
import * as popovers from "./popovers";
import * as recent_topics_util from "./recent_topics_util";
function update_stream_button(btn_text, title) {
@@ -113,22 +112,10 @@ export function initialize() {
// Click handlers for buttons in the compose compose box.
$("body").on("click", ".compose_stream_button", () => {
popovers.hide_mobile_message_buttons_popover();
compose_actions.start("stream", {trigger: "new topic button"});
});
$("body").on("click", ".compose_private_button", () => {
popovers.hide_mobile_message_buttons_popover();
compose_actions.start("private");
});
$("body").on("click", ".compose_mobile_stream_button", () => {
popovers.hide_mobile_message_buttons_popover();
compose_actions.start("stream", {trigger: "new topic button"});
});
$("body").on("click", ".compose_mobile_private_button", () => {
popovers.hide_mobile_message_buttons_popover();
compose_actions.start("private");
});

43
static/js/popovers.js
View File

@@ -5,8 +5,6 @@ import $ from "jquery";
import {hideAll} from "tippy.js";
import render_actions_popover_content from "../templates/actions_popover_content.hbs";
import render_mobile_message_buttons_popover from "../templates/mobile_message_buttons_popover.hbs";
import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
import render_no_arrow_popover from "../templates/no_arrow_popover.hbs";
import render_playground_links_popover_content from "../templates/playground_links_popover_content.hbs";
import render_remind_me_popover_content from "../templates/remind_me_popover_content.hbs";
@@ -60,7 +58,6 @@ import * as util from "./util";
let current_actions_popover_elem;
let current_flatpickr_instance;
let current_message_info_popover_elem;
let current_mobile_message_buttons_popover_elem;
let current_user_info_popover_elem;
let current_playground_links_popover_elem;
let userlist_placement = "right";
@@ -71,7 +68,6 @@ export function clear_for_testing() {
current_actions_popover_elem = undefined;
current_flatpickr_instance = undefined;
current_message_info_popover_elem = undefined;
current_mobile_message_buttons_popover_elem = undefined;
current_user_info_popover_elem = undefined;
current_playground_links_popover_elem = undefined;
list_of_popovers.length = 0;
@@ -344,37 +340,6 @@ function show_user_info_popover_for_message(element, user, message) {
}
}
function show_mobile_message_buttons_popover(element) {
const last_popover_elem = current_mobile_message_buttons_popover_elem;
hide_all();
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;
}
const $element = $(element);
$element.popover({
placement: "left",
template: render_mobile_message_buttons_popover(),
content: render_mobile_message_buttons_popover_content({
is_in_private_narrow: narrow_state.narrowed_to_pms(),
}),
html: true,
trigger: "manual",
});
$element.popover("show");
current_mobile_message_buttons_popover_elem = $element;
}
export function hide_mobile_message_buttons_popover() {
if (current_mobile_message_buttons_popover_elem) {
current_mobile_message_buttons_popover_elem.popover("destroy");
current_mobile_message_buttons_popover_elem = undefined;
}
}
export function hide_user_profile() {
overlays.close_modal("#user-profile-modal");
}
@@ -1145,12 +1110,6 @@ export function register_click_handlers() {
hide_user_profile();
});
$("body").on("click", ".compose_mobile_button", function (e) {
show_mobile_message_buttons_popover(this);
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".set_away_status", (e) => {
hide_all();
user_status.server_set_away();
@@ -1469,6 +1428,7 @@ export function any_active() {
// Expanded sidebars on mobile view count as popovers as well.
return (
tippyjs.is_left_sidebar_stream_setting_popover_displayed() ||
tippyjs.is_compose_mobile_button_popover_displayed() ||
actions_popped() ||
user_sidebar_popped() ||
stream_popover.stream_popped() ||
@@ -1499,7 +1459,6 @@ export function hide_all_except_sidebars(opts) {
stream_popover.hide_all_messages_popover();
stream_popover.hide_starred_messages_popover();
hide_user_sidebar_popover();
hide_mobile_message_buttons_popover();
hide_user_info_popover();
hide_playground_links_popover();

47
static/js/tippyjs.js
View File

@@ -2,7 +2,10 @@ import $ from "jquery";
import tippy, {delegate} from "tippy.js";
import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
import * as compose_actions from "./compose_actions";
import * as narrow_state from "./narrow_state";
import * as popovers from "./popovers";
import * as reactions from "./reactions";
import * as rows from "./rows";
@@ -40,11 +43,16 @@ tippy.setDefaultProps({
});
let left_sidebar_stream_setting_popover_displayed = false;
let compose_mobile_button_popover_displayed = false;
export function is_left_sidebar_stream_setting_popover_displayed() {
return left_sidebar_stream_setting_popover_displayed;
}
export function is_compose_mobile_button_popover_displayed() {
return compose_mobile_button_popover_displayed;
}
export function initialize() {
delegate("body", {
// Add elements here which are not displayed on
@@ -145,6 +153,8 @@ export function initialize() {
},
});
// ------------------ Popovers ----------------------------------------------
delegate("body", {
delay: 0,
target: "#streams_inline_cog",
@@ -169,4 +179,41 @@ export function initialize() {
left_sidebar_stream_setting_popover_displayed = false;
},
});
// compose box buttons popover shown on mobile widths.
delegate("body", {
target: ".compose_mobile_button",
placement: "top",
onShow(instance) {
popovers.hide_all_except_sidebars(instance);
instance.setContent(
render_mobile_message_buttons_popover_content({
is_in_private_narrow: narrow_state.narrowed_to_pms(),
}),
);
compose_mobile_button_popover_displayed = true;
const $popper = $(instance.popper);
$popper.one("click", instance.hide);
$popper.one("click", ".compose_mobile_stream_button", () => {
compose_actions.start("stream", {trigger: "new topic button"});
});
$popper.one("click", ".compose_mobile_private_button", () => {
compose_actions.start("private");
});
},
appendTo: () => document.body,
trigger: "click",
allowHTML: true,
interactive: true,
hideOnClick: true,
theme: "light-border",
touch: true,
onHidden(instance) {
// Destroy instance so that event handlers
// are destroyed too.
instance.destroy();
compose_mobile_button_popover_displayed = false;
},
});
}

7
static/templates/mobile_message_buttons_popover.hbs
View File

@@ -1,7 +0,0 @@
<div class="popover mobile-message-buttons-popover">
<div class="popover-inner">
<div class="popover-content">
<div></div>
</div>
</div>
</div>