Merge: - client: show tooltips on tap for mobile devices
Closes #1922 * commit 'dd2c9d96e7f164e5295cf9ca7b68695dd7bc46c1': - client: show tooltips on tap for mobile devices
This commit is contained in:
commit
611ed94884
|
@ -21,7 +21,7 @@ const Row = ({
|
||||||
<Trans components={translationComponents}>{label}</Trans>
|
<Trans components={translationComponents}>{label}</Trans>
|
||||||
<Tooltip content={tooltipTitle} placement="top"
|
<Tooltip content={tooltipTitle} placement="top"
|
||||||
className="tooltip-container tooltip-custom--narrow text-center">
|
className="tooltip-container tooltip-custom--narrow text-center">
|
||||||
<svg className="icons icon--20 icon--lightgray ml-1">
|
<svg className="icons icon--20 icon--lightgray ml-2">
|
||||||
<use xlinkHref="#question" />
|
<use xlinkHref="#question" />
|
||||||
</svg>
|
</svg>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
|
@ -10,7 +10,7 @@ import {
|
||||||
BLOCK_ACTIONS,
|
BLOCK_ACTIONS,
|
||||||
TABLE_DEFAULT_PAGE_SIZE,
|
TABLE_DEFAULT_PAGE_SIZE,
|
||||||
TABLE_FIRST_PAGE,
|
TABLE_FIRST_PAGE,
|
||||||
smallScreenSize,
|
SMALL_SCREEN_SIZE,
|
||||||
} from '../../helpers/constants';
|
} from '../../helpers/constants';
|
||||||
import Loading from '../ui/Loading';
|
import Loading from '../ui/Loading';
|
||||||
import Filters from './Filters';
|
import Filters from './Filters';
|
||||||
|
@ -76,7 +76,7 @@ const Logs = (props) => {
|
||||||
const search = filter?.search || search_url_param;
|
const search = filter?.search || search_url_param;
|
||||||
const response_status = filter?.response_status || response_status_url_param;
|
const response_status = filter?.response_status || response_status_url_param;
|
||||||
|
|
||||||
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < smallScreenSize);
|
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_SIZE);
|
||||||
const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
|
const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
|
||||||
const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
|
const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
|
||||||
const [isModalOpened, setModalOpened] = useState(false);
|
const [isModalOpened, setModalOpened] = useState(false);
|
||||||
|
@ -114,7 +114,7 @@ const Logs = (props) => {
|
||||||
},
|
},
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const mediaQuery = window.matchMedia(`(max-width: ${smallScreenSize}px)`);
|
const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
|
||||||
const mediaQueryHandler = (e) => {
|
const mediaQueryHandler = (e) => {
|
||||||
setIsSmallScreen(e.matches);
|
setIsSmallScreen(e.matches);
|
||||||
if (e.matches) {
|
if (e.matches) {
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
|
.tooltip-container {
|
||||||
|
border: 0;
|
||||||
|
padding: 0.7rem;
|
||||||
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.tooltip-custom--narrow {
|
.tooltip-custom--narrow {
|
||||||
max-width: 13.75rem;
|
max-width: 14rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-custom--wide {
|
.tooltip-custom--wide {
|
||||||
|
|
|
@ -2,7 +2,12 @@ import React from 'react';
|
||||||
import TooltipTrigger from 'react-popper-tooltip';
|
import TooltipTrigger from 'react-popper-tooltip';
|
||||||
import propTypes from 'prop-types';
|
import propTypes from 'prop-types';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { HIDE_TOOLTIP_DELAY } from '../../helpers/constants';
|
|
||||||
|
import {
|
||||||
|
HIDE_TOOLTIP_DELAY,
|
||||||
|
HIDE_TOOLTIP_CLICK_DELAY,
|
||||||
|
MEDIUM_SCREEN_SIZE,
|
||||||
|
} from '../../helpers/constants';
|
||||||
import 'react-popper-tooltip/dist/styles.css';
|
import 'react-popper-tooltip/dist/styles.css';
|
||||||
import './Tooltip.css';
|
import './Tooltip.css';
|
||||||
|
|
||||||
|
@ -16,27 +21,42 @@ const Tooltip = ({
|
||||||
delayHide = HIDE_TOOLTIP_DELAY,
|
delayHide = HIDE_TOOLTIP_DELAY,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
let triggerValue = trigger;
|
||||||
|
let delayValue = delayHide;
|
||||||
|
|
||||||
return <TooltipTrigger
|
if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) {
|
||||||
placement={placement}
|
triggerValue = 'click';
|
||||||
trigger={trigger}
|
delayValue = HIDE_TOOLTIP_CLICK_DELAY;
|
||||||
delayHide={delayHide}
|
}
|
||||||
tooltip={({
|
|
||||||
tooltipRef,
|
return (
|
||||||
getTooltipProps,
|
<TooltipTrigger
|
||||||
}) => <div {...getTooltipProps({
|
placement={placement}
|
||||||
ref: tooltipRef,
|
trigger={triggerValue}
|
||||||
className,
|
delayHide={delayValue}
|
||||||
})}>
|
tooltip={({ tooltipRef, getTooltipProps }) => (
|
||||||
{typeof content === 'string' ? t(content) : content}
|
<div
|
||||||
</div>
|
{...getTooltipProps({
|
||||||
}>{({ getTriggerProps, triggerRef }) => <span
|
ref: tooltipRef,
|
||||||
{...getTriggerProps({
|
className,
|
||||||
ref: triggerRef,
|
})}
|
||||||
className: triggerClass,
|
>
|
||||||
})}
|
{typeof content === 'string' ? t(content) : content}
|
||||||
>{children}</span>}
|
</div>
|
||||||
</TooltipTrigger>;
|
)}
|
||||||
|
>
|
||||||
|
{({ getTriggerProps, triggerRef }) => (
|
||||||
|
<span
|
||||||
|
{...getTriggerProps({
|
||||||
|
ref: triggerRef,
|
||||||
|
className: triggerClass,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</TooltipTrigger>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Tooltip.propTypes = {
|
Tooltip.propTypes = {
|
||||||
|
|
|
@ -62,6 +62,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 MODAL_OPEN_TIMEOUT = 150;
|
export const MODAL_OPEN_TIMEOUT = 150;
|
||||||
|
|
||||||
export const UNSAFE_PORTS = [
|
export const UNSAFE_PORTS = [
|
||||||
|
@ -472,6 +473,7 @@ export const FORM_NAME = {
|
||||||
CACHE: 'cache',
|
CACHE: 'cache',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const smallScreenSize = 767;
|
export const SMALL_SCREEN_SIZE = 767;
|
||||||
|
export const MEDIUM_SCREEN_SIZE = 1023;
|
||||||
|
|
||||||
export const SECONDS_IN_HOUR = 60 * 60;
|
export const SECONDS_IN_HOUR = 60 * 60;
|
||||||
|
|
Loading…
Reference in New Issue