paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

popovers: Keep font size of popover constant once it is opened.

Browse Source 
When changing font size using controls in personal menu popover
and gear menu popover for spectators, font size of popover is
not change so that buttons do not shift.

Also, arrow shown with the popover is removed once font-size
is changed, as popover will be detached from the element which
was clicked to open it.
This commit is contained in:
Sahil Batra
2025-03-13 09:01:53 +05:30
committed by Tim Abbott
parent b31024be47
commit 7d5b655538
3 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/gear_menu.ts
View File

@@ -15,6 +15,7 @@ import * as popovers from "./popovers.ts";
import * as settings_preferences from "./settings_preferences.ts";
import * as theme from "./theme.ts";
import {parse_html} from "./ui_util.ts";
import {user_settings} from "./user_settings.ts";
/*
For various historical reasons there isn't one
@@ -194,17 +195,27 @@ export function initialize(): void {
);
information_density.update_information_density_settings($(this), changed_property);
information_density.enable_or_disable_control_buttons($popper);
if (changed_property === "web_font_size_px") {
// We do not want to display the arrow once font size is
// changed because popover will be detached from the gear
// icon as we do not change the font size in popover.
$("#gear-menu-dropdown").closest(".tippy-box").find(".tippy-arrow").hide();
}
e.preventDefault();
});
const resizeObserver = new ResizeObserver(() => {
requestAnimationFrame(() => {
void instance.popperInstance?.update();
});
});
resizeObserver.observe(document.querySelector("#gear-menu-dropdown")!);
information_density.enable_or_disable_control_buttons($popper);
// We do not want font size of the popover to change when changing
// font size using the buttons in popover, so that the buttons do
// not shift.
const font_size =
popover_menus.POPOVER_FONT_SIZE_IN_EM * user_settings.web_font_size_px;
$("#gear-menu-dropdown")
.closest(".tippy-box")
.css("font-size", font_size + "px");
},
onShow: render,
onHidden(instance) {

24
web/src/personal_menu_popover.ts
View File

@@ -119,6 +119,14 @@ export function initialize(): void {
const data: Record<string, number> = {};
data[changed_property] = new_setting_value;
information_density.enable_or_disable_control_buttons($popper);
if (changed_property === "web_font_size_px") {
// We do not want to display the arrow once font size is changed
// because popover will be detached from the user avatar as we
// do not change the font size in popover.
$("#personal-menu-dropdown").closest(".tippy-box").find(".tippy-arrow").hide();
}
void channel.patch({
url: "/json/settings",
data,
@@ -140,15 +148,17 @@ export function initialize(): void {
e.preventDefault();
});
const resizeObserver = new ResizeObserver(() => {
requestAnimationFrame(() => {
void instance.popperInstance?.update();
});
});
resizeObserver.observe(document.querySelector("#personal-menu-dropdown")!);
information_density.enable_or_disable_control_buttons($popper);
void instance.popperInstance?.update();
// We do not want font size of the popover to change when changing
// font size using the buttons in popover, so that the buttons do
// not shift.
const font_size =
popover_menus.POPOVER_FONT_SIZE_IN_EM * user_settings.web_font_size_px;
$("#personal-menu-dropdown")
.closest(".tippy-box")
.css("font-size", font_size + "px");
},
onShow(instance) {
const args = popover_menus_data.get_personal_menu_content_context();

4
web/src/popover_menus.ts
View File

@@ -56,6 +56,10 @@ export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
color_picker_popover: null,
};
// Font size in em for popover derived from popover font size being
// 15px at base font size of 14px.
export const POPOVER_FONT_SIZE_IN_EM = 1.0714;
/* Keyboard UI functions */
export function popover_items_handle_keyboard(key: string, $items?: JQuery): void {
if (!$items) {