Redesign #3

Closed
arek wants to merge 15 commits from redesign into master
8 changed files with 241 additions and 108 deletions
Showing only changes of commit 49542b58e5 - Show all commits

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z" fill="#2E3A59"/>
</svg>

After

Width:  |  Height:  |  Size: 240 B

View File

@ -3,10 +3,10 @@
"name": "Problematyczne requesty",
"version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.",
"description": "",
"sidebar_action": {
"default_title": "ICD Skaner",
"default_title": "ICD",
"default_panel": "sidebar/sidebar.html",
"default_icon": "sidebar_icon.png"
},

30
options.scss Normal file
View File

@ -0,0 +1,30 @@
@import './sidebar/colors.scss';
.options-container {
padding-top: 0.5rem;
span {
color: $mid-grey;
font-size: 0.875rem;
font-weight: 600;
}
fieldset {
padding: 0.5rem 0;
border: none;
display: flex;
flex-flow: column;
.label-checkbox {
cursor: pointer;
margin-left: 0.5rem;
}
.input-container{
padding-bottom: .25rem;
}
#minValueLength {
width: 3rem;
}
}
}

View File

@ -1,50 +1,96 @@
import React from "react";
import React from 'react';
import './options.scss';
export default function Options({
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
cookiesOrOriginOnly,
setCookiesOrOriginOnly,
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
cookiesOrOriginOnly,
setCookiesOrOriginOnly,
readWarningDataDialog,
setReadWarningDataDialog,
}: {
minValueLength: number;
setMinValueLength: (n: number) => void;
cookiesOnly: boolean;
setCookiesOnly: (b: boolean) => void;
cookiesOrOriginOnly: boolean;
setCookiesOrOriginOnly: (b: boolean) => void;
minValueLength: number;
setMinValueLength: (n: number) => void;
cookiesOnly: boolean;
setCookiesOnly: (b: boolean) => void;
cookiesOrOriginOnly: boolean;
setCookiesOrOriginOnly: (b: boolean) => void;
readWarningDataDialog: string;
setReadWarningDataDialog: (s: string) => void;
}) {
return (
<fieldset>
<h3>Zaawansowane ustawienia 💛</h3>
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{" "}
</label>
<input
type="number"
id="minValueLength"
value={minValueLength}
onChange={(e) => setMinValueLength(parseInt(e.target.value))}
/>
<br />
<input
type="checkbox"
id="cookiesOnly"
checked={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
<br />
<input
type="checkbox"
id="cookiesOrOriginOnly"
checked={cookiesOrOriginOnly}
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
/>
<label htmlFor="cookiesOrOriginOnly">
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
</label>
</fieldset>
);
return (
<div className="options-container">
<span>Ustawienia interfejsu</span>
<fieldset>
<div className="input-container">
<input
type="checkbox"
id="readWarningDataDialog"
checked={readWarningDataDialog != '1'}
onChange={(e) => {
setReadWarningDataDialog(
e.target.checked ? '0' : '1'
);
localStorage.setItem(
'readWarningDataDialog',
e.target.checked ? '0' : '1'
);
}}
/>
<label
className="label-checkbox"
htmlFor="readWarningDataDialog"
>
Wyświetlaj informację o pozyskiwanych danych
</label>
</div>
</fieldset>
<span>Ustawienia zaawansowane</span>
<fieldset>
<div className="input-container">
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{' '}
</label>
<input
type="number"
id="minValueLength"
value={minValueLength}
onChange={(e) =>
setMinValueLength(parseInt(e.target.value))
}
/>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOnly"
checked={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label className="label-checkbox" htmlFor="cookiesOnly">
Pokazuj tylko dane z cookiesów
</label>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOrOriginOnly"
checked={cookiesOrOriginOnly}
onChange={(e) =>
setCookiesOrOriginOnly(e.target.checked)
}
/>
<label
className="label-checkbox"
htmlFor="cookiesOrOriginOnly"
>
Pokazuj tylko dane z cookiesów lub z częścią historii
przeglądania
</label>
</div>
</fieldset>
</div>
);
}

View File

@ -3,3 +3,5 @@ $disabled-grey: #8a949f;
$light-grey: #d1d1d1;
$blue: #0048D9;
$icd-yellow: #ffee2c;
$pale-yellow: #fff8e5;
$contrast-yellow: #ffb900;

View File

@ -79,4 +79,30 @@
}
}
}
.warning-container {
background-color: $pale-yellow;
border-left: 4px solid $contrast-yellow;
margin-top: 0.5rem;
font-size: 0.875rem;
display: grid;
grid-template-columns: calc(100% - 2rem) 2rem;
align-items: flex-start;
span {
padding: 1rem;
}
button {
justify-content: flex-end;
border: none;
cursor: pointer;
color: $mid-grey;
line-height: 1.25rem;
background: transparent;
padding: 0.5rem 0.5rem;
display: flex;
align-self: flex-start;
}
}
}

View File

@ -9,6 +9,7 @@ import SettingsIcon from '../assets/icons/settings.svg';
import TrashIcon from '../assets/icons/trash_full.svg';
import MailIcon from '../assets/icons/mail.svg';
import ShortLeftIcon from '../assets/icons/short_left.svg';
import CloseBigIcon from '../assets/icons/close_big.svg';
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
@ -30,6 +31,9 @@ const Sidebar = () => {
useState<boolean>(false);
const [counter, setCounter] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
const [readWarningDataDialog, setReadWarningDataDialog] = useState<
string | null
>(localStorage.getItem('readWarningDataDialog'));
useEffect(() => {
const listener = async (data: any) => {
@ -91,18 +95,15 @@ const Sidebar = () => {
)}
</header>
<nav>
{stolenDataView ? (
<Fragment>
<button
onClick={() => setStolenDataView(!stolenDataView)}
>
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<SettingsIcon width={20} height={20} />
<span>Ustawienia wtyczki</span>
</button>
{/* <button
{stolenDataView ? (
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<SettingsIcon width={20} height={20} />
<span>Ustawienia wtyczki</span>
</button>
{/* <button
onClick={() => {
getMemory().removeCookiesFor(
origin,
@ -114,57 +115,80 @@ const Sidebar = () => {
<TrashIcon />
<span>Wyczyść ciasteczka first-party</span>
</button> */}
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<TrashIcon width={20} height={20} />
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<MailIcon width={20} height={20} />
<span>
Utwórz wiadomość dla administratora tej witryny
</span>
</button>
</Fragment>
) : null}
</nav>
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
{/* {stolenDataView ? 'Options' : 'Data'}
*/}
<TrashIcon width={20} height={20} />
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<MailIcon width={20} height={20} />
<span>
Utwórz wiadomość dla administratora tej witryny
</span>
</button>
</nav>
) : null}
<section>
{stolenDataView ? (
<StolenData
origin={origin}
refreshToken={counter}
refresh={() => setCounter((c) => c + 1)}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
/>
<Fragment>
{readWarningDataDialog != '1' ? (
<section className="warning-container">
<span>
<strong>Uwaga!</strong> Niekoniecznie każda
przechwycona poniżej informacja jest daną
osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie
reprezentować podmiotów trzecich.
</span>
<button
onClick={() => {
setReadWarningDataDialog('1');
localStorage.setItem(
'readWarningDataDialog',
'1'
);
}}
>
<CloseBigIcon width={16} height={16} />
</button>
</section>
) : null}
<StolenData
origin={origin}
refreshToken={counter}
refresh={() => setCounter((c) => c + 1)}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
/>
</Fragment>
) : (
<Options
minValueLength={minValueLength}
@ -173,6 +197,8 @@ const Sidebar = () => {
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
readWarningDataDialog={readWarningDataDialog}
setReadWarningDataDialog={setReadWarningDataDialog}
/>
)}
</section>

View File

@ -83,7 +83,7 @@ export function StolenData({
Zaznacz automatycznie
</button> */}
<span>Domeny, które pozyskały informacje</span>
<span>Domeny oraz przesłane informacje</span>
{clusters.map((cluster) => {
return (