Implement font selection

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
+.mx_AppearanceUserSettingsTab .mx_Field {
-.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
     @mixin mx_Settings_fullWidthField;
 }
 
@@ -124,3 +123,14 @@ limitations under the License.
 .mx_SettingsTab_customFontSizeField {
     margin-left: calc($font-16px + 10px);
 }
+
+.mx_AppearanceUserSettingsTab_Advanced {
+    .mx_AppearanceUserSettingsTab_AdvancedToggle {
+        color: $accent-color;
+        margin-bottom: 16px;
+    }
+
+    .mx_AppearanceUserSettingsTab_systemFont {
+        margin-left: calc($font-16px + 10px);
+    }
+}

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -52,6 +52,9 @@ interface IState extends IThemeState {
     customThemeUrl: string,
     customThemeMessage: CustomThemeMessage,
     useCustomFontSize: boolean,
+    useSystemFont: boolean,
+    systemFont: string,
+    showAdvanced: boolean,
 }
 
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
@@ -67,6 +70,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
             useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
+            useSystemFont: SettingsStore.getValue("useSystemFont"),
+            systemFont: SettingsStore.getValue("systemFont"),
+            showAdvanced: false,
         };
     }
 
@@ -201,6 +207,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
         const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
+        const Field = sdk.getComponent("views.elements.Field");
 
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
@@ -280,6 +287,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private renderFontSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const Field = sdk.getComponent("views.elements.Field");
+
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
@@ -314,6 +323,49 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
+    private renderAdvancedSection() {
+        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const Field = sdk.getComponent("views.elements.Field");
+
+        const toggle = <div
+            className="mx_AppearanceUserSettingsTab_AdvancedToggle"
+            onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}
+        >
+            {this.state.showAdvanced ? "Hide advanced" : "Show advanced"}
+        </div>;
+
+        let advanced: React.ReactNode;
+
+        if (this.state.showAdvanced) {
+            advanced = <div>
+                <SettingsFlag
+                    name="useSystemFont"
+                    level={SettingLevel.DEVICE}
+                    useCheckbox={true}
+                    onChange={(checked) => this.setState({useSystemFont: checked})}
+                />
+                <Field
+                    className="mx_AppearanceUserSettingsTab_systemFont"
+                    label={SettingsStore.getDisplayName("systemFont")}
+                    onChange={(value) => {
+                        this.setState({
+                            systemFont: value.target.value,
+                        })
+
+                        SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
+                    }}
+                    tooltipContent="Set the name of a font installed on your system & Riot will attempt to use it."
+                    disabled={!this.state.useSystemFont}
+                    value={this.state.systemFont}
+                />
+            </div>;
+        }
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
+            {toggle}
+            {advanced}
+        </div>
+    }
+
     render() {
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
@@ -323,6 +375,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 </div>
                 {this.renderThemeSection()}
                 {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
+                {this.renderAdvancedSection()}
             </div>
         );
     }

src/dispatcher/actions.ts

@@ -69,4 +69,14 @@ export enum Action {
      * Opens the user menu (previously known as the top left menu). No additional payload information required.
      */
     ToggleUserMenu = "toggle_user_menu",
+
+    /**
+     * Sets the apps root font size. Should be used with UpdateFontSizePayload
+     */
+    UpdateFontSize = "update-font-size",
+
+    /**
+     * Sets a system font. Should be used with UpdateSystemFontPayload
+     */
+    UpdateSystemFont = "update-system-font",
 }

src/dispatcher/payloads/UpdateFontSizePayload.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+export interface UpdateFontSizePayload extends ActionPayload {
+    action: Action.UpdateFontSize,
+
+    /**
+     * The font size to set the root to
+     */
+    size: number;
+}

src/dispatcher/payloads/UpdateSystemFontPayload.ts

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+export interface UpdateSystemFontPayload extends ActionPayload {
+    action: Action.UpdateSystemFont,
+
+    /**
+     * Specify whether to use a system font or the stylesheet font
+     */
+    useSystemFont: boolean;
+
+    /**
+     * The system font to use
+     */
+    font: string;
+}

src/i18n/strings/en_EN.json

@@ -459,6 +459,8 @@
     "Mirror local video feed": "Mirror local video feed",
     "Enable Community Filter Panel": "Enable Community Filter Panel",
     "Match system theme": "Match system theme",
+    "Use a system font": "Use a system font",
+    "System font name": "System font name",
     "Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls",
     "Send analytics data": "Send analytics data",
     "Never send encrypted messages to unverified sessions from this session": "Never send encrypted messages to unverified sessions from this session",

src/settings/Settings.js

@@ -30,6 +30,8 @@ import PushToMatrixClientController from './controllers/PushToMatrixClientContro
 import ReloadOnChangeController from "./controllers/ReloadOnChangeController";
 import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStorePhases";
 import FontSizeController from './controllers/FontSizeController';
+import SystemFontController from './controllers/SystemFontController';
+import UseSystemFontController from './controllers/UseSystemFontController';
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
 const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config'];
@@ -313,6 +315,18 @@ export const SETTINGS = {
         default: true,
         displayName: _td("Match system theme"),
     },
+    "useSystemFont": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: false,
+        displayName: _td("Use a system font"),
+        controller: new UseSystemFontController(),
+    },
+    "systemFont": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: "",
+        displayName: _td("System font name"),
+        controller: new SystemFontController(),
+    },
     "webRtcAllowPeerToPeer": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         displayName: _td('Allow Peer-to-Peer for 1:1 calls'),

src/settings/controllers/FontSizeController.ts

@@ -16,6 +16,8 @@ limitations under the License.
 
 import SettingController from "./SettingController";
 import dis from "../../dispatcher/dispatcher";
+import { UpdateFontSizePayload } from "../../dispatcher/payloads/UpdateFontSizePayload";
+import { Action } from "../../dispatcher/actions";
 
 export default class FontSizeController extends SettingController {
     constructor() {
@@ -24,8 +26,8 @@ export default class FontSizeController extends SettingController {
 
     onChange(level, roomId, newValue) {
         // Dispatch font size change so that everything open responds to the change.
-        dis.dispatch({
+        dis.dispatch<UpdateFontSizePayload>({
-            action: "update-font-size",
+            action: Action.UpdateFontSize,
             size: newValue,
         });
     }

src/settings/controllers/SystemFontController.ts

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import SettingController from "./SettingController";
+import SettingsStore from "../SettingsStore";
+import dis from "../../dispatcher/dispatcher";
+import { UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
+import { Action } from "../../dispatcher/actions";
+
+export default class SystemFontController extends SettingController {
+    constructor() {
+        super();
+    }
+
+    onChange(level, roomId, newValue) {
+        // Dispatch font size change so that everything open responds to the change.
+        dis.dispatch<UpdateSystemFontPayload>({
+            action: Action.UpdateSystemFont,
+            useSystemFont: SettingsStore.getValue("useSystemFont"),
+            font: newValue,
+        });
+    }
+}

src/settings/controllers/UseSystemFontController.ts

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import SettingController from "./SettingController";
+import SettingsStore from "../SettingsStore";
+import dis from "../../dispatcher/dispatcher";
+import { UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
+import { Action } from "../../dispatcher/actions";
+
+export default class UseSystemFontController extends SettingController {
+    constructor() {
+        super();
+    }
+
+    onChange(level, roomId, newValue) {
+        // Dispatch font size change so that everything open responds to the change.
+        dis.dispatch<UpdateSystemFontPayload>({
+            action: Action.UpdateSystemFont,
+            useSystemFont: newValue,
+            font: SettingsStore.getValue("systemFont"),
+        });
+    }
+}

src/settings/watchers/FontWatcher.ts

@@ -18,6 +18,8 @@ import dis from '../../dispatcher/dispatcher';
 import SettingsStore, {SettingLevel} from '../SettingsStore';
 import IWatcher from "./Watcher";
 import { toPx } from '../../utils/units';
+import { Action } from '../../dispatcher/actions';
+import { UpdateSystemFontPayload } from '../../dispatcher/payloads/UpdateSystemFontPayload';
 
 export class FontWatcher implements IWatcher {
     public static readonly MIN_SIZE = 8;
@@ -33,6 +35,10 @@ export class FontWatcher implements IWatcher {
 
     public start() {
         this.setRootFontSize(SettingsStore.getValue("baseFontSize"));
+        this.setSystemFont({
+            useSystemFont: SettingsStore.getValue("useSystemFont"),
+            font: SettingsStore.getValue("systemFont"),
+        })
         this.dispatcherRef = dis.register(this.onAction);
     }
 
@@ -41,8 +47,10 @@ export class FontWatcher implements IWatcher {
     }
 
     private onAction = (payload) => {
-        if (payload.action === 'update-font-size') {
+        if (payload.action === Action.UpdateFontSize) {
             this.setRootFontSize(payload.size);
+        } else if (payload.action === Action.UpdateSystemFont) {
+            this.setSystemFont(payload)
         }
     };
 
@@ -54,4 +62,8 @@ export class FontWatcher implements IWatcher {
         }
         (<HTMLElement>document.querySelector(":root")).style.fontSize = toPx(fontSize);
     };
+
+    private setSystemFont = ({useSystemFont, font}) => {
+        document.body.style.fontFamily = useSystemFont ? font : "";
+    }
 }