icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Redesign #3

Closed
arek wants to merge 15 commits from redesign into master
pull from: redesign
merge into: icd:master
Conversation 0 Commits 15 Files Changed 61 +76 -53
4 changed files with 76 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 13f6eb07dc - Show all commits

4
options.scss
View File

@ -9,7 +9,7 @@
}
fieldset {
padding: 0.5rem 0;
padding: 0.5rem 0 1rem;
border: none;
display: flex;
flex-flow: column;
@ -20,7 +20,7 @@
}
.input-container {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
}
#minValueLength {

62
options.tsx
View File

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

16
sidebar/sidebar.scss
View File

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

45
sidebar/sidebar.tsx
View File

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