client: theme dropdown

AdguardTeam · Jan 13, 2023 · 8abe4f6 · 8abe4f6
1 parent cd76a30
commit 8abe4f6
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 29 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -298,6 +298,9 @@
     "blocking_mode_nxdomain": "NXDOMAIN: Respond with NXDOMAIN code",
     "blocking_mode_null_ip": "Null IP: Respond with zero IP address (0.0.0.0 for A; :: for AAAA)",
     "blocking_mode_custom_ip": "Custom IP: Respond with a manually set IP address",
+    "theme_auto": "Auto",
+    "theme_light": "Light",
+    "theme_dark": "Dark",
     "upstream_dns_client_desc": "If you keep this field empty, AdGuard Home will use the servers configured in the <0>DNS settings</0>.",
     "tracker_source": "Tracker source",
     "source_label": "Source",

diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -363,18 +363,18 @@ export const changeLanguage = (lang) => async (dispatch) => {
     }
 };
 
-export const getLanguageRequest = createAction('GET_LANGUAGE_REQUEST');
-export const getLanguageFailure = createAction('GET_LANGUAGE_FAILURE');
-export const getLanguageSuccess = createAction('GET_LANGUAGE_SUCCESS');
+export const changeThemeRequest = createAction('CHANGE_THEME_REQUEST');
+export const changeThemeFailure = createAction('CHANGE_THEME_FAILURE');
+export const changeThemeSuccess = createAction('CHANGE_THEME_SUCCESS');
 
-export const getLanguage = () => async (dispatch) => {
-    dispatch(getLanguageRequest());
+export const changeTheme = (theme) => async (dispatch) => {
+    dispatch(changeThemeRequest());
     try {
-        const langSettings = await apiClient.getCurrentLanguage();
-        dispatch(getLanguageSuccess(langSettings.language));
+        await apiClient.changeTheme({ theme });
+        dispatch(changeThemeSuccess({ theme }));
     } catch (error) {
         dispatch(addErrorToast({ error }));
-        dispatch(getLanguageFailure());
+        dispatch(changeThemeFailure());
     }
 };
 

diff --git a/client/src/api/Api.js b/client/src/api/Api.js
@@ -224,21 +224,21 @@ class Api {
     }
 
     // Language
-    CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
 
-    CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
+    async changeLanguage(config) {
+        const profile = await this.getProfile();
+        profile.language = config.language;
 
-    getCurrentLanguage() {
-        const { path, method } = this.CURRENT_LANGUAGE;
-        return this.makeRequest(path, method);
+        return this.setProfile(profile);
     }
 
-    changeLanguage(config) {
-        const { path, method } = this.CHANGE_LANGUAGE;
-        const parameters = {
-            data: config,
-        };
-        return this.makeRequest(path, method, parameters);
+    // Theme
+
+    async changeTheme(config) {
+        const profile = await this.getProfile();
+        profile.theme = config.theme;
+
+        return this.setProfile(profile);
     }
 
     // DHCP
@@ -571,11 +571,22 @@ class Api {
     // Profile
     GET_PROFILE = { path: 'profile', method: 'GET' };
 
+    UPDATE_PROFILE = { path: 'profile/update', method: 'PUT' };
+
     getProfile() {
         const { path, method } = this.GET_PROFILE;
         return this.makeRequest(path, method);
     }
 
+    setProfile(data) {
+        const { path, method } = this.UPDATE_PROFILE;
+        const config = {
+            data,
+        };
+
+        return this.makeRequest(path, method, config);
+    }
+
     // DNS config
     GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };
 

diff --git a/client/src/components/ui/Footer.css b/client/src/components/ui/Footer.css
@@ -18,6 +18,11 @@
     align-items: center;
 }
 
+.footer__column--theme {
+    min-width: 220px;
+    margin-bottom: 0;
+}
+
 .footer__column--language {
     min-width: 220px;
     margin-bottom: 0;
@@ -49,6 +54,11 @@
     }
 
     .footer__column--language {
+        min-width: initial;
+        margin-left: 20px;
+    }
+
+    .footer__column--theme {
         min-width: initial;
         margin-left: auto;
     }

diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
+import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
 import { LANGUAGES } from '../../helpers/twosky';
 import i18n from '../../i18n';
 
 import Version from './Version';
 import './Footer.css';
 import './Select.css';
-import { setHtmlLangAttr } from '../../helpers/helpers';
+import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
+import { changeTheme } from '../../actions';
 
 const linksData = [
     {
@@ -29,6 +31,9 @@ const linksData = [
 
 const Footer = () => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const currentTheme = useSelector((state) => state.dashboard.theme);
 
     const getYear = () => {
         const today = new Date();
@@ -41,6 +46,12 @@ const Footer = () => {
         setHtmlLangAttr(value);
     };
 
+    const onThemeChanged = (event) => {
+        const { value } = event.target;
+        dispatch(changeTheme(value));
+        setUITheme(value);
+    };
+
     const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
             {t('copyright')} &copy; {getYear()}{' '}
@@ -66,6 +77,20 @@ const Footer = () => {
                         <div className="footer__column footer__column--links">
                             {renderLinks(linksData)}
                         </div>
+                        <div className="footer__column footer__column--theme">
+                            <select
+                                className="form-control select select--theme"
+                                value={currentTheme}
+                                onChange={onThemeChanged}
+                            >
+                                {Object.values(THEMES)
+                                    .map((theme) => (
+                                        <option key={theme} value={theme}>
+                                            {t(`theme_${theme}`)}
+                                        </option>
+                                    ))}
+                            </select>
+                        </div>
                         <div className="footer__column footer__column--language">
                             <select
                                 className="form-control select select--language"

diff --git a/client/src/components/ui/Select.css b/client/src/components/ui/Select.css
@@ -1,3 +1,20 @@
+.select.select--theme {
+    height: 45px;
+    padding: 0 32px 2px 11px;
+    outline: 0;
+    border-color: rgba(69, 79, 94, 0.12);
+    background-image: url("./svg/chevron-down.svg");
+    background-repeat: no-repeat;
+    background-position: right 9px center;
+    background-size: 17px 20px;
+    appearance: none;
+    cursor: pointer;
+}
+
+.select--theme::-ms-expand {
+    opacity: 0;
+}
+
 .select.select--language {
     height: 45px;
     padding: 0 32px 2px 33px;

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -227,6 +227,14 @@ export const BLOCKING_MODES = {
     custom_ip: 'custom_ip',
 };
 
+// Note that translation strings contain these modes (theme_CONSTANT)
+// i.e. theme_auto, theme_light.
+export const THEMES = {
+    auto: 'auto',
+    dark: 'dark',
+    light: 'light',
+};
+
 export const WHOIS_ICONS = {
     location: 'location',
     orgname: 'network',

diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
@@ -670,6 +670,15 @@ export const setHtmlLangAttr = (language) => {
     window.document.documentElement.lang = language;
 };
 
+/**
+ * Sets UI theme.
+ *
+ * @param theme
+ */
+export const setUITheme = (theme) => {
+    console.log(`set ui theme: ${theme}`);
+};
+
 /**
  * @param values {object}
  * @returns {object}

diff --git a/client/src/reducers/dashboard.js b/client/src/reducers/dashboard.js
@@ -112,14 +112,6 @@ const dashboard = handleActions(
             return newState;
         },
 
-        [actions.getLanguageSuccess]: (state, { payload }) => {
-            const newState = {
-                ...state,
-                language: payload,
-            };
-            return newState;
-        },
-
         [actions.getClientsRequest]: (state) => ({
             ...state,
             processingClients: true,
@@ -148,8 +140,13 @@ const dashboard = handleActions(
         [actions.getProfileSuccess]: (state, { payload }) => ({
             ...state,
             name: payload.name,
+            theme: payload.theme,
             processingProfile: false,
         }),
+        [actions.changeThemeSuccess]: (state, { payload }) => ({
+            ...state,
+            theme: payload.theme,
+        }),
     },
     {
         processing: true,
@@ -168,6 +165,7 @@ const dashboard = handleActions(
         autoClients: [],
         supportedTags: [],
         name: '',
+        theme: 'auto',
         checkUpdateFlag: false,
     },
 );