Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

feat: Added languages to dropdown in settings #4738

Merged
cwhitten merged 8 commits into from
Nov 10, 2020
Merged

feat: Added languages to dropdown in settings #4738

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3a401e4
Added languages to dropdown in settings
GeoffCoxMSFT Nov 10, 2020
124f896
Fixed typo in zh-Hant key
GeoffCoxMSFT Nov 10, 2020
b6c172d
Merge branch 'main' into gcox/enable-languages
GeoffCoxMSFT Nov 10, 2020
e1b8e7e
Moved englishName to comments
GeoffCoxMSFT Nov 10, 2020
c7bb728
Merge branch 'gcox/enable-languages' of https://github.com/microsoft/…
GeoffCoxMSFT Nov 10, 2020
734e66f
Merge branch 'main' into gcox/enable-languages
GeoffCoxMSFT Nov 10, 2020
50a23a7
log over error to allow tests to run
GeoffCoxMSFT Nov 10, 2020
396e435
Merge branch 'gcox/enable-languages' of https://github.com/microsoft/…
GeoffCoxMSFT Nov 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,27 @@ const AppSettings: React.FC<RouteComponentProps> = () => {

const renderElectronSettings = isElectron();

const languageOptions = [{ key: 'en-US', text: formatMessage('English (US)') }];
const languageOptions = [
Copy link
Contributor

@hatpick hatpick Nov 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be moved to the outside of the component code.

{ key: 'en-US', text: 'English (US)' },
{ key: 'cs', text: 'Čeština‎ Czech' }, //Czech
{ key: 'de', text: 'Deutsch‎' }, //German
{ key: 'es', text: 'Español‎' }, //Spanish
{ key: 'fr', text: 'Français‎' }, //French
{ key: 'hu', text: 'Magyar‎' }, //Hungarian
{ key: 'it', text: 'Italiano‎' }, //Italian
{ key: 'ja', text: '日本語‎' }, //Japanese
{ key: 'ko', text: '한국어‎' }, //Korean
{ key: 'nl', text: 'Nederlands‎' }, //Dutch (Netherlands)
{ key: 'pl', text: 'Polski‎' }, //Polish
{ key: 'pt-BR', text: 'Português (Brasil)‎' }, //Portuguese (Brazil)
{ key: 'pt-PT', text: 'Português (Portugal)‎' }, //Portuguese (Portugal)
{ key: 'ru', text: 'Русский‎' }, //Russian
{ key: 'sv', text: 'Svenska‎' }, //Swedish
{ key: 'tr', text: 'Türkçe‎' }, //Turkish
{ key: 'zh-Hans', text: '中文(简体)‎' }, //Chinese(Simplified)
{ key: 'zh-Hant', text: '中文(繁體)' }, //Chinese(Traditional)
];

if (process.env.NODE_ENV !== 'production') {
languageOptions.push({
key: 'en-US-pseudo',
Expand Down Expand Up @@ -148,6 +168,7 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
<h2>{formatMessage('Application Language')}</h2>
<SettingDropdown
description={formatMessage('This is the language used for Composer’s user interface.')}
dropdownWidth={200}
image={images.language}
options={languageOptions}
selected={userSettings.appLocale}
Expand Down
4 changes: 3 additions & 1 deletion Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ interface ISettingToggleProps {
title: string;
options: { key: string; text: string }[];
selected?: string;
dropdownWidth?: number;
}

const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
const { id, title, description, image, onChange, options, selected } = props;
const { id, title, description, dropdownWidth, image, onChange, options, selected } = props;
const uniqueId = useId(kebabCase(title));

return (
Expand All @@ -38,6 +39,7 @@ const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
</div>
<div>
<Dropdown
dropdownWidth={dropdownWidth}
id={id || uniqueId}
options={options}
selectedKey={selected}
Expand Down