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

fix: app settings - language settings dropdown #7242

Merged
hatpick merged 3 commits into from
Apr 21, 2021
Merged

fix: app settings - language settings dropdown #7242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7acbbd0
fix ux issues
sorgh Apr 21, 2021
fb0fc27
Merge branch 'main' into sorgh/7214
hatpick Apr 21, 2021
37fb693
Merge branch 'main' into sorgh/7214
hatpick Apr 21, 2021
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
6 changes: 3 additions & 3 deletions 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 @@ -100,13 +100,13 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
<div css={container}>
<section css={section}>
<section css={section}>
<h2>{formatMessage('Application Language settings')}</h2>
<h2>{formatMessage('Application language settings')}</h2>
<SettingDropdown
description={formatMessage('This is the language used for Composer’s user interface.')}
id={'appLanguage'}
label={formatMessage('Composer language')}
options={languageOptions}
selected={userSettings.appLocale}
title={formatMessage('Application language')}
tooltip={formatMessage('This is the language used for Composer’s user interface.')}
onChange={onLocaleChange}
/>
</section>
Expand Down
57 changes: 34 additions & 23 deletions 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 @@ -3,54 +3,65 @@

/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';
import { useId } from '@uifabric/react-hooks';
import kebabCase from 'lodash/kebabCase';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import formatMessage from 'format-message';
import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
import React from 'react';

import * as styles from './styles';

interface ISettingToggleProps {
description: React.ReactChild;
const defaultItemHeight = 36;
const defaultItemCountBeforeScroll = 10;
const defaultDropdownWidth = 300;

type Props = {
label: string;
options: IDropdownOption[];
tooltip?: React.ReactNode;
id?: string;
onChange: (key: string) => void;
title: string;
options: { key: string; text: string }[];
selected?: string;
dropdownWidth?: number;
}
width?: number;
itemCountBeforeScroll?: number;
onChange: (key: string) => void;
};

const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
const { id, title, onChange, options, selected } = props;
const uniqueId = useId(kebabCase(title));
export const SettingDropdown: React.FC<Props> = ({
id,
label,
tooltip,
width = defaultDropdownWidth,
itemCountBeforeScroll = defaultItemCountBeforeScroll,
onChange,
options,
selected,
}) => {
const uniqueId = useId(kebabCase(label));

const onRenderLabel = (props) => {
const renderLabel = React.useCallback(({ label: dropdownLabel }) => {
return (
<div css={styles.labelContainer}>
<div css={styles.customerLabel}> {props.label} </div>
<TooltipHost content={props.label}>
<div css={styles.customerLabel}>{dropdownLabel}</div>
<TooltipHost content={tooltip ?? dropdownLabel}>
<Icon iconName="Unknown" styles={styles.icon} />
</TooltipHost>
</div>
);
};
}, []);

return (
<div css={styles.settingsContainer}>
<Dropdown
calloutProps={{ calloutMaxHeight: defaultItemHeight * itemCountBeforeScroll }}
id={id || uniqueId}
label={formatMessage('Composer language is the language of Composer UI')}
label={label}
options={options}
selectedKey={selected}
styles={{ root: { width: '100%' } }}
styles={{ root: { width } }}
onChange={(_e, option) => onChange(option?.key?.toString() ?? '')}
onRenderLabel={onRenderLabel}
onRenderLabel={renderLabel}
/>
</div>
);
};

export { SettingDropdown };
11 changes: 4 additions & 7 deletions Composer/packages/server/src/locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,11 +323,8 @@
"app_id_password_424f613a": {
"message": "App Id / Password"
},
"application_language_f100f3e0": {
"message": "Application language"
},
"application_language_settings_26f82dfc": {
"message": "Application Language settings"
"application_language_settings_85b1f06": {
"message": "Application language settings"
},
"application_settings_39e840c6": {
"message": "Application Settings"
Expand Down Expand Up @@ -689,8 +686,8 @@
"composer_is_up_to_date_9118257d": {
"message": "Composer is up to date."
},
"composer_language_is_the_language_of_composer_ui_c23a57b6": {
"message": "Composer language is the language of Composer UI"
"composer_language_f958f3bf": {
"message": "Composer language"
},
"composer_logo_ba2048a0": {
"message": "Composer Logo"
Expand Down