Skip to content

Commit

Permalink
ADG-7200 move block/unblock button to the tooltip menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@IldarKamalov
IldarKamalov committed Oct 11, 2023
1 parent 3ec76cd commit 58a6c76
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 83 deletions.
9 changes: 0 additions & 9 deletions client/src/components/App/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
74 changes: 37 additions & 37 deletions client/src/components/Logs/Cells/ClientCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const ClientCell = ({
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);

Expand Down Expand Up @@ -84,11 +83,24 @@ 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',
disabled: processingRules,
},
{
name: blockingForClientKey,
onClick: () => {
dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
setOptionsOpened(false);
},
},
{
Expand All @@ -101,27 +113,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}
>
Expand All @@ -134,17 +144,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,
});
Expand All @@ -153,25 +152,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">
<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>
);
Expand Down
6 changes: 6 additions & 0 deletions client/src/components/Logs/Cells/IconTooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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}`} />
Expand All @@ -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;
51 changes: 14 additions & 37 deletions client/src/components/Logs/Logs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,8 @@
.button-action__container {
display: flex;
position: absolute;
right: 0;
right: 2px;
bottom: 0.5rem;
height: 1.6rem;
}

@media screen and (max-width: 1024px) {
Expand Down Expand Up @@ -307,45 +306,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;
Expand Down Expand Up @@ -551,3 +515,16 @@
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);
}
6 changes: 6 additions & 0 deletions client/src/components/ui/Icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,12 @@ const Icons = () => (
<circle cx="12" cy="12" r="9" />
<path d="M16.1215 12.1213H11.8789V7.87866" />
</symbol>

<symbol id="bullets" width="24" height="24" viewBox="0 0 24 24">
<path fillRule="evenodd" clipRule="evenodd" d="M12 7C11.1716 7 10.5 6.32843 10.5 5.5C10.5 4.67157 11.1716 4 12 4C12.8284 4 13.5 4.67157 13.5 5.5C13.5 6.32843 12.8284 7 12 7Z" fill="#7F7F7F" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5Z" fill="#7F7F7F" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 20C11.1716 20 10.5 19.3284 10.5 18.5C10.5 17.6716 11.1716 17 12 17C12.8284 17 13.5 17.6716 13.5 18.5C13.5 19.3284 12.8284 20 12 20Z" fill="#7F7F7F" />
</symbol>
</svg>
);

Expand Down
3 changes: 3 additions & 0 deletions client/src/components/ui/Tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const Tooltip = ({
delayShow = SHOW_TOOLTIP_DELAY,
delayHide = HIDE_TOOLTIP_DELAY,
onVisibilityChange,
defaultTooltipShown,
}) => {
const { t } = useTranslation();
const touchEventsAvailable = 'ontouchstart' in window;
Expand Down Expand Up @@ -75,6 +76,7 @@ const Tooltip = ({
delayShow={delayShowValue}
tooltip={renderTooltip}
onVisibilityChange={onVisibilityChange}
defaultTooltipShown={defaultTooltipShown}
>
{renderTrigger}
</TooltipTrigger>
Expand All @@ -97,6 +99,7 @@ Tooltip.propTypes = {
className: propTypes.string,
triggerClass: propTypes.string,
onVisibilityChange: propTypes.func,
defaultTooltipShown: propTypes.bool,
};

export default Tooltip;

0 comments on commit 58a6c76

Please sign in to comment.