daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull request: add UI theme controls

Browse Source 
Updates #5620

Squashed commit of the following:

commit a7095b8ba35c34d333b0bbe772ac02a4ba90fbfd
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Mar 24 17:23:27 2023 +0300

    fix icon

commit ea565f152a1ce4ad8797cf36cacdfd67146a125d
Merge: 5ebb20d2 67c9abe1
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Mar 24 17:20:42 2023 +0300

    Merge branch 'master' into AG-20691

commit 5ebb20d298735982f3c547c81ade4384f4f62196
Merge: 41b0d597 0bc3ef89
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Mar 24 14:37:05 2023 +0300

    Merge branch 'master' into AG-20691

commit 41b0d597a68006397a7561dfffb1fb51068ded2c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Mar 24 14:20:20 2023 +0300

    fix string

commit 775afb99fb5ffd17118becba4f1e83d4ce77be48
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Mar 23 19:03:45 2023 +0300

    client: add ui theme controls
This commit is contained in:
Ildar Kamalov
2023-03-24 17:28:31 +03:00
parent 67c9abe119
commit d859a33787
8 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
client/src/components/ui/Footer.js
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames';
import cn from 'classnames';
import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
import { LANGUAGES } from '../../helpers/twosky';
@@ -55,15 +55,13 @@ const Footer = () => {
setHtmlLangAttr(value);
};
const onThemeChanged = (event) => {
const { value } = event.target;
dispatch(changeTheme(value));
};
const onThemeChangedLocal = (event) => {
const { value } = event.target;
setUITheme(value);
setCurrentThemeLocal(value);
const onThemeChange = (value) => {
if (isLoggedIn) {
dispatch(changeTheme(value));
} else {
setUITheme(value);
setCurrentThemeLocal(value);
}
};
const renderCopyright = () => <div className="footer__column">
@@ -76,41 +74,53 @@ const Footer = () => {
const renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
key={name}
href={href}
className={classNames('footer__link', className)}
className={cn('footer__link', className)}
target="_blank"
rel="noopener noreferrer"
>
{t(name)}
</a>);
const themeSelectOptions = () => (
Object.values(THEMES)
.map((theme) => (
<option key={theme} value={theme}>
{t(`theme_${theme}`)}
</option>
))
);
const renderThemeButtons = () => {
const currentValue = isLoggedIn ? currentTheme : currentThemeLocal;
const renderThemeSelect = () => (
<select
className="form-control select select--theme"
value={currentTheme}
onChange={onThemeChanged}
>
{themeSelectOptions()}
</select>
);
const content = {
auto: {
desc: t('theme_auto_desc'),
icon: '#auto',
},
dark: {
desc: t('theme_dark_desc'),
icon: '#dark',
},
light: {
desc: t('theme_light_desc'),
icon: '#light',
},
};
const renderThemeSelectLocal = () => (
<select
className="form-control select select--theme"
value={currentThemeLocal}
onChange={onThemeChangedLocal}
>
{themeSelectOptions()}
</select>
);
return (
Object.values(THEMES)
.map((theme) => (
<button
key={theme}
type="button"
className="btn btn-sm btn-secondary footer__theme-button"
onClick={() => onThemeChange(theme)}
title={content[theme].desc}
>
<svg
className={cn(
'footer__theme-icon',
{ 'footer__theme-icon--active': currentValue === theme },
)}
>
<use xlinkHref={content[theme].icon} />
</svg>
</button>
))
);
};
return (
<>
@@ -121,7 +131,11 @@ const Footer = () => {
{renderLinks(linksData)}
</div>
<div className="footer__column footer__column--theme">
{isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
<div className="footer__themes">
<div className="btn-group">
{renderThemeButtons()}
</div>
</div>
</div>
<div className="footer__column footer__column--language">
<select