added languages menu options

frontend/src/static/js/components/page-layout/PageHeader/HeaderRight.jsx

@@ -13,8 +13,37 @@ import {
   UserThumbnail,
 } from '../../_shared';
 import { HeaderThemeSwitcher } from './HeaderThemeSwitcher';
+import { LanguageOptions } from './LanguageOptions';
 
-function headerPopupPages(user, popupNavItems, hasHeaderThemeSwitcher) {
+const OpenThemeSwitcher = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <span>
+        <CircleIconButton className="menu-item-icon change-page" data-page-id="main" aria-label="{t('Switch theme')}">
+          <i className="material-icons">arrow_back</i>
+        </CircleIconButton>
+      </span>
+      <span>{t('Switch theme')}</span>
+    </div>
+  );
+};
+
+const OpenLanguageOptions = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <span>
+        <CircleIconButton className="menu-item-icon change-page" data-page-id="main" aria-label="Language">
+          <i className="material-icons">arrow_back</i>
+        </CircleIconButton>
+      </span>
+      <span>{t('Language')}</span>
+    </div>
+  );
+};
+
+function headerPopupPages(user, popupNavItems, hasHeaderThemeSwitcher, hasTranslations) {
   const pages = {
     main: null,
   };
@@ -65,14 +94,7 @@ function headerPopupPages(user, popupNavItems, hasHeaderThemeSwitcher) {
     pages['switch-theme'] = (
       <div>
         <PopupTop>
-          <div>
-            <span>
-              <CircleIconButton className="menu-item-icon change-page" data-page-id="main" aria-label="Switch theme">
-                <i className="material-icons">arrow_back</i>
-              </CircleIconButton>
-            </span>
-            <span>Switch theme</span>
-          </div>
+          <OpenThemeSwitcher />
         </PopupTop>
         <PopupMain>
           <HeaderThemeSwitcher />
@@ -81,15 +103,29 @@ function headerPopupPages(user, popupNavItems, hasHeaderThemeSwitcher) {
     );
   }
 
+  if (hasTranslations) {
+    pages['language'] = (
+      <div>
+        <PopupTop>
+          <OpenLanguageOptions />
+        </PopupTop>
+        <PopupMain>
+          <LanguageOptions />
+        </PopupMain>
+      </div>
+    );
+  }
+
   return pages;
 }
 
 function UploadMediaButton({ user, links }) {
+  const { t } = useTranslation();
   return !user.is.anonymous && user.can.addMedia ? (
     <div className={'hidden-only-in-small'}>
-      <CircleIconButton type="link" href={links.user.addMedia} title="Upload media">
+      <CircleIconButton type="link" href={links.user.addMedia} title="{t('Upload media')}">
         <MaterialIcon type="video_call" />
-        <span className="hidden-txt">Upload media</span>
+        <span className="hidden-txt">{t('Upload media')}</span>
       </CircleIconButton>
     </div>
   ) : null;
@@ -106,9 +142,9 @@ function LoginButton({ user, link, hasHeaderThemeSwitcher }) {
         className={
           'button-link sign-in' + (hasHeaderThemeSwitcher ? ' hidden-only-in-small' : ' hidden-only-in-extra-small')
         }
-        title="{t('Sign in')}"
+        title="{t('SIGN IN')}"
       >
-        {t('Sign in')}
+        {t('SIGN IN')}
       </a>
     </div>
   ) : null;
@@ -125,9 +161,9 @@ function RegisterButton({ user, link, hasHeaderThemeSwitcher }) {
           'button-link register-link' +
           (hasHeaderThemeSwitcher ? ' hidden-only-in-small' : ' hidden-only-in-extra-small')
         }
-        title="{t('Register')}"
+        title="{t('REGISTER')}"
       >
-        {t('Register')}
+        {t('REGISTER')}
       </a>
     </div>
   ) : null;
@@ -157,7 +193,9 @@ export function HeaderRight(props) {
                     <div
                       className={
                         (user.is.anonymous ? 'user-options' : 'user-thumb') +
-                        (!user.is.anonymous || header.hasThemeSwitcher ? '' : ' visible-only-in-extra-small')
+                        (!user.is.anonymous || header.hasThemeSwitcher || header.hasTranslations
+                          ? ''
+                          : ' visible-only-in-extra-small')
                       }
                     >
                       <PopupTrigger contentRef={popupContentRef}>
@@ -173,7 +211,12 @@ export function HeaderRight(props) {
                       <PopupContent contentRef={popupContentRef}>
                         <NavigationContentApp
                           initPage="main"
-                          pages={headerPopupPages(user, header.popupNavItems, header.hasThemeSwitcher)}
+                          pages={headerPopupPages(
+                            user,
+                            header.popupNavItems,
+                            header.hasThemeSwitcher,
+                            header.hasTranslations
+                          )}
                           pageChangeSelector={'.change-page'}
                           pageIdSelectorAttr={'data-page-id'}
                         />

frontend/src/static/js/components/page-layout/PageHeader/LanguageOptions.scss

@@ -0,0 +1,39 @@
+@import '../../../../css/includes/_variables.scss';
+@import '../../../../css/includes/_variables_dimensions.scss';
+
+.language-options {
+  position: relative;
+  width: 100%;
+  padding: 12px 0;
+}
+
+.language-option {
+  display: block;
+
+  button {
+    display: block;
+    width: 100%;
+    padding: 0 24px 0 64px;
+    line-height: 40px;
+    text-align: inherit;
+    color: inherit;
+    border: 0;
+    background: 0;
+
+    .material-icons {
+      margin-right: 16px;
+      color: var(--header-popup-menu-icon-color);
+    }
+
+    &:focus,
+    &:hover {
+      background-color: var(--in-popup-nav-menu-item-hover-bg-color);
+    }
+  }
+
+  &.selected-language {
+    button {
+      padding-left: 24px;
+    }
+  }
+}

frontend/src/static/js/components/page-layout/PageHeader/LanguageOptions.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BrowserCache } from '../../../utils/classes';
+import { SiteContext } from '../../../utils/contexts';
+import { enabled as langEnabled, labels as langLabels } from '../../../utils/languages';
+import { MaterialIcon } from '../../_shared';
+
+import './LanguageOptions.scss';
+
+interface LanguageOptionProps {
+  code: string;
+  label: string;
+  active: boolean;
+}
+
+export const LanguageOption: React.FC<LanguageOptionProps> = ({ code, label, active }) => {
+  const { i18n } = useTranslation();
+  const onClick = () => i18n.changeLanguage(code);
+  return (
+    <span className={'language-option' + (active ? ' selected-language' : '')}>
+      <button onClick={onClick}>
+        {active && <MaterialIcon type="check" />}
+        {label}
+      </button>
+    </span>
+  );
+};
+
+export const LanguageOptions: React.FC = () => {
+  const site = useContext(SiteContext);
+  const [browserCache, setBrowserCache] = useState(null);
+
+  const { i18n } = useTranslation();
+  const [languages, setLanguages] = useState<string[]>([]);
+  const [current, setCurrent] = useState<string>(i18n.language);
+
+  useEffect(() => {
+    // @ts-ignore
+    setBrowserCache(new BrowserCache('MediaCMS[' + site.id + '][language]', 86400));
+  }, [site.id]);
+
+  useEffect(() => {
+    setCurrent(i18n.language);
+    if (browserCache) {
+      // @ts-ignore
+      browserCache.set('code', i18n.language);
+    }
+  }, [i18n.language]);
+
+  useEffect(() => {
+    const lang: string[] = [];
+    for (let k in langEnabled) {
+      lang.push(langEnabled[k]);
+    }
+    setLanguages(lang);
+  }, []);
+
+  return (
+    <div className="language-options">
+      {languages.map((code) => (
+        <LanguageOption key={code} code={code} label={langLabels[code] || code} active={code === current} />
+      ))}
+    </div>
+  );
+};

frontend/src/static/js/components/page-layout/PageHeader/PageHeader.scss

@@ -196,7 +196,6 @@ $__button-link-horizontal-padding: 16;
   font-weight: 500;
   line-height: 1;
   display: block;
-  text-transform: uppercase;
 }
 
 .signin-icon-link {

frontend/src/static/js/utils/contexts/HeaderContext.js

@@ -1,4 +1,5 @@
 import React, { createContext } from 'react';
+import i18next from 'i18next';
 import { config as mediacmsConfig } from '../settings/config.js';
 
 const config = mediacmsConfig(window.MediaCMS);
@@ -8,6 +9,7 @@ const theme = config.theme;
 const user = config.member;
 
 const hasThemeSwitcher = theme.switch.enabled && 'header' === theme.switch.position;
+const hasTranslations = true;
 
 function popupTopNavItems() {
   const items = [];
@@ -17,7 +19,7 @@ function popupTopNavItems() {
       items.push({
         link: links.user.addMedia,
         icon: 'video_call',
-        text: 'Upload media',
+        text: i18next.t('Upload media'),
         itemAttr: {
           className: 'visible-only-in-small',
         },
@@ -27,7 +29,7 @@ function popupTopNavItems() {
         items.push({
           link: user.pages.media,
           icon: 'video_library',
-          text: 'My media',
+          text: i18next.t('My media'),
         });
       }
     }
@@ -35,7 +37,7 @@ function popupTopNavItems() {
     items.push({
       link: links.signout,
       icon: 'exit_to_app',
-      text: 'Sign out',
+      text: i18next.t('Sign out'),
     });
   }
 
@@ -50,7 +52,7 @@ function popupMiddleNavItems() {
       itemType: 'open-subpage',
       icon: 'brightness_4',
       iconPos: 'left',
-      text: 'Switch theme',
+      text: i18next.t('Switch theme'),
       buttonAttr: {
         className: 'change-page',
         'data-page-id': 'switch-theme',
@@ -58,6 +60,19 @@ function popupMiddleNavItems() {
     });
   }
 
+  if (hasTranslations) {
+    items.push({
+      itemType: 'open-subpage',
+      icon: 'language',
+      iconPos: 'left',
+      text: i18next.t('Language'),
+      buttonAttr: {
+        className: 'change-page',
+        'data-page-id': 'language',
+      },
+    });
+  }
+
   if (user.is.anonymous) {
     if (user.can.login) {
       items.push({
@@ -77,7 +92,7 @@ function popupMiddleNavItems() {
         itemType: 'link',
         icon: 'person_add',
         iconPos: 'left',
-        text: 'Register',
+        text: i18next.t('Register'),
         link: links.register,
         linkAttr: {
           className: hasThemeSwitcher ? 'visible-only-in-small' : 'visible-only-in-extra-small',
@@ -88,14 +103,14 @@ function popupMiddleNavItems() {
     items.push({
       link: links.user.editProfile,
       icon: 'brush',
-      text: 'Edit profile',
+      text: i18next.t('Edit profile'),
     });
 
     if (user.can.changePassword) {
       items.push({
         link: links.changePassword,
         icon: 'lock',
-        text: 'Change password',
+        text: i18next.t('Change password'),
       });
     }
   }
@@ -110,7 +125,7 @@ function popupBottomNavItems() {
     items.push({
       link: links.admin,
       icon: 'admin_panel_settings',
-      text: 'MediaCMS administration',
+      text: `MediaCMS ${i18next.t('administration')}`,
     });
   }
 
@@ -119,6 +134,7 @@ function popupBottomNavItems() {
 
 export const HeaderContext = createContext({
   hasThemeSwitcher,
+  hasTranslations,
   popupNavItems: {
     top: popupTopNavItems(),
     middle: popupMiddleNavItems(),
@@ -126,4 +142,4 @@ export const HeaderContext = createContext({
   },
 });
 
-export const HeaderConsumer = HeaderContext.Consumer;
+export const HeaderConsumer = HeaderContext.Consumer;