From 99ec93449b1e834ee0f8dae6e64270395d68362d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 21 Jun 2022 15:38:02 -0700 Subject: [PATCH 1/7] Use a Radix dialog instead of dropdown, add OpenDyslexic font, prefetch fonts The main change here is using Dialog instead of dropdown. The dialog uses a fixed position, so when the underlying document dimensions change based on a font change, the dialog will still be positioned properly. --- .../components/elements/ModalPrimitives.tsx | 4 - .../templates/article/ArticleActionsMenu.tsx | 48 +++++----- .../article/DisplaySettingsModal.tsx | 48 +++------- .../templates/article/FontFamiliesOptions.tsx | 1 + .../article/ReaderSettingsControl.tsx | 83 ++++++++---------- .../keyboardShortcuts/navigationShortcuts.ts | 7 ++ .../web/pages/[username]/[slug]/index.tsx | 4 - packages/web/pages/_document.tsx | 22 ++++- .../OpenDyslexic/OpenDyslexicAlta-Bold.otf | Bin 0 -> 40180 bytes .../OpenDyslexic/OpenDyslexicAlta-Italic.otf | Bin 0 -> 62672 bytes .../OpenDyslexic/OpenDyslexicAlta-Regular.otf | Bin 0 -> 42872 bytes .../stories/ReaderSettingsControl.stories.tsx | 4 +- packages/web/styles/globals.css | 21 +++++ 13 files changed, 128 insertions(+), 114 deletions(-) create mode 100644 packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Bold.otf create mode 100644 packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Italic.otf create mode 100644 packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Regular.otf diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx index 1a641bbae..b1e9083de 100644 --- a/packages/web/components/elements/ModalPrimitives.tsx +++ b/packages/web/components/elements/ModalPrimitives.tsx @@ -39,10 +39,6 @@ export const ModalContent = styled(Modal, { width: '90vw', maxWidth: '600px', maxHeight: '85vh', - '@media (prefers-reduced-motion: no-preference)': { - animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, - willChange: 'transform', - }, '@smDown': { maxWidth: '95%', width: '95%', diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index e085bd42b..6f88f30f2 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -7,7 +7,9 @@ import { Box, SpanBox } from "../../elements/LayoutPrimitives" import { TooltipWrapped } from "../../elements/Tooltip" import { styled, theme } from "../../tokens/stitches.config" import { SetLabelsControl } from "./SetLabelsControl" -import { ReaderSettingsControl } from "./ReaderSettingsControl" +import { DisplaySettingsModal } from "./DisplaySettingsModal" +import { useReaderSettings } from "../../../lib/hooks/useReaderSettings" +import { useRef } from "react" export type ArticleActionsMenuLayout = 'top' | 'side' @@ -56,6 +58,9 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => { } export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element { + const readerSettings = useReaderSettings() + const displaySettingsButtonRef = useRef(null) + return ( <> {props.showReaderDisplaySettings && ( <> - - - - } + + )} - */} + {readerSettings.showEditDisplaySettingsModal && ( + readerSettings.setShowEditDisplaySettingsModal(false)} + /> + )} ) } diff --git a/packages/web/components/templates/article/DisplaySettingsModal.tsx b/packages/web/components/templates/article/DisplaySettingsModal.tsx index e8abbec77..80d506624 100644 --- a/packages/web/components/templates/article/DisplaySettingsModal.tsx +++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx @@ -1,61 +1,39 @@ -import { X } from 'phosphor-react' -import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' -import { UserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' -import { Button } from '../../elements/Button' -import { CrossIcon } from '../../elements/images/CrossIcon' -import { Box, HStack, VStack } from '../../elements/LayoutPrimitives' +import { VStack } from '../../elements/LayoutPrimitives' import { ModalRoot, ModalOverlay, ModalContent, } from '../../elements/ModalPrimitives' -import { StyledText } from '../../elements/StyledText' -import { theme } from '../../tokens/stitches.config' import { ReaderSettingsControl } from './ReaderSettingsControl' + type DisplaySettingsModalProps = { + centerX: boolean onOpenChange: (open: boolean) => void - lineHeight: number - marginWidth: number - fontFamily: string + triggerElementRef?: React.RefObject articleActionHandler: (action: string, arg?: number | string) => void } export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element { + const top = props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0 + const left = props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0 + return ( - { event.preventDefault() props.onOpenChange(false) }} > - - Labels - - diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx index 7ea01d8f9..c38ad1ebb 100644 --- a/packages/web/components/templates/article/FontFamiliesOptions.tsx +++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx @@ -11,6 +11,7 @@ const FONT_FAMILIES = [ 'Open Sans', 'Roboto', 'Crimson Text', + 'OpenDyslexic', 'Source Serif Pro' ] diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx index 9599a5491..b2ac1b8b4 100644 --- a/packages/web/components/templates/article/ReaderSettingsControl.tsx +++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx @@ -6,14 +6,10 @@ import { useEffect, useState } from 'react' import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight } from 'phosphor-react' import { TickedRangeSlider } from '../../elements/TickedRangeSlider' import { showSuccessToast } from '../../../lib/toastHelpers' -import { FontStepperDown } from '../../elements/images/FontStepperDown' -import { FontStepperUp } from '../../elements/images/FontStepperUp' import { FontFamiliesOptions } from './FontFamiliesOptions' +import { useReaderSettings } from '../../../lib/hooks/useReaderSettings' type ReaderSettingsProps = { - marginWidth: number - lineHeight: number - fontFamily: string articleActionHandler: (action: string, arg?: number | string) => void } @@ -30,26 +26,17 @@ const HorizontalDivider = styled(SpanBox, { }) 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) - setFontFamily(props.fontFamily) - }, [props.lineHeight, props.marginWidth, props.fontFamily, setLineHeight, setMarginWidth, setFontFamily]) + const readeringSettings = useReaderSettings() return ( - + {showFontOptions ? ( { - setFontFamily(font) + readeringSettings.setFontFamily(font) props.articleActionHandler('setFontFamily', font) }} /> @@ -60,17 +47,17 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element { distribution='between' css={{ width: '100%', - height: '70px', - marginTop: '4px', + height: '44px', + verticalAlign: 'baseline', borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, }} > - - Font: @@ -91,9 +79,9 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element { onClick={() => setShowFontOptions(true)} > - {fontFamily} + {readeringSettings.fontFamily} @@ -117,22 +105,22 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element { }, }} > - Margin: + Margin: - - { - setMarginWidth(value) + { + readeringSettings.setMarginWidth(value) props.articleActionHandler('setMarginWidth', value) }} /> - - { - setLineHeight(value) + { + readeringSettings.setLineHeight(value) props.articleActionHandler('setLineHeight', value) }} /> -