Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: restore dropdown and widen sidebar #5093

Merged
merged 4 commits into from
Dec 4, 2020
Merged

fix: restore dropdown and widen sidebar #5093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
96fe5e6
Update AppSettings.tsx
beyackle Dec 4, 2020
bcd95af
remove unneeded image
beyackle Dec 4, 2020
187b135
fix sidebar CSS
beyackle Dec 4, 2020
856f5a5
restore SettingsDropdown
beyackle Dec 4, 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
2 changes: 1 addition & 1 deletion Composer/packages/client/src/components/AppComponents/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const globalNav = css`
`;

const sideBar = (isExpand: boolean) => css`
width: ${isExpand ? '175' : '48'}px;
width: ${isExpand ? '200' : '48'}px;
background-color: ${NeutralColors.gray20};
height: 100%;
border-right: 1px solid ${NeutralColors.gray50};
Expand Down
22 changes: 10 additions & 12 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 @@ -93,6 +93,16 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
return (
<div css={container}>
<section css={section}>
<section css={section}>
<h2>{formatMessage('Application Language settings')}</h2>
<SettingDropdown
description={formatMessage('This is the language used for Composer’s user interface.')}
options={languageOptions}
selected={userSettings.appLocale}
title={formatMessage('Application language')}
onChange={onLocaleChange}
/>
</section>
<h2>{formatMessage('Onboarding')}</h2>
<SettingToggle
checked={!complete}
Expand Down Expand Up @@ -172,18 +182,6 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
onToggle={onCodeEditorChange('wordWrap')}
/>
</section>
<section css={section}>
<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}
title={formatMessage('Application language')}
onChange={onLocaleChange}
/>
</section>
<section css={section}>
<h2>{formatMessage('Application Updates')}</h2>
<Suspense fallback={<div />}>{renderElectronSettings && <ElectronSettings />}</Suspense>
Expand Down
45 changes: 24 additions & 21 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 @@ -4,17 +4,18 @@
/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';
import { Label } from 'office-ui-fabric-react/lib/Label';
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 { Icon } from 'office-ui-fabric-react/lib/Icon';
import formatMessage from 'format-message';

import * as styles from './styles';

interface ISettingToggleProps {
description: React.ReactChild;
id?: string;
image: string;
onChange: (key: string) => void;
title: string;
options: { key: string; text: string }[];
Expand All @@ -23,29 +24,31 @@ interface ISettingToggleProps {
}

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

const onRenderLabel = (props) => {
return (
<div css={styles.labelContainer}>
<div css={styles.customerLabel}> {props.label} </div>
<TooltipHost content={props.label}>
<Icon iconName="Unknown" styles={styles.icon} />
</TooltipHost>
</div>
);
};

return (
<div css={styles.settingsContainer}>
<div aria-hidden="true" css={styles.image} role="presentation">
{image && <img aria-hidden alt={''} src={image} />}
</div>
<div css={styles.settingsContent}>
<Label htmlFor={id || uniqueId} styles={{ root: { padding: 0 } }}>
{title}
</Label>
<p css={styles.settingsDescription}>{description}</p>
</div>
<div>
<Dropdown
dropdownWidth={dropdownWidth}
id={id || uniqueId}
options={options}
selectedKey={selected}
onChange={(_e, option) => onChange(option?.key?.toString() ?? '')}
/>
</div>
<Dropdown
id={id || uniqueId}
label={formatMessage('Composer language is the language of Composer UI')}
options={options}
selectedKey={selected}
styles={{ root: { width: '100%' } }}
onChange={(_e, option) => onChange(option?.key?.toString() ?? '')}
onRenderLabel={onRenderLabel}
/>
</div>
);
};
Expand Down