From 23416cd1e7accdda57a156d34cfad7d488e02636 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sun, 10 Apr 2022 22:22:25 -0700 Subject: [PATCH] Allow adjusting line height --- .../templates/article/ArticleContainer.tsx | 20 +++++-------------- .../templates/article/ReaderSettingsModal.tsx | 4 ++-- .../web/pages/[username]/[slug]/index.tsx | 15 ++++++++++---- 3 files changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index 8153c7e9d..cb4a31003 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -1,6 +1,6 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' import { Article } from './../../../components/templates/article/Article' -import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' +import { Box, SpanBox, VStack } from './../../elements/LayoutPrimitives' import { StyledText } from './../../elements/StyledText' import { ArticleSubtitle } from './../../patterns/ArticleSubtitle' import { theme, ThemeId } from './../../tokens/stitches.config' @@ -27,6 +27,7 @@ type ArticleContainerProps = { margin?: number fontSize?: number fontFamily?: string + lineHeight?: number } export function ArticleContainer(props: ArticleContainerProps): JSX.Element { @@ -34,7 +35,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { const [showNotesSidebar, setShowNotesSidebar] = useState(false) const [showReportIssuesModal, setShowReportIssuesModal] = useState(false) const [fontSize, setFontSize] = useState(props.fontSize ?? 20) - const [margin, setMargin] = useState(props.margin ?? 360) const updateFontSize = async (newFontSize: number) => { if (fontSize !== newFontSize) { @@ -43,21 +43,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { } } - const updateMargin = async (newMargin: number) => { - if (margin !== newMargin) { - setMargin(newMargin) - await userPersonalizationMutation({ margin: newMargin }) - } - } - useEffect(() => { updateFontSize(props.fontSize ?? 20) }, [props.fontSize]) - useEffect(() => { - updateMargin(props.margin ?? 140) - }, [props.margin]) - // Listen for font size and color mode change events sent from host apps (ios, macos...) useEffect(() => { const increaseFontSize = async () => { @@ -98,8 +87,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { }, [props.article]) const styles = { - margin: props.margin ?? 360, fontSize, + margin: props.margin ?? 360, + lineHeight: props.lineHeight ?? 150, fontFamily: props.fontFamily ?? 'inter', readerFontColor: theme.colors.readerFont.toString(), readerFontColorTransparent: theme.colors.readerFontTransparent.toString(), @@ -117,7 +107,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { background: props.isAppleAppEmbed ? 'unset' : theme.colors.grayBg.toString(), '--text-font-family': styles.fontFamily, '--text-font-size': `${styles.fontSize}px`, - '--line-height': `150%`, + '--line-height': `${styles.lineHeight}%`, '--blockquote-padding': '0.5em 1em', '--blockquote-icon-font-size': '1.3rem', '--figure-margin': '1.6rem auto', diff --git a/packages/web/components/templates/article/ReaderSettingsModal.tsx b/packages/web/components/templates/article/ReaderSettingsModal.tsx index cfd3c8a19..e11ff893c 100644 --- a/packages/web/components/templates/article/ReaderSettingsModal.tsx +++ b/packages/web/components/templates/article/ReaderSettingsModal.tsx @@ -32,8 +32,8 @@ const VerticalDivider = styled(SpanBox, { }) export function ReaderSettings(props: ReaderSettingsProps): JSX.Element { - const [lineHeight, setLineHeight] = useState(props.userPreferences?.lineHeight ?? 1.5) const [marginWidth, setMarginWidth] = useState(props.userPreferences?.margin ?? 0) + const [lineHeight, setLineHeight] = useState(props.userPreferences?.lineHeight ?? 150) return ( @@ -102,7 +102,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element { - { + { setLineHeight(value) props.articleActionHandler('setLineHeight', value) }} /> diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index cb820d9d8..4bd1c9559 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -38,14 +38,13 @@ export default function Home(): JSX.Element { const { slug } = router.query const [showHighlightsModal, setShowHighlightsModal] = useState(false) - // Populate data cache const { viewerData } = useGetViewerQuery() - const { preferencesData } = useGetUserPreferences() const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20) const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360) + const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150) - const { articleData, mutate } = useGetArticleQuery({ + const { articleData } = useGetArticleQuery({ username: router.query.username as string, slug: router.query.slug as string, includeFriendsHighlights: false, @@ -103,7 +102,7 @@ export default function Home(): JSX.Element { break case 'setMarginWidth': { const value = Number(arg) - if (value > 200 && value < 560) { + if (value >= 200 && value <= 560) { updateMarginWidth(value) } break @@ -114,6 +113,13 @@ export default function Home(): JSX.Element { case 'decrementMarginWidth': updateMarginWidth(Math.max(marginWidth - 45, 200)) break + case 'setLineHeight': { + const value = Number(arg) + if (value >= 100 && value <= 300) { + setLineHeight(value) + } + break + } } }; @@ -193,6 +199,7 @@ export default function Home(): JSX.Element { highlightsBaseURL={`${webBaseURL}/${viewerData.me?.profile?.username}/${slug}/highlights`} fontSize={fontSize} margin={marginWidth} + lineHeight={lineHeight} labels={labels} articleMutations={{ createHighlightMutation,