Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-28 01:29:44 +02:00
Code Issues Releases Activity

feat: Add language selector

Browse source 
Closes #212
This commit is contained in:
Maksim Eltyshev 2022-07-26 12:26:42 +02:00
parent a1cb04ea8e
commit 1329da3fe5
31 changed files with 277 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

41
client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx
View file

@ -1,8 +1,9 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Divider, Header, Tab } from 'semantic-ui-react';
import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
import locales from '../../../locales';
import AvatarEditPopup from './AvatarEditPopup';
import User from '../../User';
import UserInformationEdit from '../../UserInformationEdit';
@ -20,12 +21,14 @@ const AccountPane = React.memo(
avatarUrl,
phone,
organization,
language,
isAvatarUpdating,
usernameUpdateForm,
emailUpdateForm,
passwordUpdateForm,
onUpdate,
onAvatarUpdate,
onLanguageUpdate,
onUsernameUpdate,
onUsernameUpdateMessageDismiss,
onEmailUpdate,
@ -41,6 +44,13 @@ const AccountPane = React.memo(
});
}, [onUpdate]);
const handleLanguageChange = useCallback(
(_, { value }) => {
onLanguageUpdate(value === 'auto' ? null : value); // FIXME: hack
},
[onLanguageUpdate],
);
return (
<Tab.Pane attached={false} className={styles.wrapper}>
<AvatarEditPopup
@ -60,6 +70,32 @@ const AccountPane = React.memo(
}}
onUpdate={onUpdate}
/>
<Divider horizontal section>
<Header as="h4">
{t('common.language', {
context: 'title',
})}
</Header>
</Divider>
<Dropdown
fluid
selection
options={[
{
key: 'auto',
value: 'auto',
text: t('common.detectAutomatically'),
},
...locales.map((locale) => ({
key: locale.language,
value: locale.language,
flag: locale.country,
text: locale.name,
})),
]}
value={language || 'auto'}
onChange={handleLanguageChange}
/>
<Divider horizontal section>
<Header as="h4">
{t('common.authentication', {
@ -129,6 +165,7 @@ AccountPane.propTypes = {
avatarUrl: PropTypes.string,
phone: PropTypes.string,
organization: PropTypes.string,
language: PropTypes.string,
isAvatarUpdating: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
usernameUpdateForm: PropTypes.object.isRequired,
@ -137,6 +174,7 @@ AccountPane.propTypes = {
/* eslint-enable react/forbid-prop-types */
onUpdate: PropTypes.func.isRequired,
onAvatarUpdate: PropTypes.func.isRequired,
onLanguageUpdate: PropTypes.func.isRequired,
onUsernameUpdate: PropTypes.func.isRequired,
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
onEmailUpdate: PropTypes.func.isRequired,
@ -150,6 +188,7 @@ AccountPane.defaultProps = {
avatarUrl: undefined,
phone: undefined,
organization: undefined,
language: undefined,
};
export default AccountPane;

7
client/src/components/UserSettingsModal/UserSettingsModal.jsx
View file

@ -14,6 +14,7 @@ const UserSettingsModal = React.memo(
avatarUrl,
phone,
organization,
language,
subscribeToOwnCards,
isAvatarUpdating,
usernameUpdateForm,
@ -21,6 +22,7 @@ const UserSettingsModal = React.memo(
passwordUpdateForm,
onUpdate,
onAvatarUpdate,
onLanguageUpdate,
onUsernameUpdate,
onUsernameUpdateMessageDismiss,
onEmailUpdate,
@ -44,12 +46,14 @@ const UserSettingsModal = React.memo(
avatarUrl={avatarUrl}
phone={phone}
organization={organization}
language={language}
isAvatarUpdating={isAvatarUpdating}
usernameUpdateForm={usernameUpdateForm}
emailUpdateForm={emailUpdateForm}
passwordUpdateForm={passwordUpdateForm}
onUpdate={onUpdate}
onAvatarUpdate={onAvatarUpdate}
onLanguageUpdate={onLanguageUpdate}
onUsernameUpdate={onUsernameUpdate}
onUsernameUpdateMessageDismiss={onUsernameUpdateMessageDismiss}
onEmailUpdate={onEmailUpdate}
@ -92,6 +96,7 @@ UserSettingsModal.propTypes = {
avatarUrl: PropTypes.string,
phone: PropTypes.string,
organization: PropTypes.string,
language: PropTypes.string,
subscribeToOwnCards: PropTypes.bool.isRequired,
isAvatarUpdating: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
@ -101,6 +106,7 @@ UserSettingsModal.propTypes = {
/* eslint-enable react/forbid-prop-types */
onUpdate: PropTypes.func.isRequired,
onAvatarUpdate: PropTypes.func.isRequired,
onLanguageUpdate: PropTypes.func.isRequired,
onUsernameUpdate: PropTypes.func.isRequired,
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
onEmailUpdate: PropTypes.func.isRequired,
@ -115,6 +121,7 @@ UserSettingsModal.defaultProps = {
avatarUrl: undefined,
phone: undefined,
organization: undefined,
language: undefined,
};
export default UserSettingsModal;