Merge pull request #806 from omnivore-app/OMN-777

[OMN-777] - Add font selector

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -16,6 +16,7 @@ type ArticleActionsMenuProps = {
   layout: ArticleActionsMenuLayout
   lineHeight: number
   marginWidth: number
+  fontFamily: string
   showReaderDisplaySettings?: boolean
   articleActionHandler: (action: string, arg?: unknown) => void
 }
@@ -81,6 +82,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
             }
           >
             <ReaderSettingsControl
+              fontFamily={props.fontFamily}
               lineHeight={props.lineHeight}
               marginWidth={props.marginWidth}
               articleActionHandler={props.articleActionHandler}
@@ -190,4 +192,4 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
     </Box>
     </>
   )
-}
+}

packages/web/components/templates/article/DisplaySettingsModal.tsx

@@ -17,7 +17,8 @@ type DisplaySettingsModalProps = {
   onOpenChange: (open: boolean) => void
   lineHeight: number
   marginWidth: number
-  articleActionHandler: (action: string, arg?: number) => void
+  fontFamily: string
+  articleActionHandler: (action: string, arg?: number | string) => void
 }
 
 export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element {
@@ -54,6 +55,7 @@ export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Elem
           <ReaderSettingsControl
             lineHeight={props.lineHeight}
             marginWidth={props.marginWidth}
+            fontFamily={props.fontFamily}
             articleActionHandler={props.articleActionHandler}
           />
         </VStack>

packages/web/components/templates/article/FontFamiliesOptions.tsx

@@ -0,0 +1,74 @@
+import { HStack, Box } from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { theme } from '../../tokens/stitches.config'
+import { CaretLeft, CheckCircle } from 'phosphor-react'
+
+const FONT_FAMILIES = [
+  'Inter',
+  'System Default',
+  'Merriweather',
+  'Lora',
+  'Open Sans',
+  'Roboto',
+  'Crimson Text',
+  'Source Serif Pro'
+]
+
+type FontFamiliesListProps = {
+  selected: string
+  setShowFontFamilies: (value: boolean) => void
+  onSelect: (value: string) => void
+}
+
+type FontOptionProps = {
+  family: string
+  selected: string
+  onSelect: (value: string) => void
+}
+
+function FontOption(props: FontOptionProps):JSX.Element {
+  const isSelected = props.selected === props.family
+  return (
+    <HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
+      <StyledText
+        css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
+        onClick={() => props.onSelect(props.family)}
+      >
+        {props.family}
+      </StyledText>
+      {isSelected && (
+        <CheckCircle color={theme.colors.grayTextContrast.toString()} />
+      )}
+    </HStack>
+  )
+}
+
+export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
+  return (
+    <>
+      <Box css={{borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, width: '100%'}}>
+        <HStack alignment='center' distribution='between' css={{width: '70%', py: 10, px: 15}}>
+          <HStack
+            alignment='center'
+            distribution='start'
+            css={{cursor: 'pointer'}}
+            onClick={() => props.setShowFontFamilies(false)}
+          >
+            <Box css={{position: 'relative', top: 2, right: 5}}>
+              <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
+            </Box>
+            <StyledText css={{m: 0, pt: 4, fontSize: 12, fontWeight: '600', color: theme.colors.textSubtle.toString()}}>
+              Back
+            </StyledText>
+          </HStack>
+          {/* <StyledText css={{m: 0, fontSize: 16, fontWeight: '600'}}>Select Font</StyledText> */}
+        </HStack>
+      </Box>
+      <Box css={{px: 15, width: '100%', pb: 15}}>
+        {FONT_FAMILIES.map((family) => (
+          <FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
+        ))}
+      </Box>
+    </>
+  )
+}

packages/web/components/templates/article/ReaderSettingsControl.tsx

@@ -1,20 +1,20 @@
-import { HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { HStack, VStack, SpanBox, Box } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { styled, theme } from '../../tokens/stitches.config'
 import { useEffect, useState } from 'react'
-import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, Minus, Pen, Plus, Trash, X } from 'phosphor-react'
-import { AIcon } from '../../elements/images/AIcon'
+import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight } from 'phosphor-react'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
-import Image from 'next/image'
 import { FontStepperDown } from '../../elements/images/FontStepperDown'
 import { FontStepperUp } from '../../elements/images/FontStepperUp'
+import { FontFamiliesOptions } from './FontFamiliesOptions'
 
 type ReaderSettingsProps = {
   marginWidth: number
   lineHeight: number
-  articleActionHandler: (action: string, arg?: number) => void
+  fontFamily: string
+  articleActionHandler: (action: string, arg?: number | string) => void
 }
 
 const VerticalDivider = styled(SpanBox, {
@@ -23,110 +23,161 @@ const VerticalDivider = styled(SpanBox, {
   background: `${theme.colors.grayLine.toString()}`,
 })
 
+const HorizontalDivider = styled(SpanBox, {
+  width: '100%',
+  height: '1px',
+  background: `${theme.colors.grayLine.toString()}`,
+})
+
 export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
   const [lineHeight, setLineHeight] = useState(props.lineHeight)
   const [marginWidth, setMarginWidth] = useState(props.marginWidth)
+  const [fontFamily, setFontFamily] = useState(props.fontFamily)
+
+  const [showFontOptions, setShowFontOptions] = useState(false)
 
   useEffect(() => {
     setLineHeight(props.lineHeight)
     setMarginWidth(props.marginWidth)
-  }, [props.lineHeight, props.marginWidth, setLineHeight, setMarginWidth])
+    setFontFamily(props.fontFamily)
+  }, [props.lineHeight, props.marginWidth, props.fontFamily, setLineHeight, setMarginWidth, setFontFamily])
 
   return (
     <VStack>
-      <HStack 
-        alignment='center'
-        distribution='between'
-        css={{
-          width: '100%',
-          height: '70px',
-          marginTop: '4px',
-          borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
-        }}
-      >
-        <Button style='plainIcon' css={{ width: '50%' }} onClick={() => props.articleActionHandler('decrementFontSize')}>
-          <FontStepperDown color={theme.colors.readerFont.toString()} />
-        </Button>
-        <VerticalDivider />
-        <Button style='plainIcon' css={{ width: '50%', height: '100%' }} onClick={() => props.articleActionHandler('incrementFontSize')}>
-          <FontStepperUp color={theme.colors.readerFont.toString()} />
-        </Button>
-      </HStack>
-      <VStack
-        css={{
+      {showFontOptions ? (
+        <FontFamiliesOptions
+          selected={fontFamily}
+          setShowFontFamilies={setShowFontOptions}
+          onSelect={(font: string) => {
+            setFontFamily(font)
+            props.articleActionHandler('setFontFamily', font)
+          }}
+        />
+      ) : (
+        <>
+        <HStack 
+          alignment='center'
+          distribution='between'
+          css={{
+            width: '100%',
+            height: '70px',
+            marginTop: '4px',
+            borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+          }}
+        >
+          <Button style='plainIcon' css={{ width: '50%' }} onClick={() => props.articleActionHandler('decrementFontSize')}>
+            <FontStepperDown color={theme.colors.readerFont.toString()} />
+          </Button>
+          <VerticalDivider />
+          <Button style='plainIcon' css={{ width: '50%', height: '100%' }} onClick={() => props.articleActionHandler('incrementFontSize')}>
+            <FontStepperUp color={theme.colors.readerFont.toString()} />
+          </Button>
+        </HStack>
+        <HStack
+          distribution="start"
+          alignment='center'
+          css={{
+            m: '0px',
+            px: '12px',
+            py: '12px',
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <StyledText css={{ m: '0px' }}>Font:</StyledText>
+          <HStack
+            alignment='center'
+            css={{cursor: 'pointer', marginLeft: 'auto' }}
+            onClick={() => setShowFontOptions(true)}
+          >
+            <StyledText
+              css={{ m: '0px',fontSize: 17, fontWeight: '600', fontFamily: fontFamily, textTransform: 'capitalize' }}
+            >
+              {fontFamily}
+            </StyledText>
+            <Box css={{  }}>
+              <CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
+            </Box>
+          </HStack>
+        </HStack>
+        <HorizontalDivider />
+        <VStack
+          css={{
+            p: '0px',
+            m: '0px',
+            pb: '14px',
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '8px', m: '0px', pt: '14px' }}>Margin:</StyledText>
+          <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
+            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
+              const newMarginWith = Math.max(marginWidth - 45, 200)
+              setMarginWidth(newMarginWith)
+              props.articleActionHandler('setMarginWidth', newMarginWith)
+            }}>
+              <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
+            </Button>
+            <TickedRangeSlider min={200} max={560} step={45} value={marginWidth} onChange={(value) => {
+              setMarginWidth(value)
+              props.articleActionHandler('setMarginWidth', value)
+            }} />
+            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
+              const newMarginWith = Math.min(marginWidth + 45, 560)
+              setMarginWidth(newMarginWith)
+              props.articleActionHandler('setMarginWidth', newMarginWith)
+            }}>
+              <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
+            </Button>
+
+          </HStack>
+        </VStack>
+        <HorizontalDivider />
+
+        <VStack css={{
           p: '0px',
           m: '0px',
           pb: '14px',
           width: '100%',
           height: '100%',
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      >
-        <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '8px', m: '0px', pt: '14px' }}>Margin:</StyledText>
-        <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
-          <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-            const newMarginWith = Math.max(marginWidth - 45, 200)
-            setMarginWidth(newMarginWith)
-            props.articleActionHandler('setMarginWidth', newMarginWith)
-          }}>
-            <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
-          </Button>
-          <TickedRangeSlider min={200} max={560} step={45} value={marginWidth} onChange={(value) => {
-            setMarginWidth(value)
-            props.articleActionHandler('setMarginWidth', value)
-          }} />
-          <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-            const newMarginWith = Math.min(marginWidth + 45, 560)
-            setMarginWidth(newMarginWith)
-            props.articleActionHandler('setMarginWidth', newMarginWith)
-          }}>
-            <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
-          </Button>
+        }}>
+          <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '12px', m: '0px', pt: '14px' }}>Line Spacing:</StyledText>
+          <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
+            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
+              const newLineHeight = Math.max(lineHeight - 25, 100)
+              setLineHeight(newLineHeight)
+              props.articleActionHandler('setLineHeight', newLineHeight)
+            }}>
+              <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
+            </Button>
+            <TickedRangeSlider min={100} max={300} step={25} value={lineHeight} onChange={(value) => {
+              setLineHeight(value)
+              props.articleActionHandler('setLineHeight', value)
+            }} />
+            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
+              const newLineHeight = Math.min(lineHeight + 25, 300)
+              setLineHeight(newLineHeight)
+              props.articleActionHandler('setLineHeight', newLineHeight)
+            }}>
+              <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
+            </Button>
+          </HStack>
+        </VStack>
+          <HorizontalDivider />
 
-        </HStack>
-      </VStack>
-      <VStack css={{
-        p: '0px',
-        m: '0px',
-        pb: '12px',
-        width: '100%',
-        height: '100%',
-      }}>
-        <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '12px', m: '0px', pt: '14px' }}>Line Spacing:</StyledText>
-        <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
-          <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-            const newLineHeight = Math.max(lineHeight - 25, 100)
-            setLineHeight(newLineHeight)
-            props.articleActionHandler('setLineHeight', newLineHeight)
-          }}>
-            <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
+          <Button style='plainIcon' css={{ justifyContent: 'center', textDecoration: 'underline', display: 'flex', gap: '4px', width: '100%', fontSize: '12px', p: '8px', pb: '14px', pt: '16px', height: '42px', alignItems: 'center' }}
+            onClick={() => {
+              setMarginWidth(290)
+              setLineHeight(150)
+              props.articleActionHandler('resetReaderSettings')
+              showSuccessToast('Display settings reset', { position: 'bottom-right' })
+            }}
+          >
+            Reset to default
           </Button>
-          <TickedRangeSlider min={100} max={300} step={25} value={lineHeight} onChange={(value) => {
-            setLineHeight(value)
-            props.articleActionHandler('setLineHeight', value)
-          }} />
-          <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-            const newLineHeight = Math.min(lineHeight + 25, 300)
-            setLineHeight(newLineHeight)
-            props.articleActionHandler('setLineHeight', newLineHeight)
-          }}>
-            <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
-          </Button>
-        </HStack>
-
-        <Button style='plainIcon' css={{ justifyContent: 'center', textDecoration: 'underline', display: 'flex', gap: '4px', width: '100%', fontSize: '12px', p: '8px', pb: '0px', pt: '16px', height: '42px', alignItems: 'center' }}
-          onClick={() => {
-            setMarginWidth(290)
-            setLineHeight(150)
-            props.articleActionHandler('resetReaderSettings')
-            showSuccessToast('Display settings reset', { position: 'bottom-right' })
-          }}
-        >
-        Reset to default
-      </Button>
-      </VStack>
+        </>
+      )}
     </VStack>
   )
 }

packages/web/lib/hooks/useReaderSettings.tsx

@@ -3,6 +3,8 @@ import { userPersonalizationMutation } from "../networking/mutations/userPersona
 import { useGetUserPreferences, UserPreferences } from "../networking/queries/useGetUserPreferences"
 import { usePersistedState } from "./usePersistedState"
 
+const DEFAULT_FONT = 'Inter'
+
 export type ReaderSettings = {
   preferencesData: UserPreferences | undefined
   fontSize: number
@@ -20,6 +22,9 @@ export type ReaderSettings = {
   setShowEditDisplaySettingsModal: (showEditDisplaySettingsModal: boolean) => void
 
   actionHandler: (action: string, arg?: unknown) => void
+  
+  fontFamily: string,
+  setFontFamily: (newStyle: string) => void
 }
 
 export const useReaderSettings = (): ReaderSettings => {
@@ -27,6 +32,7 @@ export const useReaderSettings = (): ReaderSettings => {
   const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
   const [lineHeight, setLineHeight] = usePersistedState({ key: 'lineHeight', initialValue: 150 })
   const [marginWidth, setMarginWidth] = usePersistedState({ key: 'marginWidth', initialValue: 200 })
+  const [fontFamily, setFontFamily] = usePersistedState({ key: 'fontFamily', initialValue: DEFAULT_FONT })
   const [showSetLabelsModal, setShowSetLabelsModal] = useState(false)
   const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
 
@@ -67,6 +73,10 @@ export const useReaderSettings = (): ReaderSettings => {
         setShowEditDisplaySettingsModal(true)
         break
       }
+      case 'setFontFamily': {
+        setFontFamily(arg as unknown as string)
+        break
+      }
       case 'setLabels': {
         setShowSetLabelsModal(true)
         break
@@ -75,11 +85,12 @@ export const useReaderSettings = (): ReaderSettings => {
         updateFontSize(20)
         setMarginWidth(290)
         setLineHeight(150)
+        setFontFamily(DEFAULT_FONT)
         break
       }
     }
-  }, [fontSize, setFontSize, lineHeight,
-      setLineHeight, marginWidth, setMarginWidth])
+  }, [fontSize, setFontSize, lineHeight, fontFamily,
+      setLineHeight, marginWidth, setMarginWidth, setFontFamily])
 
   return {
     preferencesData,
@@ -87,6 +98,6 @@ export const useReaderSettings = (): ReaderSettings => {
     setFontSize,  setLineHeight, setMarginWidth,
     showSetLabelsModal, showEditDisplaySettingsModal,
     setShowSetLabelsModal, setShowEditDisplaySettingsModal,
-    actionHandler,
+    actionHandler, setFontFamily, fontFamily,
   }
-}
+}

packages/web/pages/[username]/[slug]/index.tsx

@@ -151,6 +151,7 @@ export default function Home(): JSX.Element {
         <ArticleActionsMenu
           article={article}
           layout='top'
+          fontFamily={readerSettings.fontFamily}
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={article?.contentReader != 'PDF'}
@@ -188,6 +189,7 @@ export default function Home(): JSX.Element {
           <ArticleActionsMenu
             article={article}
             layout='side'
+            fontFamily={readerSettings.fontFamily}
             lineHeight={readerSettings.lineHeight}
             marginWidth={readerSettings.marginWidth}
             showReaderDisplaySettings={true}
@@ -224,6 +226,7 @@ export default function Home(): JSX.Element {
                 fontSize={readerSettings.fontSize}
                 margin={readerSettings.marginWidth}
                 lineHeight={readerSettings.lineHeight}
+                fontFamily={readerSettings.fontFamily}
                 labels={labels}
                 showHighlightsModal={showHighlightsModal}
                 setShowHighlightsModal={setShowHighlightsModal}
@@ -259,6 +262,7 @@ export default function Home(): JSX.Element {
         <DisplaySettingsModal
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
+          fontFamily={readerSettings.fontFamily}
           articleActionHandler={actionHandler}
           onOpenChange={() => readerSettings.setShowEditDisplaySettingsModal(false)}
         />

packages/web/pages/[username]/links/[id].tsx

@@ -33,6 +33,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
         <ArticleActionsMenu
           article={undefined}
           layout='top'
+          fontFamily={readerSettings.fontFamily}
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}
@@ -61,6 +62,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
         <ArticleActionsMenu
           article={undefined}
           layout='side'
+          fontFamily={readerSettings.fontFamily}
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}

packages/web/pages/article/sr/[id].tsx

@@ -33,6 +33,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
         <ArticleActionsMenu
           article={undefined}
           layout='top'
+          fontFamily={readerSettings.fontFamily}
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}
@@ -61,6 +62,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
         <ArticleActionsMenu
           article={undefined}
           layout='side'
+          fontFamily={readerSettings.fontFamily}
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}

packages/web/stories/ReaderSettingsControl.stories.tsx

@@ -16,7 +16,7 @@ export default {
 export const ReaderSettingsStory: ComponentStory<typeof ReaderSettingsControl> = (args: any) => {
   return (
     <div style={{ width: '265px', border: '2px solid black' }}>
-      <ReaderSettingsControl marginWidth={300} lineHeight={200} articleActionHandler={(action) => {
+      <ReaderSettingsControl fontFamily='Inter' marginWidth={300} lineHeight={200} articleActionHandler={(action) => {
         console.log('articleActionHandler')
       }} />
     </div>