fix: restore dropdown and widen sidebar (microsoft#5093)

* Update AppSettings.tsx * remove unneeded image * fix sidebar CSS * restore SettingsDropdown
lei9444 · Dec 4, 2020 · 64b4825 · 64b4825
1 parent 0e7c0f1
commit 64b4825
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/Composer/packages/client/src/components/AppComponents/SideBar.tsx b/Composer/packages/client/src/components/AppComponents/SideBar.tsx
@@ -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};

diff --git a/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx b/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
@@ -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}
@@ -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>

diff --git a/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx b/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx
@@ -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 }[];
@@ -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>
   );
 };