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

all: sync with master

Browse Source
This commit is contained in:
Ainar Garipov
2022-09-29 17:36:01 +03:00
parent 77d04d44eb
commit 21f6ed36fe
74 changed files with 1004 additions and 891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/Logs/AnonymizerNotification.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Trans } from 'react-i18next';
import { HashLink as Link } from 'react-router-hash-link';
const AnonymizerNotification = () => (
<div className="alert alert-primary mt-6">
<Trans components={[
<strong key="0">text</strong>,
<Link to="/settings#logs-config" key="1">link</Link>,
]}>
anonymizer_notification
</Trans>
</div>
);
export default AnonymizerNotification;

2
client/src/components/Logs/Cells/ClientCell.js
View File

@@ -62,7 +62,7 @@ const ClientCell = ({
'white-space--nowrap': isDetailed,
});
const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
const hintClass = classNames('icons mr-4 icon--24 logs__question icon--lightgray', {
'my-3': isDetailed,
});

2
client/src/components/Logs/Cells/DomainCell.js
View File

@@ -34,7 +34,7 @@ const DomainCell = ({
'my-3': isDetailed,
});
const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block logs__question', {
'icon--green': hasTracker,
'icon--disabled': !hasTracker,
'my-3': isDetailed,

10
client/src/components/Logs/Cells/IconTooltip.css
View File

@@ -49,6 +49,12 @@
padding-top: 1rem;
}
@media (max-width: 1024px) {
.grid .key-colon, .grid .title--border {
font-weight: 600;
}
}
@media (max-width: 767.98px) {
.grid {
grid-template-columns: 35% 55%;
@@ -70,10 +76,6 @@
grid-column: 2 / span 1;
margin: 0 !important;
}
.grid .key-colon, .grid .title--border {
font-weight: 600;
}
}
.grid .key-colon:nth-child(odd)::after {

2
client/src/components/Logs/Cells/ResponseCell.js
View File

@@ -97,7 +97,7 @@ const ResponseCell = ({
return (
<div className="logs__cell logs__cell--response" role="gridcell">
<IconTooltip
className={classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed })}
className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { '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'

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

@@ -485,3 +485,13 @@
.bg--green {
color: var(--green79);
}
@media (max-width: 1024px) {
.logs__question {
display: none;
}
}
.logs__modal {
max-width: 720px;
}

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

@@ -25,6 +25,7 @@ import {
import InfiniteTable from './InfiniteTable';
import './Logs.css';
import { BUTTON_PREFIX } from './Cells/helpers';
import AnonymizerNotification from './AnonymizerNotification';
const processContent = (data) => Object.entries(data)
.map(([key, value]) => {
@@ -73,6 +74,7 @@ const Logs = () => {
processingGetConfig,
processingAdditionalLogs,
processingGetLogs,
anonymize_client_ip: anonymizeClientIp,
} = useSelector((state) => state.queryLogs, shallowEqual);
const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
@@ -104,6 +106,8 @@ const Logs = () => {
setIsSmallScreen(e.matches);
if (e.matches) {
dispatch(toggleDetailedLogs(false));
} else {
dispatch(toggleDetailedLogs(true));
}
};
@@ -180,35 +184,49 @@ const Logs = () => {
setButtonType={setButtonType}
setModalOpened={setModalOpened}
/>
<Modal portalClassName='grid' isOpen={isSmallScreen && isModalOpened}
onRequestClose={closeModal}
style={{
content: {
width: '100%',
height: 'fit-content',
left: 0,
top: 47,
padding: '1rem 1.5rem 1rem',
},
overlay: {
backgroundColor: 'rgba(0,0,0,0.5)',
},
}}
<Modal
portalClassName='grid'
isOpen={isSmallScreen && isModalOpened}
onRequestClose={closeModal}
style={{
content: {
width: '100%',
height: 'fit-content',
left: '50%',
top: 47,
padding: '1rem 1.5rem 1rem',
maxWidth: '720px',
transform: 'translateX(-50%)',
},
overlay: {
backgroundColor: 'rgba(0,0,0,0.5)',
},
}}
>
<svg
className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
onClick={closeModal}>
<use xlinkHref="#cross" />
</svg>
{processContent(detailedDataCurrent, buttonType)}
<div className="logs__modal-wrap">
<svg
className="icon icon--24 icon-cross d-block cursor--pointer"
onClick={closeModal}
>
<use xlinkHref="#cross" />
</svg>
{processContent(detailedDataCurrent, buttonType)}
</div>
</Modal>
</>;
return <>
{enabled && processingGetConfig && <Loading />}
{enabled && !processingGetConfig && renderPage()}
{!enabled && !processingGetConfig && <Disabled />}
</>;
return (
<>
{enabled && (
<>
{processingGetConfig && <Loading />}
{anonymizeClientIp && <AnonymizerNotification />}
{!processingGetConfig && renderPage()}
</>
)}
{!enabled && !processingGetConfig && <Disabled />}
</>
);
};
export default Logs;