From dd2c9d96e7f164e5295cf9ca7b68695dd7bc46c1 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 24 Jul 2020 16:11:45 +0300
Subject: [PATCH] - client: show tooltips on tap for mobile devices

---
 client/src/components/Dashboard/Counters.js |  2 +-
 client/src/components/Logs/index.js         |  6 +-
 client/src/components/ui/Tooltip.css        |  8 ++-
 client/src/components/ui/Tooltip.js         | 62 ++++++++++++++-------
 client/src/helpers/constants.js             |  4 +-
 5 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Dashboard/Counters.js b/client/src/components/Dashboard/Counters.js
index 42b22a9c..ecf35fbd 100644
--- a/client/src/components/Dashboard/Counters.js
+++ b/client/src/components/Dashboard/Counters.js
@@ -21,7 +21,7 @@ const Row = ({
             <Trans components={translationComponents}>{label}</Trans>
             <Tooltip content={tooltipTitle} placement="top"
                      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" />
                 </svg>
             </Tooltip>
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index ff3c96e3..8777a0a3 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -10,7 +10,7 @@ import {
     BLOCK_ACTIONS,
     TABLE_DEFAULT_PAGE_SIZE,
     TABLE_FIRST_PAGE,
-    smallScreenSize,
+    SMALL_SCREEN_SIZE,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
@@ -76,7 +76,7 @@ const Logs = (props) => {
     const search = filter?.search || search_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 [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
     const [isModalOpened, setModalOpened] = useState(false);
@@ -114,7 +114,7 @@ const Logs = (props) => {
         },
     } = props;
 
-    const mediaQuery = window.matchMedia(`(max-width: ${smallScreenSize}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
diff --git a/client/src/components/ui/Tooltip.css b/client/src/components/ui/Tooltip.css
index ea7ff281..6712f9d1 100644
--- a/client/src/components/ui/Tooltip.css
+++ b/client/src/components/ui/Tooltip.css
@@ -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 {
-    max-width: 13.75rem;
+    max-width: 14rem;
 }
 
 .tooltip-custom--wide {
diff --git a/client/src/components/ui/Tooltip.js b/client/src/components/ui/Tooltip.js
index 84ce7209..69227d20 100644
--- a/client/src/components/ui/Tooltip.js
+++ b/client/src/components/ui/Tooltip.js
@@ -2,7 +2,12 @@ import React from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
 import propTypes from 'prop-types';
 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 './Tooltip.css';
 
@@ -16,27 +21,42 @@ const Tooltip = ({
     delayHide = HIDE_TOOLTIP_DELAY,
 }) => {
     const { t } = useTranslation();
+    let triggerValue = trigger;
+    let delayValue = delayHide;
 
-    return <TooltipTrigger
-        placement={placement}
-        trigger={trigger}
-        delayHide={delayHide}
-        tooltip={({
-            tooltipRef,
-            getTooltipProps,
-        }) => <div {...getTooltipProps({
-            ref: tooltipRef,
-            className,
-        })}>
-            {typeof content === 'string' ? t(content) : content}
-        </div>
-        }>{({ getTriggerProps, triggerRef }) => <span
-        {...getTriggerProps({
-            ref: triggerRef,
-            className: triggerClass,
-        })}
-    >{children}</span>}
-    </TooltipTrigger>;
+    if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) {
+        triggerValue = 'click';
+        delayValue = HIDE_TOOLTIP_CLICK_DELAY;
+    }
+
+    return (
+        <TooltipTrigger
+            placement={placement}
+            trigger={triggerValue}
+            delayHide={delayValue}
+            tooltip={({ tooltipRef, getTooltipProps }) => (
+                <div
+                    {...getTooltipProps({
+                        ref: tooltipRef,
+                        className,
+                    })}
+                >
+                    {typeof content === 'string' ? t(content) : content}
+                </div>
+            )}
+        >
+            {({ getTriggerProps, triggerRef }) => (
+                <span
+                    {...getTriggerProps({
+                        ref: triggerRef,
+                        className: triggerClass,
+                    })}
+                >
+                    {children}
+                </span>
+            )}
+        </TooltipTrigger>
+    );
 };
 
 Tooltip.propTypes = {
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 86b2bacb..bc0f6050 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -62,6 +62,7 @@ export const CHECK_TIMEOUT = 1000;
 export const SUCCESS_TOAST_TIMEOUT = 5000;
 export const FAILURE_TOAST_TIMEOUT = 30000;
 export const HIDE_TOOLTIP_DELAY = 300;
+export const HIDE_TOOLTIP_CLICK_DELAY = 100;
 export const MODAL_OPEN_TIMEOUT = 150;
 
 export const UNSAFE_PORTS = [
@@ -472,6 +473,7 @@ export const FORM_NAME = {
     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;