mirrors/AdGuardHome
1
0
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-25 22:45:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge: - client: show tooltips on tap for mobile devices

Browse source 
Closes #1922

* commit 'dd2c9d96e7f164e5295cf9ca7b68695dd7bc46c1':
  - client: show tooltips on tap for mobile devices
This commit is contained in:
Ildar Kamalov 2020-07-24 16:29:14 +03:00
commit 611ed94884
5 changed files with 55 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Dashboard/Counters.js
View file

@ -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>

6
client/src/components/Logs/index.js
View file

@ -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) {

8
client/src/components/ui/Tooltip.css
View file

@ -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 {

62
client/src/components/ui/Tooltip.js
View file

@ -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 = {

4
client/src/helpers/constants.js
View file

@ -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;