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