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

Pull request: 684 move block/unblock button to the tooltip menu

Browse Source 
Updates #684

Squashed commit of the following:

commit 2c5ac44d3edb55d0d3be169fb0bbfb336920964d
Merge: 0fce61dfa 733d6c1fc
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 16 10:08:58 2023 +0300

    Merge branch 'master' into ADG-7200

commit 0fce61dfad31951c3d5a484a14383c58964b47f0
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 16:38:13 2023 +0300

    fix dashboard clients table block/unblock button

commit ef5d72fd7cac81b70503c8813cf6e96952ec3b65
Merge: f49281b88 506d71310
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 16:16:21 2023 +0300

    Merge branch 'master' into ADG-7200

commit f49281b8818728ab298d769b8164919ea415d6c9
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:25:05 2023 +0300

    fix disabled

commit 0031861174108214e9741852f6e00c5873c3b20f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:20:50 2023 +0300

    fix icon color

commit 2916937b0d6a0d126bd48e59f41a6fcbc4622ea1
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:15:55 2023 +0300

    changelog

commit 34493c974fb9304267e9149360c802d9364dd7de
Merge: d3267bbe9 d3fabdda4
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Oct 12 11:13:43 2023 +0300

    Merge branch 'master' into ADG-7200

commit d3267bbe9477d6db0783534cb4ab4f7afc4d63b0
Merge: 58a6c766f 6a3661562
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 16:46:39 2023 +0300

    Merge branch 'master' into ADG-7200

commit 58a6c766f3b783f0e2fdc36d40889042f3c74f2f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 16:46:13 2023 +0300

    ADG-7200 move block/unblock button to the tooltip menu
This commit is contained in:
Ildar Kamalov
2023-10-16 18:00:28 +03:00
parent 733d6c1fca
commit 413f484810
11 changed files with 124 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/components/Dashboard/Clients.js
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import ReactTable from 'react-table';
import PropTypes from 'prop-types';
import { Trans, useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
import { toggleClientBlock } from '../../actions/access';
import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
import { getStats } from '../../actions/stats';
import IconTooltip from '../Logs/Cells/IconTooltip';
const getClientsPercentColor = (percent) => {
if (percent > 50) {
@@ -40,9 +41,7 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
const processingSet = useSelector((state) => state.access.processingSet);
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
const buttonClass = classNames('button-action button-action--main', {
'button-action--unblock': disallowed,
});
const [isOptionsOpened, setOptionsOpened] = useState(false);
const toggleClientStatus = async (ip, disallowed, disallowed_rule) => {
let confirmMessage;
@@ -62,23 +61,49 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
}
};
const onClick = () => toggleClientStatus(ip, disallowed, disallowed_rule);
const onClick = () => {
toggleClientStatus(ip, disallowed, disallowed_rule);
setOptionsOpened(false);
};
const text = disallowed ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
const disabled = processingSet || lastRuleInAllowlist;
return (
<div className="table__action pl-4">
<div className="table__action">
<button
type="button"
className={buttonClass}
onClick={onClick}
disabled={disabled}
title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
className="btn btn-icon btn-sm px-0"
onClick={() => setOptionsOpened(true)}
>
<Trans>{text}</Trans>
<svg className="icon24 icon--lightgray button-action__icon">
<use xlinkHref="#bullets" />
</svg>
</button>
{isOptionsOpened && (
<IconTooltip
className="icon24"
tooltipClass="button-action--arrow-option-container"
xlinkHref="bullets"
triggerClass="btn btn-icon btn-sm px-0 button-action__hidden-trigger"
content={(
<button
className={classNames('button-action--arrow-option px-4 py-1', disallowed ? 'bg--green' : 'bg--danger')}
onClick={onClick}
disabled={disabled}
title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
>
<Trans>{text}</Trans>
</button>
)}
placement="bottom-end"
trigger="click"
onVisibilityChange={setOptionsOpened}
defaultTooltipShown={true}
delayHide={0}
/>
)}
</div>
);
};

12
client/src/components/Dashboard/Dashboard.css
View File

@@ -28,11 +28,13 @@
border-bottom: 6px solid #585965;
}
@media (max-width: 1279.98px) {
.table__action {
position: absolute;
right: 0;
}
.table__action {
position: relative;
margin-left: auto;
}
.table__action .btn-icon {
margin: 2px;
}
.page-title--dashboard {