Final touches
This commit is contained in:
parent
01e0901a91
commit
13f6eb07dc
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.5rem 0 1rem;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
@ -19,8 +19,8 @@
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.input-container{
|
||||
padding-bottom: .25rem;
|
||||
.input-container {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
#minValueLength {
|
||||
|
62
options.tsx
62
options.tsx
@ -8,8 +8,8 @@ export default function Options({
|
||||
setCookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
setCookiesOrOriginOnly,
|
||||
readWarningDataDialog,
|
||||
setReadWarningDataDialog,
|
||||
warningDataDialogAck,
|
||||
setWarningDataDialogAck,
|
||||
logoVisibility,
|
||||
setLogoVisibility,
|
||||
}: {
|
||||
@ -19,47 +19,25 @@ export default function Options({
|
||||
setCookiesOnly: (b: boolean) => void;
|
||||
cookiesOrOriginOnly: boolean;
|
||||
setCookiesOrOriginOnly: (b: boolean) => void;
|
||||
readWarningDataDialog: string;
|
||||
setReadWarningDataDialog: (s: string) => void;
|
||||
logoVisibility: string;
|
||||
setLogoVisibility: (s: string) => void;
|
||||
warningDataDialogAck: boolean;
|
||||
setWarningDataDialogAck: (b: boolean) => void;
|
||||
logoVisibility: boolean;
|
||||
setLogoVisibility: (b: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="options-container">
|
||||
<span>Ustawienia interfejsu</span>
|
||||
<span>Interfejs</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 komunikat o pozyskiwanych danych
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="logoVisibility"
|
||||
checked={logoVisibility != '0'}
|
||||
checked={logoVisibility}
|
||||
onChange={(e) => {
|
||||
setLogoVisibility(e.target.checked ? '1' : '0');
|
||||
setLogoVisibility(e.target.checked);
|
||||
localStorage.setItem(
|
||||
'logoVisibility',
|
||||
e.target.checked ? '1' : '0'
|
||||
e.target.checked as unknown as string
|
||||
);
|
||||
}}
|
||||
/>
|
||||
@ -67,6 +45,26 @@ export default function Options({
|
||||
Wyświetlaj logo <i>Internet. Czas działać!</i>
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="warningDataDialogAck"
|
||||
checked={warningDataDialogAck}
|
||||
onChange={(e) => {
|
||||
setWarningDataDialogAck(e.target.checked);
|
||||
localStorage.setItem(
|
||||
'warningDataDialogAck',
|
||||
e.target.checked as unknown as string
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="label-checkbox"
|
||||
htmlFor="warningDataDialogAck"
|
||||
>
|
||||
Wyświetlaj komunikat o pozyskiwanych danych
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<span>Ustawienia zaawansowane</span>
|
||||
<fieldset>
|
||||
|
@ -3,17 +3,20 @@
|
||||
.sidebar {
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 6.67rem 1fr 1rem;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 6.67rem 1fr 1.25rem;
|
||||
align-items: center;
|
||||
max-height: 3.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
min-height: 3.5rem;
|
||||
border-bottom: 1px solid $light-grey;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
|
||||
&--without-logo {
|
||||
grid-template-columns: 1fr 1.25rem;
|
||||
}
|
||||
|
||||
.webpage-metadata {
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
@ -24,7 +27,10 @@
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
color: #000;
|
||||
// height: 1rem;
|
||||
|
||||
&--without-logo {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&--hyperlink {
|
||||
font-weight: 400;
|
||||
|
@ -31,11 +31,19 @@ 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'));
|
||||
const [logoVisibility, setLogoVisibility] = useState<string | null>(
|
||||
localStorage.getItem('setLogoVisibility')
|
||||
const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
|
||||
localStorage.getItem('warningDataDialogAck') === null
|
||||
? true
|
||||
: localStorage.getItem('warningDataDialogAck') == 'true'
|
||||
? true
|
||||
: false
|
||||
);
|
||||
const [logoVisibility, setLogoVisibility] = useState<boolean>(
|
||||
localStorage.getItem('logoVisibility') === null
|
||||
? true
|
||||
: localStorage.getItem('logoVisibility') == 'true'
|
||||
? true
|
||||
: false
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -76,12 +84,23 @@ const Sidebar = () => {
|
||||
Wybierz aktywną kartę{" "}
|
||||
</button>
|
||||
</div> */}
|
||||
<header className="header">
|
||||
<header
|
||||
className={
|
||||
logoVisibility ? 'header' : 'header header--without-logo'
|
||||
}
|
||||
>
|
||||
<img
|
||||
src="../assets/logo-internet-czas-dzialac.svg"
|
||||
height={40}
|
||||
style={!logoVisibility ? { display: 'none' } : null}
|
||||
></img>
|
||||
<div className="webpage-metadata">
|
||||
<div
|
||||
className={
|
||||
logoVisibility
|
||||
? 'webpage-metadata'
|
||||
: 'webpage-metadata webpage-metadata--without-logo'
|
||||
}
|
||||
>
|
||||
{origin ? (
|
||||
<Fragment>
|
||||
<span>Analiza strony</span>
|
||||
@ -167,7 +186,7 @@ const Sidebar = () => {
|
||||
<section>
|
||||
{stolenDataView ? (
|
||||
<Fragment>
|
||||
{readWarningDataDialog != '1' ? (
|
||||
{warningDataDialogAck ? (
|
||||
<section className="warning-container">
|
||||
<span>
|
||||
<strong>Uwaga!</strong> Niekoniecznie każda
|
||||
@ -178,10 +197,10 @@ const Sidebar = () => {
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
setReadWarningDataDialog('1');
|
||||
setWarningDataDialogAck(false);
|
||||
localStorage.setItem(
|
||||
'readWarningDataDialog',
|
||||
'1'
|
||||
'warningDataDialogAck',
|
||||
false as unknown as string
|
||||
);
|
||||
}}
|
||||
>
|
||||
@ -206,8 +225,8 @@ const Sidebar = () => {
|
||||
setCookiesOnly={setCookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
||||
readWarningDataDialog={readWarningDataDialog}
|
||||
setReadWarningDataDialog={setReadWarningDataDialog}
|
||||
warningDataDialogAck={warningDataDialogAck}
|
||||
setWarningDataDialogAck={setWarningDataDialogAck}
|
||||
logoVisibility={logoVisibility}
|
||||
setLogoVisibility={setLogoVisibility}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user