Move clear functions to options, simplify UI
This commit is contained in:
parent
0efaa39d45
commit
336d28c44d
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
version="1.1"
|
||||||
|
id="svg135"
|
||||||
|
sodipodi:docname="laptop.svg"
|
||||||
|
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs139" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview137"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="26.634355"
|
||||||
|
inkscape:cx="11.958239"
|
||||||
|
inkscape:cy="12.990741"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1024"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg135" />
|
||||||
|
<path
|
||||||
|
d="M21 19H3C1.89543 19 1 18.1046 1 17V16H3V7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V16H23V17C23 18.1046 22.1046 19 21 19ZM5 7V16H19V7H5Z"
|
||||||
|
fill="#2E3A59"
|
||||||
|
id="path133"
|
||||||
|
style="fill:#000000" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="report.svg"
|
||||||
|
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="37.666667"
|
||||||
|
inkscape:cx="12.013274"
|
||||||
|
inkscape:cy="12"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1024"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
d="M13.66 4.3C13.5649 3.83433 13.1553 3.5 12.68 3.5H5.5C4.94772 3.5 4.5 3.94772 4.5 4.5V19.5C4.5 20.0523 4.94772 20.5 5.5 20.5C6.05228 20.5 6.5 20.0523 6.5 19.5V13.5H12.1L12.34 14.7C12.4307 15.1683 12.8431 15.5048 13.32 15.5H18.5C19.0523 15.5 19.5 15.0523 19.5 14.5V6.5C19.5 5.94772 19.0523 5.5 18.5 5.5H13.9L13.66 4.3Z"
|
||||||
|
fill="#2E3A59"
|
||||||
|
id="path2"
|
||||||
|
style="fill:#000000" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -91,29 +91,16 @@ const Sidebar = () => {
|
||||||
|
|
||||||
{stolenDataView ? (
|
{stolenDataView ? (
|
||||||
<nav>
|
<nav>
|
||||||
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
|
||||||
<img src="/assets/icons/settings.svg" width="20" height="20" />
|
|
||||||
<span>Ustawienia</span>
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
getMemory().removeRequestsFor(origin);
|
window.open(
|
||||||
getMemory().emit('change', origin);
|
`/components/report-window/report-window.html?origin=${origin}`,
|
||||||
setMarksOccurrence(false);
|
'new_tab'
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
|
<img src="/assets/icons/report.svg" width="20" height="20" />
|
||||||
<span>Wyczyść historię wtyczki</span>
|
<span>Generuj raport</span>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
getMemory().removeCookiesFor(origin);
|
|
||||||
getMemory().emit('change', origin);
|
|
||||||
setMarksOccurrence(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src="/assets/icons/cookie.svg" width="20" height="20" />
|
|
||||||
<span>Wyczyść ciasteczka</span>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -134,6 +121,11 @@ const Sidebar = () => {
|
||||||
{detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
|
{detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||||
|
<img src="/assets/icons/settings.svg" width="20" height="20" />
|
||||||
|
<span>Ustawienia</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
{localStorage.getItem('blottingBrowser') ===
|
{localStorage.getItem('blottingBrowser') ===
|
||||||
'nikttakniesplamitwojejprzeglądarkijakspidersweb' ? (
|
'nikttakniesplamitwojejprzeglądarkijakspidersweb' ? (
|
||||||
<button
|
<button
|
||||||
|
@ -231,6 +223,16 @@ const Sidebar = () => {
|
||||||
detailsVisibility={detailsVisibility}
|
detailsVisibility={detailsVisibility}
|
||||||
setDetailsVisibility={setDetailsVisibility}
|
setDetailsVisibility={setDetailsVisibility}
|
||||||
setStolenDataView={setStolenDataView}
|
setStolenDataView={setStolenDataView}
|
||||||
|
removeCookies={() => {
|
||||||
|
getMemory().removeCookiesFor(origin);
|
||||||
|
getMemory().emit('change', origin);
|
||||||
|
setMarksOccurrence(false);
|
||||||
|
}}
|
||||||
|
removeRequests={() => {
|
||||||
|
getMemory().removeRequestsFor(origin);
|
||||||
|
getMemory().emit('change', origin);
|
||||||
|
setMarksOccurrence(false);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
44
options.scss
44
options.scss
|
@ -31,4 +31,48 @@
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 0.5rem 0 1rem;
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $ultra-black-color;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: underline;
|
||||||
|
svg path {
|
||||||
|
fill: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: $disabled-grey;
|
||||||
|
svg path {
|
||||||
|
fill: $disabled-grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
19
options.tsx
19
options.tsx
|
@ -13,6 +13,8 @@ export default function Options({
|
||||||
detailsVisibility,
|
detailsVisibility,
|
||||||
setDetailsVisibility,
|
setDetailsVisibility,
|
||||||
setStolenDataView,
|
setStolenDataView,
|
||||||
|
removeCookies,
|
||||||
|
removeRequests,
|
||||||
}: {
|
}: {
|
||||||
minValueLength: number;
|
minValueLength: number;
|
||||||
setMinValueLength: (n: number) => void;
|
setMinValueLength: (n: number) => void;
|
||||||
|
@ -25,6 +27,8 @@ export default function Options({
|
||||||
detailsVisibility: boolean;
|
detailsVisibility: boolean;
|
||||||
setDetailsVisibility: (b: boolean) => void;
|
setDetailsVisibility: (b: boolean) => void;
|
||||||
setStolenDataView: (b: boolean) => void;
|
setStolenDataView: (b: boolean) => void;
|
||||||
|
removeCookies: () => void;
|
||||||
|
removeRequests: () => void;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
@ -112,6 +116,21 @@ export default function Options({
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
<span>Narzędzia deweloperskie</span>
|
||||||
|
<div className="buttons">
|
||||||
|
<div className="button-container">
|
||||||
|
<button onClick={() => removeRequests()}>
|
||||||
|
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
|
||||||
|
<span>Wyczyść historię wtyczki</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="button-container">
|
||||||
|
<button onClick={() => removeCookies()}>
|
||||||
|
<img src="/assets/icons/cookie.svg" width="20" height="20" />
|
||||||
|
<span>Wyczyść ciasteczka</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue