a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace tooltip component

This commit is contained in:
ArtemBaskal 2020-06-18 17:17:46 +03:00
parent 7e7103dc08
commit 19c013378d
10 changed files with 106 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
client/package-lock.json generated vendored
View File

@ -4498,6 +4498,15 @@
"sha.js": "^2.4.8"
}
},
"create-react-context": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
"requires": {
"gud": "^1.0.0",
"warning": "^4.0.3"
}
},
"cross-env": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@ -4800,7 +4809,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"dev": true,
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
@ -4836,7 +4844,6 @@
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
"dev": true,
"requires": {
"object-keys": "^1.0.12"
}
@ -5264,7 +5271,6 @@
"version": "1.17.5",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
"integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
"dev": true,
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@ -5283,7 +5289,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
"dev": true,
"requires": {
"is-callable": "^1.1.4",
"is-date-object": "^1.0.1",
@ -6706,8 +6711,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"functional-red-black-tree": {
"version": "1.0.1",
@ -6989,6 +6993,11 @@
"dev": true,
"optional": true
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -7021,7 +7030,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@ -7034,8 +7042,7 @@
"has-symbols": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
"dev": true
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
},
"has-value": {
"version": "1.0.0",
@ -7759,8 +7766,7 @@
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
"dev": true
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
},
"is-arrayish": {
"version": "0.2.1",
@ -7785,8 +7791,7 @@
"is-callable": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
"integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
"dev": true
"integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
},
"is-ci": {
"version": "2.0.0",
@ -7820,8 +7825,7 @@
"is-date-object": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
"dev": true
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
},
"is-decimal": {
"version": "1.0.4",
@ -7974,7 +7978,6 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
"integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
"dev": true,
"requires": {
"has": "^1.0.3"
}
@ -8000,7 +8003,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
"dev": true,
"requires": {
"has-symbols": "^1.0.1"
}
@ -11117,14 +11119,12 @@
"object-inspect": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
"integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==",
"dev": true
"integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
},
"object-is": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
"integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5"
@ -11133,8 +11133,7 @@
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
},
"object-visit": {
"version": "1.0.1",
@ -11149,7 +11148,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
"dev": true,
"requires": {
"define-properties": "^1.1.2",
"function-bind": "^1.1.1",
@ -11630,6 +11628,11 @@
"find-up": "^2.1.0"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.26",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@ -12300,6 +12303,29 @@
"raf": "^3.1.0"
}
},
"react-popper": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
"integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
"requires": {
"@babel/runtime": "^7.1.2",
"create-react-context": "^0.3.0",
"deep-equal": "^1.1.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"warning": "^4.0.2"
}
},
"react-popper-tooltip": {
"version": "2.11.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz",
"integrity": "sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==",
"requires": {
"@babel/runtime": "^7.9.2",
"react-popper": "^1.3.7"
}
},
"react-redux": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
@ -12427,22 +12453,6 @@
"react-is": "^16.8.1"
}
},
"react-tooltip": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.6.tgz",
"integrity": "sha512-KX/zCsPFCI8RuulzBX86U+Ur7FvgGNRBdb7dUu0ndo8Urinn48nANq9wfq4ABlehweQjPzLl7XdNAtLKza+I3w==",
"requires": {
"prop-types": "^15.7.2",
"uuid": "^7.0.3"
},
"dependencies": {
"uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
}
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -12632,7 +12642,6 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
"integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0-next.1"
@ -13892,7 +13901,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
"integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5"
@ -13902,7 +13910,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz",
"integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5",
@ -13913,7 +13920,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz",
"integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5",
@ -13924,7 +13930,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
"integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5"
@ -14924,6 +14929,11 @@
"mime-types": "~2.1.24"
}
},
"typed-styles": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
},
"typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

2
client/package.json vendored
View File

@ -27,13 +27,13 @@
"react-dom": "^16.13.1",
"react-i18next": "^11.4.0",
"react-modal": "^3.11.2",
"react-popper-tooltip": "^2.11.1",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^4.6.0",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^1.2.2",
"react-select": "^3.1.0",
"react-table": "^6.11.4",
"react-tooltip": "^4.2.6",
"react-transition-group": "^4.4.1",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",

24
client/src/components/Logs/Tooltip/ReactTooltip.css → client/src/components/Logs/Cells/Tooltip.css
View File

@ -1,24 +1,20 @@
.custom-tooltip {
.tooltip__container {
padding: 1rem 1.5rem 1.25rem 1.5rem;
font-size: 16px !important;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px !important;
pointer-events: auto !important;
/*may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
position: absolute !important;
top: 4rem !important;
background-color: var(--white);
z-index: 102;
}
.white-space--nowrap {
white-space: nowrap !important;
}
.white-space--normal {
.overflow-break {
white-space: normal !important;
}
.word-break--break-all {
word-break: break-all !important;
overflow-wrap: break-word;
}
.grid {
@ -70,7 +66,7 @@
font-weight: bold;
}
.custom-tooltip {
.tooltip__container {
overflow-y: scroll;
}
}
@ -87,14 +83,6 @@
grid-auto-flow: column;
}
.custom-tooltip.show {
opacity: 1 !important;
}
.custom-tooltip:hover {
opacity: 1 !important;
}
.grid-content > * {
justify-content: space-between !important;
width: 100% !important;

3
client/src/components/Logs/Cells/getClientCell.js
View File

@ -75,12 +75,11 @@ const getClientCell = ({
className: hintClass,
columnClass: 'grid grid--limited',
tooltipClass: 'px-5 pb-5 pt-4 mw-75',
dataTip: true,
xlinkHref: 'question',
contentItemClass: 'text-truncate key-colon',
title: 'client_details',
content: processedData,
place: 'bottom',
placement: 'bottom',
})}
<div
className={nameClass}>

7
client/src/components/Logs/Cells/getDomainCell.js
View File

@ -37,11 +37,11 @@ const getDomainCell = (props) => {
const dnssecHint = getHintElement({
className: lockIconClass,
tooltipClass: 'py-4 px-5 pb-45',
dataTip: answer_dnssec,
canShowTooltip: answer_dnssec,
xlinkHref: 'lock',
columnClass: 'w-100',
content: 'validated_with_dnssec',
place: 'bottom',
placement: 'bottom',
});
const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
@ -64,7 +64,7 @@ const getDomainCell = (props) => {
const renderGrid = (content, idx) => {
const preparedContent = typeof content === 'string' ? t(content) : content;
const className = classNames('text-truncate key-colon o-hidden', {
'word-break--break-all white-space--normal': preparedContent.length > 100,
'overflow-break': preparedContent.length > 100,
});
return <div key={idx} className={className}>{preparedContent}</div>;
};
@ -81,7 +81,6 @@ const getDomainCell = (props) => {
const trackerHint = getHintElement({
className: privacyIconClass,
tooltipClass: 'pt-4 pb-5 px-5 mw-75',
dataTip: true,
xlinkHref: 'privacy',
contentItemClass: 'key-colon',
renderContent,

84
client/src/components/Logs/Cells/getHintElement.js
View File

@ -1,58 +1,49 @@
import React, { useState } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import CustomTooltip from '../Tooltip/CustomTooltip';
import TooltipTrigger from 'react-popper-tooltip';
import { Trans } from 'react-i18next';
import classNames from 'classnames';
import './Tooltip.css';
import 'react-popper-tooltip/dist/styles.css';
const getHintElement = ({
className,
contentItemClass,
columnClass,
dataTip,
canShowTooltip = true,
xlinkHref,
content,
title,
place,
placement,
tooltipClass,
trigger,
overridePosition,
scrollHide,
renderContent,
}) => {
const id = 'id';
const [isTooltipOpen, setTooltipOpen] = useState(false);
const closeTooltip = () => setTooltipOpen(false);
const openTooltip = () => {
window.document.addEventListener('click', closeTooltip);
setTooltipOpen(true);
};
// TODO: close previous tooltip on new tooltip open
return <div onMouseEnter={openTooltip}>
<div data-tip={dataTip}
data-for={dataTip ? id : undefined}
data-event={trigger}
content,
renderContent = React.Children.map(
content,
(item, idx) => <div key={idx} className={contentItemClass}>
<Trans>{item || '—'}</Trans>
</div>,
),
}) => <TooltipTrigger placement={placement} trigger="click" tooltip={
({
tooltipRef,
getTooltipProps,
}) => <div {...getTooltipProps({
ref: tooltipRef,
className: classNames('tooltip__container', tooltipClass, { 'd-none': !canShowTooltip }),
})}
>
{title && <div className="pb-4 h-25 grid-content font-weight-bold">
<Trans>{title}</Trans>
</div>}
<div className={classNames(columnClass)}>{renderContent}</div>
</div>
}>{({
getTriggerProps, triggerRef,
}) => <span {...getTriggerProps({ ref: triggerRef })}>
{xlinkHref && <svg className={className}>
<use xlinkHref={`#${xlinkHref}`} />
</svg>}
</div>
{isTooltipOpen && dataTip
&& <CustomTooltip
className={tooltipClass}
id={id}
columnClass={columnClass}
contentItemClass={contentItemClass}
title={title}
place={place}
content={content}
trigger={trigger}
overridePosition={overridePosition}
scrollHide={scrollHide}
renderContent={renderContent}
/>}
</div>;
};
</span>}
</TooltipTrigger>;
getHintElement.propTypes = {
className: PropTypes.string,
@ -60,15 +51,10 @@ getHintElement.propTypes = {
columnClass: PropTypes.string,
tooltipClass: PropTypes.string,
title: PropTypes.string,
place: PropTypes.string,
dataTip: PropTypes.string,
placement: PropTypes.string,
canShowTooltip: PropTypes.string,
xlinkHref: PropTypes.string,
overridePosition: PropTypes.func,
scrollHide: PropTypes.bool,
trigger: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,

5
client/src/components/Logs/Cells/getResponseCell.js
View File

@ -48,7 +48,7 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
return <div>{responseArr.map((response) => {
const className = classNames('white-space--nowrap', {
'white-space--normal': response.length > 100,
'overflow-break': response.length > 100,
});
return <div key={response} className={className}>{`${response}\n`}</div>;
@ -109,11 +109,10 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
columnClass: 'grid grid--limited',
tooltipClass: 'px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details',
contentItemClass: 'text-truncate key-colon o-hidden',
dataTip: true,
xlinkHref: 'question',
title: 'response_details',
content: fields,
place: 'bottom',
placement: 'bottom',
})}
<div className="text-truncate">
<div className="text-truncate" title={statusLabel}>{statusLabel}</div>

7
client/src/components/Logs/Logs.css
View File

@ -5,6 +5,7 @@
}
.logs__row {
position: relative;
display: flex;
min-height: 26px;
overflow: hidden;
@ -104,7 +105,7 @@
.logs__action {
position: absolute;
top: 1rem !important;
top: 0;
right: 1rem;
}
@ -112,10 +113,10 @@
top: 5px;
}
/*.logs__table .rt-td,
.logs__table .rt-td,
.clients__table .rt-td {
position: relative;
}*/
}
.logs__table .rt-thead, .logs__table .rt-tbody {
min-width: 100% !important;

44
client/src/components/Logs/Tooltip/CustomTooltip.js
View File

@ -1,44 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Trans } from 'react-i18next';
import classNames from 'classnames';
import Tooltip from './index';
const CustomTooltip = ({
id, title, className, contentItemClass, place = 'right', columnClass = '', content, trigger, overridePosition, scrollHide,
renderContent = React.Children.map(
content,
(item, idx) => <div key={idx} className={contentItemClass}>
<Trans>{item || '—'}</Trans>
</div>,
),
}) => <Tooltip id={id} className={className} place={place} trigger={trigger}
overridePosition={overridePosition}
scrollHide={scrollHide}
>
{title
&& <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
<div className={classNames(columnClass)}>{renderContent}</div>
</Tooltip>;
CustomTooltip.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string,
place: PropTypes.string,
className: PropTypes.string,
columnClass: PropTypes.string,
contentItemClass: PropTypes.string,
overridePosition: PropTypes.func,
scrollHide: PropTypes.bool,
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
]),
trigger: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
renderContent: PropTypes.arrayOf(PropTypes.element),
};
export default CustomTooltip;

46
client/src/components/Logs/Tooltip/index.js
View File

@ -1,46 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import './ReactTooltip.css';
const Tooltip = ({
id, children, className = '', place = 'right', overridePosition, scrollHide = false,
}) => {
const tooltipClassName = classNames('custom-tooltip', className);
return (
<ReactTooltip
id={id}
aria-haspopup="true"
effect="solid"
place={place}
className={tooltipClassName}
backgroundColor="#fff"
arrowColor="transparent"
textColor="#4d4d4d"
delayHide={30000}
scrollHide={scrollHide}
overridePosition={overridePosition}
globalEventOff="click touchend"
clickable
>
{children}
</ReactTooltip>
);
};
Tooltip.propTypes = {
id: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
className: PropTypes.string,
place: PropTypes.string,
overridePosition: PropTypes.func,
scrollHide: PropTypes.bool,
trigger: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
};
export default Tooltip;