Move clear functions to options, simplify UI

This commit is contained in:
Arkadiusz Wieczorek 2022-07-06 19:32:09 +02:00
parent 0efaa39d45
commit 336d28c44d
5 changed files with 166 additions and 19 deletions

41
assets/icons/laptop.svg Normal file
View File

@ -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

41
assets/icons/report.svg Normal file
View File

@ -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

View File

@ -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>

View File

@ -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;
}
}
}
} }

View File

@ -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>
); );