Redesign #3

Closed
arek wants to merge 15 commits from redesign into master
4 changed files with 76 additions and 53 deletions
Showing only changes of commit 13f6eb07dc - Show all commits

View File

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

View File

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

View File

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

View File

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