feat: update global font settings (microsoft#5926)

rvinothrajendran · Feb 25, 2021 · 7896dd4 · 7896dd4
1 parent 229953e
commit 7896dd4
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 18 deletions.
diff --git a/...r/packages/client/src/pages/design/DebugPanel/TabExtensions/WebchatLog/WebchatLogItem.tsx b/...r/packages/client/src/pages/design/DebugPanel/TabExtensions/WebchatLog/WebchatLogItem.tsx
@@ -4,16 +4,24 @@
 /** @jsx jsx */
 import { DirectLineLog } from '@bfc/shared';
 import { jsx } from '@emotion/core';
-import { SharedColors, FontSizes, NeutralColors } from '@uifabric/fluent-theme';
+import { SharedColors, NeutralColors } from '@uifabric/fluent-theme';
+
+import { getDefaultFontSettings } from '../../../../../recoilModel/utils/fontUtil';
 
 export interface WebchatLogItemProps {
   item: DirectLineLog;
 }
 
 export const WebchatLogItem: React.FC<WebchatLogItemProps> = ({ item }) => {
+  const DEFAULT_FONT_SETTINGS = getDefaultFontSettings();
   return (
     <div
-      css={{ padding: '8px 0px', fontSize: FontSizes.size14, fontFamily: 'Consolas', color: `${NeutralColors.black}` }}
+      css={{
+        padding: '8px 0px',
+        fontSize: DEFAULT_FONT_SETTINGS.fontSize,
+        fontFamily: DEFAULT_FONT_SETTINGS.fontFamily,
+        color: `${NeutralColors.black}`,
+      }}
       data-testid="Webchat-LogItem"
     >
       <div data-testid="LogItem__Header">

diff --git a/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx b/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
@@ -18,7 +18,7 @@ import { onboardingState, userSettingsState, dispatcherState } from '../../../re
 import { container, section } from './styles';
 import { SettingToggle } from './SettingToggle';
 import { SettingDropdown } from './SettingDropdown';
-// import { FontSettings } from './fontSettings';
+import { FontSettings } from './fontSettings';
 import * as images from './images';
 import { PreviewFeatureToggle } from './PreviewFeatureToggle';
 
@@ -182,15 +182,15 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
           title={formatMessage('Sentence wrap')}
           onToggle={onCodeEditorChange('wordWrap')}
         />
-        {/* <FontSettings
+        <FontSettings
           description={formatMessage('Font settings used in the text editors.')}
           fontFamily={userSettings.codeEditor.fontSettings.fontFamily}
           fontSize={userSettings.codeEditor.fontSettings.fontSize}
           fontWeight={userSettings.codeEditor.fontSettings.fontWeight}
           image={images.wordWrap}
           title={formatMessage('Font settings')}
           onChange={onCodeEditorChange('fontSettings')}
-        /> */}
+        />
       </section>
       <section css={section}>
         <h2>{formatMessage('Application Updates')}</h2>

diff --git a/Composer/packages/client/src/pages/setting/app-settings/fontSettings.tsx b/Composer/packages/client/src/pages/setting/app-settings/fontSettings.tsx
@@ -11,8 +11,11 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import formatMessage from 'format-message';
 
+import { getDefaultFontSettings } from '../../../recoilModel/utils/fontUtil';
+
 import * as styles from './styles';
 
+const DEFAULT_FONT_SETTINGS = getDefaultFontSettings();
 interface IFontSettingsProps {
   id?: string;
   description: React.ReactChild;
@@ -45,23 +48,23 @@ const FontSettings: React.FC<IFontSettingsProps> = (props) => {
           label={formatMessage('Font family')}
           value={fontFamily}
           onChange={(_e, val) => {
-            onChange({ fontFamily: String(val || ''), fontSize, fontWeight });
+            onChange({ fontFamily: String(val || DEFAULT_FONT_SETTINGS.fontFamily), fontSize, fontWeight });
           }}
         />
         <TextField
           data-testid="FontSize"
           label={formatMessage('Font size')}
           value={fontSize}
           onChange={(_e, val) => {
-            onChange({ fontSize: String(val || ''), fontFamily, fontWeight });
+            onChange({ fontSize: String(val || DEFAULT_FONT_SETTINGS.fontSize), fontFamily, fontWeight });
           }}
         />
         <TextField
           data-testid="FontWeight"
           label={formatMessage('Font weight')}
           value={fontWeight}
           onChange={(_e, val) => {
-            onChange({ fontWeight: Number(val || ''), fontSize, fontFamily });
+            onChange({ fontWeight: Number(val || DEFAULT_FONT_SETTINGS.fontWeight), fontSize, fontFamily });
           }}
         />
       </Stack>

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/user.test.ts b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/user.test.ts
@@ -8,6 +8,7 @@ import jwtDecode from 'jwt-decode';
 import { userDispatcher } from '../user';
 import { UserSettingsPayload } from '../../types';
 import { DEFAULT_USER_SETTINGS } from '../../utils';
+import { getDefaultFontSettings } from '../../utils/fontUtil';
 import { userSettingsState, currentUserState, CurrentUser, dispatcherState } from '../../atoms/appState';
 import { renderRecoilHook } from '../../../../__tests__/testUtils';
 import { getUserTokenFromCache, loginPopup } from '../../../utils/auth';
@@ -157,11 +158,7 @@ describe('user dispatcher', () => {
         lineNumbers: false,
         wordWrap: false,
         minimap: false,
-        fontSettings: {
-          fontFamily: 'Courier New',
-          fontSize: '18px',
-          fontWeight: '500',
-        },
+        fontSettings: getDefaultFontSettings(),
       },
       propertyEditorWidth: 400,
       dialogNavWidth: 555,

diff --git a/Composer/packages/client/src/recoilModel/utils/fontUtil.ts b/Composer/packages/client/src/recoilModel/utils/fontUtil.ts
@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+const getOS = () => {
+  const userAgent = window.navigator.userAgent,
+    platform = window.navigator.platform,
+    macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
+    windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
+    iosPlatforms = ['iPhone', 'iPad', 'iPod'];
+  const os = {
+    isMacintosh: false,
+    isLinux: false,
+    isWindows: false,
+    isAndroid: false,
+    isiOS: false,
+  };
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os.isMacintosh = true;
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os.isiOS = true;
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os.isWindows = true;
+  } else if (/Android/.test(userAgent)) {
+    os.isAndroid = true;
+  } else if (/Linux/.test(platform)) {
+    os.isLinux = true;
+  }
+  return os;
+};
+
+// font align with vscode https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/editorOptions.ts#L3680
+const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace";
+const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace";
+const DEFAULT_LINUX_FONT_FAMILY = "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'";
+
+export const getDefaultFontSettings = () => {
+  const PLATFORM = getOS();
+  return {
+    fontFamily: PLATFORM.isMacintosh
+      ? DEFAULT_MAC_FONT_FAMILY
+      : PLATFORM.isLinux
+      ? DEFAULT_LINUX_FONT_FAMILY
+      : DEFAULT_WINDOWS_FONT_FAMILY,
+    fontWeight: 'normal',
+    fontSize: '14px',
+    lineHeight: 0,
+    letterSpacing: 0,
+  };
+};
diff --git a/Composer/packages/client/src/recoilModel/utils/index.ts b/Composer/packages/client/src/recoilModel/utils/index.ts
@@ -7,6 +7,10 @@ import merge from 'lodash/merge';
 import storage from '../../utils/storage';
 import { isElectron } from '../../utils/electronUtil';
 
+import { getDefaultFontSettings } from './fontUtil';
+
+const DEFAULT_FONT_SETTINGS = getDefaultFontSettings();
+
 export const DEFAULT_USER_SETTINGS = {
   appUpdater: {
     autoDownload: false,
@@ -16,11 +20,7 @@ export const DEFAULT_USER_SETTINGS = {
     lineNumbers: false,
     wordWrap: false,
     minimap: false,
-    fontSettings: {
-      fontFamily: 'Courier New',
-      fontSize: '18px',
-      fontWeight: '500',
-    },
+    fontSettings: DEFAULT_FONT_SETTINGS,
   },
   propertyEditorWidth: 400,
   dialogNavWidth: 180,