mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Formatting menu: Show popup guide faster, fade in/out

Browse source
This commit is contained in:
Scott Nonnenberg 2023-08-04 09:25:52 -07:00 committed by GitHub
parent 076da53815
commit f597f15faf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
stylesheets/components/CompositionInput.scss
View file

@ -194,6 +194,9 @@
border-radius: 4px;
margin-bottom: 8px;
opacity: 0;
transition: opacity 120ms ease-out;
@include light-theme {
background-color: $color-black;
color: $color-gray-05;

61
ts/quill/formatting/menu.tsx
View file

@ -15,10 +15,10 @@ import * as log from '../../logging/log';
import * as Errors from '../../types/errors';
import type { LocalizerType } from '../../types/Util';
import { handleOutsideClick } from '../../util/handleOutsideClick';
import { SECOND } from '../../util/durations/constants';
const FADE_OUT_MS = 200;
const BUTTON_HOVER_TIMEOUT = 2 * SECOND;
const MENU_FADE_OUT_MS = 200;
const POPUP_GUIDE_FADE_MS = 120;
const BUTTON_HOVER_TIMEOUT_MS = 900;
const MENU_TEXT_BUFFER = 12; // pixels
// Note: Keyboard shortcuts are defined in the constructor below, and when using
@ -160,7 +160,7 @@ export class FormattingMenu {
this.lastRect = undefined;
this.fadingOutTimeout = undefined;
this.render();
}, FADE_OUT_MS);
}, MENU_FADE_OUT_MS);
this.render();
}
@ -452,34 +452,47 @@ function FormattingButton({
toggleForStyle: (style: QuillFormattingStyle) => unknown;
}): JSX.Element {
const buttonRef = React.useRef<HTMLButtonElement | null>(null);
const timerRef = React.useRef<NodeJS.Timeout | undefined>();
const [isHovered, setIsHovered] = React.useState<boolean>(false);
const hoverTimerRef = React.useRef<NodeJS.Timeout | undefined>();
const [isFadingOut, setIsFadingOut] = React.useState<boolean>(false);
const fadeOutTimerRef = React.useRef<NodeJS.Timeout | undefined>();
React.useEffect(() => {
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
if (hoverTimerRef.current) {
clearTimeout(hoverTimerRef.current);
hoverTimerRef.current = undefined;
}
if (fadeOutTimerRef.current) {
clearTimeout(fadeOutTimerRef.current);
fadeOutTimerRef.current = undefined;
}
};
}, []);
return (
<>
{hasLongHovered && isHovered && buttonRef.current ? (
{(isFadingOut || (hasLongHovered && isHovered)) && buttonRef.current ? (
<Popper placement="top" referenceElement={buttonRef.current}>
{({ ref, style: popperStyles }) => (
{({ ref, style: popperStyles }) => {
const opacity = !popperStyles.transform || isFadingOut ? 0 : 1;
return (
<div
className="module-composition-input__format-menu__item__popover"
ref={ref}
style={popperStyles}
style={{ ...popperStyles, opacity }}
>
{popupGuideText}
<div className="module-composition-input__format-menu__item__popover__shortcut">
{popupGuideShortcut}
</div>
</div>
)}
);
}}
</Popper>
) : null}
<button
@ -499,21 +512,29 @@ function FormattingButton({
toggleForStyle(style);
}}
onMouseEnter={() => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
if (hoverTimerRef.current) {
clearTimeout(hoverTimerRef.current);
hoverTimerRef.current = undefined;
}
timerRef.current = setTimeout(() => {
hoverTimerRef.current = setTimeout(() => {
onLongHover(true);
}, BUTTON_HOVER_TIMEOUT);
}, BUTTON_HOVER_TIMEOUT_MS);
setIsHovered(true);
}}
onMouseLeave={() => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
if (hoverTimerRef.current) {
clearTimeout(hoverTimerRef.current);
hoverTimerRef.current = undefined;
}
if (hasLongHovered && isHovered) {
fadeOutTimerRef.current = setTimeout(() => {
setIsFadingOut(false);
fadeOutTimerRef.current = undefined;
}, POPUP_GUIDE_FADE_MS);
setIsFadingOut(true);
}
setIsHovered(false);

20
ts/util/lint/exceptions.json
View file

@ -2861,18 +2861,26 @@
{
"rule": "React-useRef",
"path": "ts/quill/formatting/menu.tsx",
"line": " const buttonRef = React.useRef<HTMLButtonElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2023-04-22T00:07:56.294Z",
"reasonDetail": "Popper needs to reference the button"
"line": " const fadeOutTimerRef = React.useRef<NodeJS.Timeout | undefined>();",
"reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
"updated": "2023-08-02T19:01:24.771Z",
"reasonDetail": "We need a persistent timer to know when to remove after fade-out"
},
{
"rule": "React-useRef",
"path": "ts/quill/formatting/menu.tsx",
"line": " const timerRef = React.useRef<NodeJS.Timeout | undefined>();",
"line": " const hoverTimerRef = React.useRef<NodeJS.Timeout | undefined>();",
"reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
"updated": "2023-08-02T19:01:24.771Z",
"reasonDetail": "We need a persistent timer to track long-hovers"
},
{
"rule": "React-useRef",
"path": "ts/quill/formatting/menu.tsx",
"line": " const buttonRef = React.useRef<HTMLButtonElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2023-04-22T00:07:56.294Z",
"reasonDetail": "We need a persistent timer to track long-hovers"
"reasonDetail": "Popper needs to reference the button"
},
{
"rule": "DOM-innerHTML",