feat: display each font text with the corresponding font in theme set…

…tings (#1023) Co-authored-by: Diogo Correia <[email protected]>
leic-pt · Apr 26, 2024 · 7539694 · 7539694
1 parent 2c8e895
commit 7539694
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/src/components/ThemeSettings/DropdownSelect/DropdownOption.js b/src/components/ThemeSettings/DropdownSelect/DropdownOption.js
@@ -1,13 +1,14 @@
 import React, { useContext } from 'react';
 import { DropdownContext } from './DropdownSelect';
 
-const DropdownOption = ({ value, children }) => {
+const DropdownOption = ({ value, children, style }) => {
   const { id, value: selectedValue, onChange } = useContext(DropdownContext);
 
   return (
     <button
       className={`keep-focus-${id} dropdown-option${value === selectedValue ? ' selected' : ''}`}
       onClick={() => onChange(value)}
+      style={style}
     >
       {children}
     </button>

diff --git a/src/components/ThemeSettings/ThemeSettings.js b/src/components/ThemeSettings/ThemeSettings.js
@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
+  fonts,
   useContentWidth,
   useDarkMode,
   useFontSettings,
@@ -31,6 +32,22 @@ const ThemeSettings = () => {
   const { fontLoader, font, setFont } = useFontSettings();
   const { theme, setTheme } = useThemeSettings();
 
+  // Load (previews of) all the fonts to show their preview on dropdown
+  const fontPreviewsLoader = useMemo(
+    () =>
+      Object.values(fonts)
+        .filter((font) => font.url)
+        .map((font) => {
+          let href = font.url;
+          // For Google Fonts, avoid loading the entire font and load only the required text
+          if (font.url?.startsWith('https://fonts.googleapis.com/css2?')) {
+            href = `${href}&text=${encodeURIComponent(font.displayName)}`;
+          }
+          return <link href={href} rel='stylesheet'></link>;
+        }),
+    []
+  );
+
   return (
     <>
       <button
@@ -111,19 +128,19 @@ const ThemeSettings = () => {
             </button>
           </div>
         </Option>
+        {panelOpen && fontPreviewsLoader}
         {fontLoader}
         <Option name='Font'>
           <DropdownSelect id='font' value={font} onChange={(v) => setFont(v)}>
-            <DropdownOption value='roboto'>Roboto (default)</DropdownOption>
-            <DropdownOption value='comicNeue'>Comic Neue</DropdownOption>
-            <DropdownOption value='indieFlower'>Indie Flower</DropdownOption>
-            <DropdownOption value='nunito'>Nunito</DropdownOption>
-            <DropdownOption value='openDyslexic'>OpenDyslexic</DropdownOption>
-            <DropdownOption value='openSans'>Open Sans</DropdownOption>
-            <DropdownOption value='cursive'>cursive (system)</DropdownOption>
-            <DropdownOption value='monospace'>monospace (system)</DropdownOption>
-            <DropdownOption value='sansSerif'>sans-serif (system)</DropdownOption>
-            <DropdownOption value='serif'>serif (system)</DropdownOption>
+            {Object.entries(fonts).map(([fontName, fontOptions]) => (
+              <DropdownOption
+                key={fontName}
+                value={fontName}
+                style={{ fontFamily: fontOptions.cssFamily }}
+              >
+                {fontOptions.displayName}
+              </DropdownOption>
+            ))}
           </DropdownSelect>
         </Option>
       </SidePanel>

diff --git a/src/hooks/theme-hooks.js b/src/hooks/theme-hooks.js
@@ -4,42 +4,52 @@ import '../styles/themes/gruvbox.css';
 import '../styles/themes/nord.css';
 import '../styles/themes/solarized.css';
 
-const fonts = {
+export const fonts = {
   roboto: {
     cssFamily: 'Roboto, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
+    displayName: 'Roboto (default)',
   },
   comicNeue: {
     cssFamily: 'Comic Neue, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap',
+    displayName: 'Comic Neue',
   },
   indieFlower: {
     cssFamily: 'Indie Flower, cursive',
     url: 'https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap',
+    displayName: 'Indie Flower',
   },
   nunito: {
     cssFamily: 'Nunito, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap',
+    displayName: 'Nunito',
   },
   openDyslexic: {
     cssFamily: 'OpenDyslexicRegular, Roboto, sans-serif',
     url: 'https://cdn.jsdelivr.net/npm/[email protected]/open-dyslexic-regular.min.css',
+    displayName: 'OpenDyslexic',
   },
   openSans: {
     cssFamily: 'Open Sans, Roboto, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap',
+    displayName: 'Open Sans',
   },
   cursive: {
     cssFamily: 'cursive',
+    displayName: 'cursive (system)',
   },
   monospace: {
     cssFamily: 'monospace',
+    displayName: 'monospace (system)',
   },
   sansSerif: {
     cssFamily: 'sans-serif',
+    displayName: 'sans-serif (system)',
   },
   serif: {
     cssFamily: 'serif',
+    displayName: 'serif (system)',
   },
 };