Merged PR 280: v1.17.0 - font fixes, better scroll behavior (#219)

- Questions no longer have a scrollbar in their container but instead grow as large as they need to be - Fix issue where only changing the font size in the Font dialog would reset the font face - Add more fonts like Garamond - Font only changes the question font instead of all fonts in the UI - Bump version to 1.17.0
alopezlago · May 16, 2023 · f4d3499 · f4d3499
1 parent aa79153
commit f4d3499
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "modaq",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "description": "Quiz Bowl Reader using TypeScript, React, and MobX",
     "repository": {
         "type": "git",

diff --git a/src/components/BonusQuestion.tsx b/src/components/BonusQuestion.tsx
@@ -1,6 +1,15 @@
 import * as React from "react";
 import { observer } from "mobx-react-lite";
-import { FocusZone, FocusZoneDirection, ITheme, mergeStyleSets, Stack, StackItem, ThemeContext } from "@fluentui/react";
+import {
+    FocusZone,
+    FocusZoneDirection,
+    IStackStyles,
+    ITheme,
+    mergeStyleSets,
+    Stack,
+    StackItem,
+    ThemeContext,
+} from "@fluentui/react";
 
 import * as BonusQuestionController from "./BonusQuestionController";
 import * as PacketState from "../state/PacketState";
@@ -26,6 +35,16 @@ export const BonusQuestion = observer(function BonusQuestion(props: IBonusQuesti
     );
     const [lastBonus, setLastBonus] = React.useState(props.bonus);
 
+    // Unfortunately StackItems reset the font, so we have to override the font there
+    const fontSize: number = props.appState.uiState.questionFontSize;
+    const fontFamily: string = props.appState.uiState.fontFamily;
+    const stackItemStyles: IStackStyles = {
+        root: {
+            fontFamily,
+            fontSize,
+        },
+    };
+
     // Set the ID and bump it up for the next item
     const [bonusId] = React.useState(bonusQuestionTextIdCounter);
     React.useEffect(() => {
@@ -76,15 +95,15 @@ export const BonusQuestion = observer(function BonusQuestion(props: IBonusQuesti
                     <div className={classes.bonusContainer}>
                         <BonusProtestDialog appState={props.appState} bonus={props.bonus} cycle={props.cycle} />
                         <Stack horizontal={true}>
-                            <StackItem id={bonusQuestionTextId} className={classes.bonusText}>
+                            <StackItem id={bonusQuestionTextId} styles={stackItemStyles}>
                                 <FocusZone as="div" shouldRaiseClicks={true} direction={FocusZoneDirection.vertical}>
                                     <FormattedText className={classes.bonusLeadin} segments={formattedLeadin} />
                                     {parts}
                                     {metadata}
                                 </FocusZone>
                             </StackItem>
-                            <StackItem>
-                                <div className={classes.bonusText}></div>
+                            <StackItem styles={stackItemStyles}>
+                                <div />
                             </StackItem>
                             <StackItem>
                                 <CancelButton
@@ -113,7 +132,6 @@ interface IBonusQuestionClassNames {
     bonusLeadin: string;
     bonusContainer: string;
     bonusMetadata: string;
-    bonusText: string;
 }
 
 const getClassNames = (theme: ITheme | undefined, fontSize: number, disabled: boolean): IBonusQuestionClassNames =>
@@ -137,9 +155,4 @@ const getClassNames = (theme: ITheme | undefined, fontSize: number, disabled: bo
                 color: theme ? theme.palette.neutralSecondaryAlt : "#888888",
             },
         ],
-        bonusText: {
-            maxHeight: "37.5vh",
-            overflowY: "auto",
-            fontSize,
-        },
     });
diff --git a/src/components/ModaqControl.tsx b/src/components/ModaqControl.tsx
@@ -123,14 +123,10 @@ export const ModaqControl = observer(function ModaqControl(props: IModaqControlP
     const theme: Theme = React.useMemo(
         () =>
             createTheme({
-                defaultFontStyle: {
-                    fontFamily: appState.uiState.fontFamily,
-                    fontSize: appState.uiState.questionFontSize,
-                },
                 // isInverted doesn't seem to work for creating a dark mode, so use a specific theme that is close enough
                 palette: appState.uiState.useDarkMode ? darkModePalette : lightModePalette,
             }),
-        [appState.uiState.questionFontSize, appState.uiState.fontFamily, appState.uiState.useDarkMode]
+        [appState.uiState.useDarkMode]
     );
 
     const applyTo = props.applyStylingToRoot ? "body" : "element";

diff --git a/src/components/QuestionViewer.tsx b/src/components/QuestionViewer.tsx
@@ -19,6 +19,7 @@ const separatorStyles: Partial<ISeparatorStyles> = {
 export const QuestionViewer = observer(function QuestionViewer() {
     const appState: AppState = React.useContext(StateContext);
     const fontSize: number = appState.uiState.questionFontSize;
+    const fontFamily: string = appState.uiState.fontFamily;
     const classes: IQuestionViewerClassNames = getClassNames(fontSize);
     const game: GameState = appState.game;
     const uiState: UIState = appState.uiState;
@@ -30,6 +31,7 @@ export const QuestionViewer = observer(function QuestionViewer() {
     // Unfortunately StackItems reset the font, so we have to override the font there
     const stackItemStyles: IStackStyles = {
         root: {
+            fontFamily,
             fontSize,
         },
     };

diff --git a/src/components/TossupQuestion.tsx b/src/components/TossupQuestion.tsx
@@ -58,7 +58,7 @@ export const TossupQuestion = observer(function TossupQuestion(props: IQuestionP
     return (
         <div className={classes.tossupContainer}>
             <TossupProtestDialog appState={props.appState} cycle={props.cycle} />
-            <div className={classes.tossupText} ref={tossupTextRef}>
+            <div ref={tossupTextRef}>
                 <FocusZone
                     as="div"
                     className={classes.tossupQuestionText}
@@ -139,7 +139,6 @@ interface IQuestionWordWrapperProps {
 interface ITossupQuestionClassNames {
     tossupContainer: string;
     tossupQuestionText: string;
-    tossupText: string;
 }
 
 const getClassNames = (): ITossupQuestionClassNames =>
@@ -153,8 +152,4 @@ const getClassNames = (): ITossupQuestionClassNames =>
             display: "inline-block",
             marginBottom: "0.25em",
         },
-        tossupText: {
-            maxHeight: "37.5vh",
-            overflowY: "auto",
-        },
     });
diff --git a/src/components/dialogs/FontDialog.tsx b/src/components/dialogs/FontDialog.tsx
@@ -52,7 +52,18 @@ const modalProps: IModalProps = {
 
 const defaultFont = "Segoe UI";
 
-const fonts: string[] = ["Arial", "Consolas", "Helvetica", "Times New Roman", "Segoe UI"];
+const fonts: string[] = [
+    "Arial",
+    "Consolas",
+    "Courier New",
+    "Garamond",
+    "Georgia",
+    "Helvetica",
+    "Segoe UI",
+    "Tahoma",
+    "Times New Roman",
+    "Verdana",
+];
 
 const minimumFontSize = 12;
 const maximumFontSize = 40;

diff --git a/src/components/dialogs/FontDialogController.ts b/src/components/dialogs/FontDialogController.ts
@@ -23,11 +23,15 @@ export function changeFontFamily(newValue: string | undefined): void {
 
 export function update(): void {
     const appState: AppState = AppState.instance;
-    if (appState.uiState.pendingFontSize != undefined) {
+    if (appState.uiState.pendingFontFamily != undefined) {
         appState.uiState.setFontFamily(appState.uiState.pendingFontFamily ?? defaultFont);
+    }
+
+    if (appState.uiState.pendingFontSize != undefined) {
         appState.uiState.setQuestionFontSize(appState.uiState.pendingFontSize ?? minimumFontSize);
-        hideDialog();
     }
+
+    hideDialog();
 }
 
 function hideDialog(): void {

diff --git a/src/state/UIState.ts b/src/state/UIState.ts
@@ -21,7 +21,7 @@ import { ICustomExport } from "./CustomExport";
 // Alternatively, keep certain component-local states in the component state, and only store values that could be used
 // outside of that component here.
 
-const DefaultFontFamily = "Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif";
+const DefaultFontFamily = "Segoe UI, Times New Roman, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, serif";
 
 export class UIState {
     @ignore

diff --git a/tests/FontDialogControllerTests.ts b/tests/FontDialogControllerTests.ts
@@ -49,7 +49,39 @@ describe("FontDialogControllerTests", () => {
         expect(appState.uiState.pendingFontSize).to.equal(oldFontSize);
     });
 
-    it("update", () => {
+    it("update only font size", () => {
+        AppState.resetInstance();
+        const appState: AppState = AppState.instance;
+        appState.uiState.setFontFamily("Comic Sans MS");
+        appState.uiState.setQuestionFontSize(16);
+
+        appState.uiState.setPendingFontSize(16);
+
+        FontDialogController.changePendingSize("40");
+        FontDialogController.update();
+
+        expect(appState.uiState.pendingFontFamily).to.be.undefined;
+        expect(appState.uiState.pendingFontSize).to.be.undefined;
+        expect(appState.uiState.questionFontSize).to.equal(40);
+        expect(appState.uiState.fontFamily.startsWith("Comic Sans MS")).to.be.true;
+    });
+
+    it("update only font family", () => {
+        AppState.resetInstance();
+        const appState: AppState = AppState.instance;
+        appState.uiState.setFontFamily("Comic Sans MS");
+        appState.uiState.setQuestionFontSize(40);
+
+        appState.uiState.setPendingFontFamily("Arial");
+        FontDialogController.update();
+
+        expect(appState.uiState.pendingFontFamily).to.be.undefined;
+        expect(appState.uiState.pendingFontSize).to.be.undefined;
+        expect(appState.uiState.questionFontSize).to.equal(40);
+        expect(appState.uiState.fontFamily.startsWith("Arial")).to.be.true;
+    });
+
+    it("update both", () => {
         const appState: AppState = initializeApp();
 
         FontDialogController.changePendingSize("40");