mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge: - client: check touch events for tooltips 

Closes #1922

* commit 'ce21514246dfc89f1178d9346769317f1fff4d05':
  - client: check touch events for tooltips
  - client: tooltip show delay
This commit is contained in:
Ildar Kamalov 2020-08-03 15:41:46 +03:00
parent 335d62b08e ce21514246
commit ed76a3cb8b
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/ui/Tooltip.js
View File

@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
import { import {
HIDE_TOOLTIP_DELAY, HIDE_TOOLTIP_DELAY,
HIDE_TOOLTIP_CLICK_DELAY,
MEDIUM_SCREEN_SIZE, MEDIUM_SCREEN_SIZE,
SHOW_TOOLTIP_DELAY,
} from '../../helpers/constants'; } from '../../helpers/constants';
import 'react-popper-tooltip/dist/styles.css'; import 'react-popper-tooltip/dist/styles.css';
import './Tooltip.css'; import './Tooltip.css';
@ -18,22 +18,28 @@ const Tooltip = ({
className = 'tooltip-container', className = 'tooltip-container',
placement = 'bottom', placement = 'bottom',
trigger = 'hover', trigger = 'hover',
delayShow = SHOW_TOOLTIP_DELAY,
delayHide = HIDE_TOOLTIP_DELAY, delayHide = HIDE_TOOLTIP_DELAY,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
let triggerValue = trigger; const touchEventsAvailable = 'ontouchstart' in window;
let delayValue = delayHide;
if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) { let triggerValue = trigger;
let delayHideValue = delayHide;
let delayShowValue = delayShow;
if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches || touchEventsAvailable) {
triggerValue = 'click'; triggerValue = 'click';
delayValue = HIDE_TOOLTIP_CLICK_DELAY; delayHideValue = 0;
delayShowValue = 0;
} }
return ( return (
<TooltipTrigger <TooltipTrigger
placement={placement} placement={placement}
trigger={triggerValue} trigger={triggerValue}
delayHide={delayValue} delayHide={delayHideValue}
delayShow={delayShowValue}
tooltip={({ tooltipRef, getTooltipProps }) => ( tooltip={({ tooltipRef, getTooltipProps }) => (
<div <div
{...getTooltipProps({ {...getTooltipProps({
@ -71,6 +77,7 @@ Tooltip.propTypes = {
placement: propTypes.string, placement: propTypes.string,
trigger: propTypes.string, trigger: propTypes.string,
delayHide: propTypes.string, delayHide: propTypes.string,
delayShow: propTypes.string,
className: propTypes.string, className: propTypes.string,
triggerClass: propTypes.string, triggerClass: propTypes.string,
}; };

2
client/src/helpers/constants.js
View File

@ -72,7 +72,7 @@ export const CHECK_TIMEOUT = 1000;
export const SUCCESS_TOAST_TIMEOUT = 5000; export const SUCCESS_TOAST_TIMEOUT = 5000;
export const FAILURE_TOAST_TIMEOUT = 30000; export const FAILURE_TOAST_TIMEOUT = 30000;
export const HIDE_TOOLTIP_DELAY = 300; export const HIDE_TOOLTIP_DELAY = 300;
export const HIDE_TOOLTIP_CLICK_DELAY = 100; export const SHOW_TOOLTIP_DELAY = 200;
export const MODAL_OPEN_TIMEOUT = 150; export const MODAL_OPEN_TIMEOUT = 150;
export const UNSAFE_PORTS = [ export const UNSAFE_PORTS = [