Move clear functions to options, simplify UI
This commit is contained in:
Arkadiusz Wieczorek
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 ? (
|
||||
<nav>
|
||||
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||
<img src="/assets/icons/settings.svg" width="20" height="20" />
|
||||
<span>Ustawienia</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
getMemory().removeRequestsFor(origin);
|
||||
getMemory().emit('change', origin);
|
||||
setMarksOccurrence(false);
|
||||
window.open(
|
||||
`/components/report-window/report-window.html?origin=${origin}`,
|
||||
'new_tab'
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
|
||||
<span>Wyczyść historię wtyczki</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>
|
||||
<img src="/assets/icons/report.svg" width="20" height="20" />
|
||||
<span>Generuj raport</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
@ -134,6 +121,11 @@ const Sidebar = () => {
|
|||
{detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
|
||||
</span>
|
||||
</button>
|
||||
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||
<img src="/assets/icons/settings.svg" width="20" height="20" />
|
||||
<span>Ustawienia</span>
|
||||
</button>
|
||||
|
||||
{localStorage.getItem('blottingBrowser') ===
|
||||
'nikttakniesplamitwojejprzeglądarkijakspidersweb' ? (
|
||||
<button
|
||||
|
|
@ -231,6 +223,16 @@ const Sidebar = () => {
|
|||
detailsVisibility={detailsVisibility}
|
||||
setDetailsVisibility={setDetailsVisibility}
|
||||
setStolenDataView={setStolenDataView}
|
||||
removeCookies={() => {
|
||||
getMemory().removeCookiesFor(origin);
|
||||
getMemory().emit('change', origin);
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
removeRequests={() => {
|
||||
getMemory().removeRequestsFor(origin);
|
||||
getMemory().emit('change', origin);
|
||||
setMarksOccurrence(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
|
|
|||
44
options.scss
44
options.scss
|
|
@ -31,4 +31,48 @@
|
|||
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,
|
||||
setDetailsVisibility,
|
||||
setStolenDataView,
|
||||
removeCookies,
|
||||
removeRequests,
|
||||
}: {
|
||||
minValueLength: number;
|
||||
setMinValueLength: (n: number) => void;
|
||||
|
|
@ -25,6 +27,8 @@ export default function Options({
|
|||
detailsVisibility: boolean;
|
||||
setDetailsVisibility: (b: boolean) => void;
|
||||
setStolenDataView: (b: boolean) => void;
|
||||
removeCookies: () => void;
|
||||
removeRequests: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
@ -112,6 +116,21 @@ export default function Options({
|
|||
</label>
|
||||
</div>
|
||||
</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>
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue