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

compose: Show tooltip instantly for a .disabled-on-hover button.

Browse Source 
We have some delay for tooltips for all compose buttons, but we now show
tooltips instantly for buttons that are disabled on hover, to emphasize
that the button is disabled, and why.
This commit is contained in:
N-Shar-ma
2023-11-25 12:33:08 +05:30
committed by Tim Abbott
parent ab3650343f
commit 15b3ad7466
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/compose_tooltips.js
View File

@@ -10,7 +10,7 @@ import * as compose_validate from "./compose_validate";
import {$t} from "./i18n"; import {$t} from "./i18n";
import * as narrow_state from "./narrow_state"; import * as narrow_state from "./narrow_state";
import * as popover_menus from "./popover_menus"; import * as popover_menus from "./popover_menus";
import {EXTRA_LONG_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs"; import {EXTRA_LONG_HOVER_DELAY, INSTANT_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs";
import {parse_html} from "./ui_util"; import {parse_html} from "./ui_util";
import {user_settings} from "./user_settings"; import {user_settings} from "./user_settings";
@@ -56,6 +56,16 @@ export function initialize() {
// This ensures that the upload files tooltip // This ensures that the upload files tooltip
// doesn't hide behind the left sidebar. // doesn't hide behind the left sidebar.
appendTo: () => document.body, appendTo: () => document.body,
// If the button is `.disabled-on-hover`, then we want to show the
// tooltip instantly, to make it clear to the user that the button
// is disabled, and why.
onTrigger(instance, event) {
if (event.currentTarget.classList.contains("disabled-on-hover")) {
instance.setProps({delay: INSTANT_HOVER_DELAY});
} else {
instance.setProps({delay: LONG_HOVER_DELAY});
}
},
}); });
delegate("body", { delegate("body", {

2
web/src/tippyjs.ts
View File

@@ -28,7 +28,7 @@ function get_tooltip_content(reference: Element): string | Element | DocumentFra
// transition, while the "long" version is intended for elements where // transition, while the "long" version is intended for elements where
// we want to avoid distracting the user with the tooltip // we want to avoid distracting the user with the tooltip
// unnecessarily. // unnecessarily.
const INSTANT_HOVER_DELAY: [number, number] = [100, 20]; export const INSTANT_HOVER_DELAY: [number, number] = [100, 20];
// INTERACTIVE_HOVER_DELAY is for elements like the emoji reactions, where // INTERACTIVE_HOVER_DELAY is for elements like the emoji reactions, where
// the tooltip includes useful information (who reacted?), but that // the tooltip includes useful information (who reacted?), but that
// needs a short delay for users who are just tapping a reaction // needs a short delay for users who are just tapping a reaction