mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-09-11 10:45:42 +03:00
Pull request: 684 move block/unblock button to the tooltip menu
Updates #684 Squashed commit of the following: commit 2c5ac44d3edb55d0d3be169fb0bbfb336920964d Merge: 0fce61dfa733d6c1fc
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: f49281b88506d71310
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: d3267bbe9d3fabdda4
Author: Ildar Kamalov <ik@adguard.com> Date: Thu Oct 12 11:13:43 2023 +0300 Merge branch 'master' into ADG-7200 commit d3267bbe9477d6db0783534cb4ab4f7afc4d63b0 Merge: 58a6c766f6a3661562
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:
parent
733d6c1fca
commit
413f484810
@ -23,12 +23,17 @@ See also the [v0.107.40 GitHub milestone][ms-v0.107.40].
|
||||
NOTE: Add new changes BELOW THIS COMMENT.
|
||||
-->
|
||||
|
||||
### Changed
|
||||
|
||||
- "Block" and "Unblock" buttons of the query log moved to the tooltip menu ([#684]).
|
||||
|
||||
### Fixed
|
||||
|
||||
- The time shown in the statistics is one hour less than the current time ([#6296]).
|
||||
- Issues with QUIC and HTTP/3 upstreams on FreeBSD ([#6301]).
|
||||
- Panic on clearing query log ([#6304]).
|
||||
|
||||
[#684]: https://github.com/AdguardTeam/AdGuardHome/issues/684
|
||||
[#6296]: https://github.com/AdguardTeam/AdGuardHome/issues/6296
|
||||
[#6301]: https://github.com/AdguardTeam/AdGuardHome/issues/6301
|
||||
[#6304]: https://github.com/AdguardTeam/AdGuardHome/issues/6304
|
||||
|
@ -134,15 +134,6 @@ body {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logs__row:hover .button-action,
|
||||
.button-action--active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ReactModal__Body--open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -26,9 +26,7 @@ const ClientCell = ({
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
|
||||
const processingRules = useSelector((state) => state.filtering.processingRules);
|
||||
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
|
||||
const processingSet = useSelector((state) => state.access.processingSet);
|
||||
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
|
||||
const [isOptionsOpened, setOptionsOpened] = useState(false);
|
||||
|
||||
@ -84,11 +82,23 @@ const ClientCell = ({
|
||||
const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
|
||||
const clientNameBlockingFor = getBlockingClientName(clients, client);
|
||||
|
||||
const onClick = async () => {
|
||||
await dispatch(toggleBlocking(buttonType, domain));
|
||||
await dispatch(getStats());
|
||||
setOptionsOpened(false);
|
||||
};
|
||||
|
||||
const BUTTON_OPTIONS = [
|
||||
{
|
||||
name: buttonType,
|
||||
onClick,
|
||||
className: isFiltered ? 'bg--green' : 'bg--danger',
|
||||
},
|
||||
{
|
||||
name: blockingForClientKey,
|
||||
onClick: () => {
|
||||
dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
|
||||
setOptionsOpened(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -101,27 +111,25 @@ const ClientCell = ({
|
||||
client_info?.disallowed_rule || '',
|
||||
));
|
||||
await dispatch(updateLogs());
|
||||
setOptionsOpened(false);
|
||||
}
|
||||
},
|
||||
disabled: processingSet || lastRuleInAllowlist,
|
||||
disabled: lastRuleInAllowlist,
|
||||
},
|
||||
];
|
||||
|
||||
const onClick = async () => {
|
||||
await dispatch(toggleBlocking(buttonType, domain));
|
||||
await dispatch(getStats());
|
||||
};
|
||||
|
||||
const getOptions = (options) => {
|
||||
if (options.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{options.map(({ name, onClick, disabled }) => (
|
||||
{options.map(({
|
||||
name, onClick, disabled, className,
|
||||
}) => (
|
||||
<button
|
||||
key={name}
|
||||
className="button-action--arrow-option px-4 py-1"
|
||||
className={classNames('button-action--arrow-option px-4 py-1', className)}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
@ -134,17 +142,6 @@ const ClientCell = ({
|
||||
|
||||
const content = getOptions(BUTTON_OPTIONS);
|
||||
|
||||
const buttonClass = classNames('button-action button-action--main', {
|
||||
'button-action--unblock': isFiltered,
|
||||
'button-action--with-options': content,
|
||||
'button-action--active': isOptionsOpened,
|
||||
});
|
||||
|
||||
const buttonArrowClass = classNames('button-action button-action--arrow', {
|
||||
'button-action--unblock': isFiltered,
|
||||
'button-action--active': isOptionsOpened,
|
||||
});
|
||||
|
||||
const containerClass = classNames('button-action__container', {
|
||||
'button-action__container--detailed': isDetailed,
|
||||
});
|
||||
@ -153,25 +150,26 @@ const ClientCell = ({
|
||||
<div className={containerClass}>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonClass}
|
||||
onClick={onClick}
|
||||
disabled={processingRules}
|
||||
className="btn btn-icon btn-sm px-0"
|
||||
onClick={() => setOptionsOpened(true)}
|
||||
>
|
||||
{t(buttonType)}
|
||||
<svg className="icon24 icon--lightgray button-action__icon">
|
||||
<use xlinkHref="#bullets" />
|
||||
</svg>
|
||||
</button>
|
||||
{content && (
|
||||
<button className={buttonArrowClass} disabled={processingRules}>
|
||||
<IconTooltip
|
||||
className="icon24"
|
||||
tooltipClass="button-action--arrow-option-container"
|
||||
xlinkHref="chevron-down"
|
||||
triggerClass="button-action--icon"
|
||||
content={content}
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
onVisibilityChange={setOptionsOpened}
|
||||
/>
|
||||
</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={content}
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
onVisibilityChange={setOptionsOpened}
|
||||
defaultTooltipShown={true}
|
||||
delayHide={0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@ -198,7 +196,7 @@ const ClientCell = ({
|
||||
</div>
|
||||
{isDetailed && clientName && !whoisAvailable && (
|
||||
<Link
|
||||
className="detailed-info d-none d-sm-block logs__text logs__text--link"
|
||||
className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
|
||||
to={`logs?search="${encodeURIComponent(clientName)}"`}
|
||||
title={clientName}
|
||||
>
|
||||
|
@ -1,4 +1,5 @@
|
||||
.tooltip-custom__container {
|
||||
min-width: 150px;
|
||||
padding: 1rem 1.5rem 1.25rem 1.5rem;
|
||||
font-size: 16px !important;
|
||||
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
|
@ -21,6 +21,8 @@ const IconTooltip = ({
|
||||
content,
|
||||
trigger,
|
||||
onVisibilityChange,
|
||||
defaultTooltipShown,
|
||||
delayHide,
|
||||
renderContent = content ? React.Children.map(
|
||||
processContent(content),
|
||||
(item, idx) => <div key={idx} className={contentItemClass}>
|
||||
@ -44,6 +46,8 @@ const IconTooltip = ({
|
||||
trigger={trigger}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
|
||||
delayHide={delayHide}
|
||||
defaultTooltipShown={defaultTooltipShown}
|
||||
>
|
||||
{xlinkHref && <svg className={className}>
|
||||
<use xlinkHref={`#${xlinkHref}`} />
|
||||
@ -65,6 +69,8 @@ IconTooltip.propTypes = {
|
||||
content: PropTypes.node,
|
||||
renderContent: PropTypes.arrayOf(PropTypes.element),
|
||||
onVisibilityChange: PropTypes.func,
|
||||
defaultTooltipShown: PropTypes.bool,
|
||||
delayHide: PropTypes.number,
|
||||
};
|
||||
|
||||
export default IconTooltip;
|
||||
|
@ -80,6 +80,10 @@
|
||||
color: var(--gray-f3);
|
||||
}
|
||||
|
||||
.logs__text--client {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.icon--selected {
|
||||
background-color: var(--gray-f3);
|
||||
border: solid 1px var(--gray-d8);
|
||||
@ -261,9 +265,8 @@
|
||||
.button-action__container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: 2px;
|
||||
bottom: 0.5rem;
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@ -307,45 +310,10 @@
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.button-action--arrow {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 1px solid var(--white);
|
||||
width: 1.5625rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-action:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-action--arrow .button-action--icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-action:active {
|
||||
background: var(--btn-block-active);
|
||||
}
|
||||
|
||||
.button-action--unblock:active {
|
||||
background: var(--btn-unblock-active);
|
||||
}
|
||||
|
||||
.button-action:disabled {
|
||||
background: var(--btn-block-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button-action--unblock:disabled {
|
||||
background: var(--btn-unblock-disabled);
|
||||
}
|
||||
|
||||
.button-action--arrow-option {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@ -551,3 +519,20 @@
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--card-bgcolor);
|
||||
}
|
||||
|
||||
.button-action__hidden-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 33px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .button-action__icon {
|
||||
color: var(--gray-f3);
|
||||
}
|
||||
|
Binary file not shown.
@ -21,6 +21,7 @@ const Tooltip = ({
|
||||
delayShow = SHOW_TOOLTIP_DELAY,
|
||||
delayHide = HIDE_TOOLTIP_DELAY,
|
||||
onVisibilityChange,
|
||||
defaultTooltipShown,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const touchEventsAvailable = 'ontouchstart' in window;
|
||||
@ -75,6 +76,7 @@ const Tooltip = ({
|
||||
delayShow={delayShowValue}
|
||||
tooltip={renderTooltip}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
defaultTooltipShown={defaultTooltipShown}
|
||||
>
|
||||
{renderTrigger}
|
||||
</TooltipTrigger>
|
||||
@ -97,6 +99,7 @@ Tooltip.propTypes = {
|
||||
className: propTypes.string,
|
||||
triggerClass: propTypes.string,
|
||||
onVisibilityChange: propTypes.func,
|
||||
defaultTooltipShown: propTypes.bool,
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
@ -43,7 +43,7 @@ export const renderFormattedClientCell = (value, info, isDetailed = false, isLog
|
||||
const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
|
||||
|
||||
if (name) {
|
||||
const nameValue = <div className="logs__text logs__text--link logs__text--nowrap" title={`${name} (${value})`}>
|
||||
const nameValue = <div className="logs__text logs__text--link logs__text--nowrap logs__text--client" title={`${name} (${value})`}>
|
||||
{name} <small>{`(${value})`}</small>
|
||||
</div>;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user