daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- client: Use the same tooltip style everywhere

Browse Source 
Close #1866

Squashed commit of the following:

commit 3347832caa33b01a0155b212987f02dc4824ab08
Merge: 7766502d d794b11e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 15:12:45 2020 +0300

    Merge branch 'master' into fix/1866

commit 7766502d4a904ad0a4d240481f7eabf0e25cfb62
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 12:16:59 2020 +0300

    Fix icon color classes

commit 90191bf74b5eb1855c733c226f7acb4e906c7ad9
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 11:46:22 2020 +0300

    Use logs icons, use pointer cursor, fix review markup formatting

commit 0ba50fcd956101f5054ce38c2329df3e8abdfcd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 18:05:30 2020 +0300

    Use help cursor on tooltips

commit bf4e14afe69f874d29be73d8cd4cfbe240ca0304
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:41:47 2020 +0300

    Use tooltip in logs, rename tooltip classes

commit 00568fdc8e8484c5bae67c51ee8189a3a558e219
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:01:49 2020 +0300

    - client: Use the same tooltip style everywhere
This commit is contained in:
Artem Baskal
2020-07-17 15:24:39 +03:00
parent d794b11e7a
commit 7d2c7a61f1
30 changed files with 251 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Logs/Cells/Tooltip.css → client/src/components/Logs/Cells/IconTooltip.css
View File

@@ -1,4 +1,4 @@
.tooltip__container {
.tooltip-custom__container {
padding: 1rem 1.5rem 1.25rem 1.5rem;
font-size: 16px !important;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);

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

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { formatClientCell } from '../../../helpers/formatClientCell';
import getHintElement from './getHintElement';
import getIconTooltip from './getIconTooltip';
import { checkFiltered } from '../../../helpers/helpers';
import { BLOCK_ACTIONS } from '../../../helpers/constants';
@@ -37,7 +37,7 @@ const getClientCell = ({
'white-space--nowrap': isDetailed,
});
const hintClass = classNames('icons mr-4 icon--small cursor--pointer icon--light-gray', {
const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
'my-3': isDetailed,
});
@@ -68,7 +68,7 @@ const getClientCell = ({
return (
<div className="logs__row o-hidden h-100">
{getHintElement({
{getIconTooltip({
className: hintClass,
columnClass: 'grid grid--limited',
tooltipClass: 'px-5 pb-5 pt-4 mw-75',

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

@@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import getHintElement from './getHintElement';
import getIconTooltip from './getIconTooltip';
import {
DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
LONG_TIME_FORMAT,
@@ -21,14 +21,14 @@ const getDomainCell = (props) => {
const hasTracker = !!tracker;
const lockIconClass = classNames('icons icon--small d-none d-sm-block cursor--pointer', {
'icon--active': answer_dnssec,
const lockIconClass = classNames('icons icon--24 d-none d-sm-block', {
'icon--green': answer_dnssec,
'icon--disabled': !answer_dnssec,
'my-3': isDetailed,
});
const privacyIconClass = classNames('icons mx-2 icon--small d-none d-sm-block cursor--pointer', {
'icon--active': hasTracker,
const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
'icon--green': hasTracker,
'icon--disabled': !hasTracker,
'my-3': isDetailed,
});
@@ -72,7 +72,7 @@ const getDomainCell = (props) => {
const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
const trackerHint = getHintElement({
const trackerHint = getIconTooltip({
className: privacyIconClass,
tooltipClass: 'pt-4 pb-5 px-5 mw-75',
xlinkHref: 'privacy',
@@ -90,7 +90,7 @@ const getDomainCell = (props) => {
return (
<div className="logs__row o-hidden">
{dnssec_enabled && getHintElement({
{dnssec_enabled && getIconTooltip({
className: lockIconClass,
tooltipClass: 'py-4 px-5 pb-45',
canShowTooltip: answer_dnssec,

52
client/src/components/Logs/Cells/getHintElement.js → client/src/components/Logs/Cells/getIconTooltip.js
View File

@@ -1,14 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
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';
import { HIDE_TOOLTIP_DELAY } from '../../../helpers/constants';
import { processContent } from '../../../helpers/helpers';
import Tooltip from '../../ui/Tooltip';
import 'react-popper-tooltip/dist/styles.css';
import './IconTooltip.css';
const getHintElement = ({
const getIconTooltip = ({
className,
contentItemClass,
columnClass,
@@ -24,30 +23,27 @@ const getHintElement = ({
<Trans>{item || '—'}</Trans>
</div>,
) : null,
}) => <TooltipTrigger placement={placement} trigger="hover" delayHide={HIDE_TOOLTIP_DELAY} 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>}
}) => {
const tooltipContent = <>
{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>}
</span>}
</TooltipTrigger>;
</>;
getHintElement.propTypes = {
const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
return <Tooltip
className={tooltipClassName}
content={tooltipContent}
placement={placement}
>
{xlinkHref && <svg className={className}>
<use xlinkHref={`#${xlinkHref}`} />
</svg>}
</Tooltip>;
};
getIconTooltip.propTypes = {
className: PropTypes.string,
contentItemClass: PropTypes.string,
columnClass: PropTypes.string,
@@ -63,4 +59,4 @@ getHintElement.propTypes = {
renderContent: PropTypes.arrayOf(PropTypes.element),
};
export default getHintElement;
export default getIconTooltip;

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

@@ -5,7 +5,7 @@ import {
FILTERED_STATUS,
FILTERED_STATUS_TO_META_MAP,
} from '../../../helpers/constants';
import getHintElement from './getHintElement';
import getIconTooltip from './getIconTooltip';
const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
const {
@@ -95,8 +95,8 @@ const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
return (
<div className="logs__row">
{getHintElement({
className: classNames('icons mr-4 icon--small cursor--pointer icon--light-gray', { 'my-3': isDetailed }),
{getIconTooltip({
className: classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': 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',

12
client/src/components/Logs/Filters/Form.js
View File

@@ -12,10 +12,10 @@ import {
RESPONSE_FILTER,
RESPONSE_FILTER_QUERIES,
} from '../../../helpers/constants';
import IconTooltip from '../../ui/IconTooltip';
import { setLogsFilter } from '../../../actions/queryLogs';
import useDebounce from '../../../helpers/useDebounce';
import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
import Tooltip from '../../ui/Tooltip';
const renderFilterField = ({
input,
@@ -35,7 +35,7 @@ const renderFilterField = ({
return <>
<div className="input-group-search input-group-search__icon--magnifier">
<svg className="icons icon--small icon--gray">
<svg className="icons icon--24 icon--gray">
<use xlinkHref="#magnifier" />
</svg>
</div>
@@ -53,12 +53,16 @@ const renderFilterField = ({
/>
<div
className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
<svg className="icons icon--smallest icon--gray" onClick={onClearInputClick}>
<svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
<use xlinkHref="#cross" />
</svg>
</div>
<span className="input-group-search input-group-search__icon--tooltip">
<IconTooltip text={tooltip} type='tooltip-custom--logs' />
<Tooltip content={tooltip} className="tooltip-container">
<svg className="icons icon--20 icon--gray">
<use xlinkHref="#question" />
</svg>
</Tooltip>
</span>
{!disabled
&& touched

2
client/src/components/Logs/Filters/index.js
View File

@@ -12,7 +12,7 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => (
className="btn btn-icon--green ml-3 bg-transparent"
onClick={refreshLogs}
>
<svg className="icons icon--small">
<svg className="icons icon--24">
<use xlinkHref="#update" />
</svg>
</button>

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

@@ -399,10 +399,6 @@
top: 0.5rem;
}
.icon--light-gray {
color: var(--gray-8);
}
.link--green {
color: var(--green79);
}

22
client/src/components/Logs/Table.js
View File

@@ -154,27 +154,23 @@ const Table = (props) => {
headerClassName: 'logs__text',
},
{
Header: () => {
const plainSelected = classNames('cursor--pointer', {
'icon--selected': !isDetailed,
});
const detailedSelected = classNames('cursor--pointer', {
'icon--selected': isDetailed,
});
Header: function Header() {
return <div className="d-flex justify-content-between">
{t('client_table_header')}
{<span>
<svg
className={`icons icon--small icon--active mr-2 cursor--pointer ${plainSelected}`}
className={classNames('icons icon--24 icon--green mr-2 cursor--pointer', {
'icon--selected': !isDetailed,
})}
onClick={() => toggleDetailedLogs(false)}
>
<title><Trans>compact</Trans></title>
<use xlinkHref='#list' />
</svg>
<svg
className={`icons icon--small icon--active cursor--pointer ${detailedSelected}`}
className={classNames('icons icon--24 icon--green cursor--pointer', {
'icon--selected': isDetailed,
})}
onClick={() => toggleDetailedLogs(true)}
>
<title><Trans>default</Trans></title>
@@ -261,12 +257,12 @@ const Table = (props) => {
getPaginationProps={() => ({ className: 'custom-pagination custom-pagination--padding' })}
getTbodyProps={() => ({ className: 'd-block' })}
previousText={
<svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
<svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
<title><Trans>previous_btn</Trans></title>
<use xlinkHref="#arrow-left" />
</svg>}
nextText={
<svg className="icons icon--small icon--gray w-100 h-100 cursor--pointer">
<svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
<title><Trans>next_btn</Trans></title>
<use xlinkHref="#arrow-right" />
</svg>}

2
client/src/components/Logs/index.js
View File

@@ -245,7 +245,7 @@ const Logs = (props) => {
}}
>
<svg
className="icon icon--small icon-cross d-block d-md-none cursor--pointer"
className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
onClick={closeModal}>
<use xlinkHref="#cross" />
</svg>