diff --git a/assets/icons/bulb.svg b/assets/icons/bulb.svg new file mode 100644 index 0000000..f322749 --- /dev/null +++ b/assets/icons/bulb.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/file_find.svg b/assets/icons/file_find.svg new file mode 100644 index 0000000..568052d --- /dev/null +++ b/assets/icons/file_find.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/file_minus.svg b/assets/icons/file_minus.svg new file mode 100644 index 0000000..f841b0f --- /dev/null +++ b/assets/icons/file_minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/sidebar/sidebar.scss b/components/sidebar/sidebar.scss index c8caac6..a26168b 100644 --- a/components/sidebar/sidebar.scss +++ b/components/sidebar/sidebar.scss @@ -3,7 +3,7 @@ .sidebar { .header { display: grid; - grid-template-columns: 6.67rem 1fr 1.25rem; + grid-template-columns: 1.75rem 1fr 1.25rem; align-items: center; max-height: 3.5rem; min-height: 3.5rem; diff --git a/components/sidebar/sidebar.tsx b/components/sidebar/sidebar.tsx index 8a292fd..c5de4c7 100644 --- a/components/sidebar/sidebar.tsx +++ b/components/sidebar/sidebar.tsx @@ -13,7 +13,6 @@ async function getCurrentTab() { return tab; } - import './../../styles/global.scss'; import './sidebar.scss'; @@ -39,16 +38,14 @@ const Sidebar = () => { ? true : false ); - const [logoVisibility, setLogoVisibility] = React.useState( - localStorage.getItem('logoVisibility') === null + const [detailsVisibility, setDetailsVisibility] = React.useState( + localStorage.getItem('detailsVisibility') === null ? false - : localStorage.getItem('logoVisibility') == 'true' + : localStorage.getItem('detailsVisibility') == 'true' ? true : false ); - - React.useEffect(() => { for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) { if (cluster.hasMarks()) { @@ -61,19 +58,9 @@ const Sidebar = () => { return (
-
- -
+
+ +
{origin ? ( <> Analiza strony @@ -121,39 +108,51 @@ const Sidebar = () => { Wyczyść ciasteczka + ) : null} @@ -188,6 +187,7 @@ const Sidebar = () => { minValueLength={minValueLength} cookiesOnly={cookiesOnly} cookiesOrOriginOnly={cookiesOrOriginOnly} + detailsVisibility={detailsVisibility} /> ) : ( @@ -200,8 +200,8 @@ const Sidebar = () => { setCookiesOrOriginOnly={setCookiesOrOriginOnly} warningDataDialogAck={warningDataDialogAck} setWarningDataDialogAck={setWarningDataDialogAck} - logoVisibility={logoVisibility} - setLogoVisibility={setLogoVisibility} + detailsVisibility={detailsVisibility} + setDetailsVisibility={setDetailsVisibility} /> )} diff --git a/components/sidebar/stolen-data-cluster.tsx b/components/sidebar/stolen-data-cluster.tsx index 470e57e..52c2a52 100644 --- a/components/sidebar/stolen-data-cluster.tsx +++ b/components/sidebar/stolen-data-cluster.tsx @@ -125,6 +125,7 @@ export default function StolenDataCluster({ cookiesOnly, refreshToken, cookiesOrOriginOnly, + detailsVisibility, }: { origin: string; shorthost: string; @@ -132,6 +133,7 @@ export default function StolenDataCluster({ minValueLength: number; cookiesOnly: boolean; cookiesOrOriginOnly: boolean; + detailsVisibility: boolean; }) { const cluster = getMemory().getClustersForOrigin(origin)[shorthost]; const fullHosts = cluster.getFullHosts(); @@ -152,33 +154,36 @@ export default function StolenDataCluster({ ))}
-
- - - - - - - - {cluster - .calculateRepresentativeStolenData({ - minValueLength, - cookiesOnly, - cookiesOrOriginOnly, - }) - .map((entry) => ( - - ))} - -
- Wysłane dane: -
-
+ + {detailsVisibility ? ( +
+ + + + + + + + {cluster + .calculateRepresentativeStolenData({ + minValueLength, + cookiesOnly, + cookiesOrOriginOnly, + }) + .map((entry) => ( + + ))} + +
+ Wysłane dane: +
+
+ ) : null}
); } diff --git a/components/sidebar/stolen-data.tsx b/components/sidebar/stolen-data.tsx index 3f7b6ad..35df576 100644 --- a/components/sidebar/stolen-data.tsx +++ b/components/sidebar/stolen-data.tsx @@ -11,12 +11,14 @@ export function StolenData({ eventCounts, cookiesOnly, cookiesOrOriginOnly, + detailsVisibility, }: { origin: string; eventCounts: Record; minValueLength: number; cookiesOnly: boolean; cookiesOrOriginOnly: boolean; + detailsVisibility: boolean; }) { if (!origin) { return ( @@ -33,7 +35,7 @@ export function StolenData({ ); return (
- Domeny oraz przesłane informacje + Domeny{detailsVisibility ? ' oraz przesłane informacje' : null} {clusters.map((cluster) => { return ( @@ -45,6 +47,7 @@ export function StolenData({ minValueLength={minValueLength} cookiesOnly={cookiesOnly} cookiesOrOriginOnly={cookiesOrOriginOnly} + detailsVisibility={detailsVisibility} /> ); })} diff --git a/components/toolbar/toolbar.tsx b/components/toolbar/toolbar.tsx index 744d154..bfcae33 100644 --- a/components/toolbar/toolbar.tsx +++ b/components/toolbar/toolbar.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, ReactElement } from 'react'; +import React, { Fragment } from 'react'; import ReactDOM from 'react-dom'; import { useEmitter } from '../../util'; import { getMemory } from '../../memory'; @@ -44,9 +44,8 @@ const Toolbar = () => { const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin)) .filter((cluster) => cluster.exposesOrigin()) .map((cluster) => cluster.id); - setExposedOriginDomainCopy(''); - const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `; + const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `; switch (exposedOriginDomains.length) { case 0: @@ -78,7 +77,8 @@ const Toolbar = () => { const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin)) .filter((cluster) => cluster.hasCookies()) .map((cluster) => cluster.id); - const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `; + setCookieDomainCopy(''); + const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `; switch (cookieDomains.length) { case 0: @@ -97,7 +97,7 @@ const Toolbar = () => { default: return setCookieDomainCopy( first_sentence + - `${cookieDomains[0]}, ${cookieDomains[1]} (i ${ + `${cookieDomains[0]}, ${cookieDomains[1]} (i ${ cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2 } innych).` ); @@ -161,17 +161,33 @@ const Toolbar = () => {
-

{exposedOriginDomainCopy}

-

{cookieDomainCopy}

+

cluster.exposesOrigin()) + .map((domain) => domain.id) + .join(', ')} + > + {exposedOriginDomainCopy} +

+

cluster.hasCookies()) + .map((domain) => domain.id) + .join(', ')} + > + {cookieDomainCopy} +

{exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (

- Takie przetwarzanie danych może być niezgodne z prawem. Kliknij w - przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie narusza - RODO. + Takie przetwarzanie danych może być niezgodne z prawem. Kliknij + w przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie + narusza RODO.

@@ -192,7 +208,23 @@ const Toolbar = () => { > Pokaż szczegóły - +
) : null} diff --git a/options.scss b/options.scss index c11f3fb..8d4d1ce 100644 --- a/options.scss +++ b/options.scss @@ -17,9 +17,13 @@ .label-checkbox { cursor: pointer; margin-left: 0.5rem; + font-size: 0.875rem; + font-weight: 500; } .input-container { + font-size: 0.875rem; + font-weight: 500; padding-bottom: 0.25rem; } diff --git a/options.tsx b/options.tsx index c923b63..9d5322f 100644 --- a/options.tsx +++ b/options.tsx @@ -10,8 +10,8 @@ export default function Options({ setCookiesOrOriginOnly, warningDataDialogAck, setWarningDataDialogAck, - logoVisibility, - setLogoVisibility, + detailsVisibility, + setDetailsVisibility, }: { minValueLength: number; setMinValueLength: (n: number) => void; @@ -21,8 +21,8 @@ export default function Options({ setCookiesOrOriginOnly: (b: boolean) => void; warningDataDialogAck: boolean; setWarningDataDialogAck: (b: boolean) => void; - logoVisibility: boolean; - setLogoVisibility: (b: boolean) => void; + detailsVisibility: boolean; + setDetailsVisibility: (b: boolean) => void; }) { return (
@@ -31,18 +31,18 @@ export default function Options({
{ - setLogoVisibility(e.target.checked); + setDetailsVisibility(e.target.checked); localStorage.setItem( - 'logoVisibility', + 'detailsVisibility', e.target.checked as unknown as string ); }} /> -
@@ -58,10 +58,7 @@ export default function Options({ ); }} /> -
@@ -78,10 +75,7 @@ export default function Options({ value={minValueLength} onChange={(e) => { setMinValueLength(parseInt(e.target.value)); - localStorage.setItem( - 'minValueLength', - e.target.value - ); + localStorage.setItem('minValueLength', e.target.value); }} />
@@ -101,16 +95,10 @@ export default function Options({ type="checkbox" id="cookiesOrOriginOnly" checked={cookiesOrOriginOnly} - onChange={(e) => - setCookiesOrOriginOnly(e.target.checked) - } + onChange={(e) => setCookiesOrOriginOnly(e.target.checked)} /> -