Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Push props down for lineheight, margin width to keep in sync

Browse Source
This commit is contained in:
Jackson Harper
2022-04-13 20:46:49 -07:00
parent c553b8317a
commit a5885fe16c
3 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/components/templates/article/ArticleActionsMenu.tsx
View File

@ -16,6 +16,8 @@ export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
type ArticleActionsMenuProps = {
article: ArticleAttributes
layout: ArticleActionsMenuLayout
lineHeight: number
marginWidth: number
articleActionHandler: (action: string, arg?: unknown) => void
}
@ -54,9 +56,6 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
}
export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
const [lineHeight, setLineHeight] = usePersistedState({ key: 'lineHeight', initialValue: 150 })
const [marginWidth, setMarginWidth] = usePersistedState({ key: 'marginWidth', initialValue: 200 })
return (
<>
<Box
@ -82,8 +81,8 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
}
>
<ReaderSettingsControl
lineHeight={lineHeight}
marginWidth={marginWidth}
lineHeight={props.lineHeight}
marginWidth={props.marginWidth}
articleActionHandler={props.articleActionHandler}
/>
</ActionDropdown>

9
packages/web/components/templates/article/ReaderSettingsControl.tsx
View File

@ -2,7 +2,7 @@ import { HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { styled, theme } from '../../tokens/stitches.config'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, Minus, Pen, Plus, Trash, X } from 'phosphor-react'
import { AIcon } from '../../elements/images/AIcon'
import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
@ -25,6 +25,11 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
const [lineHeight, setLineHeight] = useState(props.lineHeight)
const [marginWidth, setMarginWidth] = useState(props.marginWidth)
useEffect(() => {
setLineHeight(props.lineHeight)
setMarginWidth(props.marginWidth)
}, [props.lineHeight, props.marginWidth, setLineHeight, setMarginWidth])
return (
<VStack>
<HStack
@ -111,7 +116,7 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
<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(200)
setMarginWidth(290)
setLineHeight(150)
props.articleActionHandler('resetReaderSettings')
showSuccessToast('Display settings reset', { position: 'bottom-right' })

41
packages/web/pages/[username]/[slug]/index.tsx
View File

@ -67,23 +67,12 @@ export default function Home(): JSX.Element {
useKeyboardShortcuts(navigationCommands(router))
const updateFontSize = useCallback(async(newFontSize: number) => {
window?.localStorage.setItem("fontSize", newFontSize.toString())
setFontSize(newFontSize)
await userPersonalizationMutation({ fontSize: newFontSize })
}, [fontSize, setFontSize])
const actionHandler = useCallback(async(action: string, arg?: unknown) => {
const updateFontSize = async(newFontSize: number) => {
setFontSize(newFontSize)
await userPersonalizationMutation({ fontSize: newFontSize })
}
const updateLineHeight = useCallback(async(newLineHeight: number) => {
window?.localStorage.setItem("lineHeight", newLineHeight.toString())
setLineHeight(newLineHeight)
}, [lineHeight, setLineHeight])
const updateMarginWidth = useCallback(async(newMargin: number) => {
window?.localStorage.setItem("marginWidth", newMargin.toString())
setMarginWidth(newMargin)
}, [marginWidth, setMarginWidth])
const actionHandler = async (action: string, arg?: unknown) => {
switch (action) {
case 'archive':
if (article) {
@ -125,20 +114,20 @@ export default function Home(): JSX.Element {
case 'setMarginWidth': {
const value = Number(arg)
if (value >= 200 && value <= 560) {
updateMarginWidth(value)
setMarginWidth(value)
}
break
}
case 'incrementMarginWidth':
updateMarginWidth(Math.min(marginWidth + 45, 560))
setMarginWidth(Math.min(marginWidth + 45, 560))
break
case 'decrementMarginWidth':
updateMarginWidth(Math.max(marginWidth - 45, 200))
setMarginWidth(Math.max(marginWidth - 45, 200))
break
case 'setLineHeight': {
const value = Number(arg)
if (value >= 100 && value <= 300) {
updateLineHeight(arg as number)
setLineHeight(arg as number)
}
break
}
@ -152,12 +141,14 @@ export default function Home(): JSX.Element {
}
case 'resetReaderSettings': {
updateFontSize(20)
updateMarginWidth(200)
updateLineHeight(150)
setMarginWidth(290)
setLineHeight(150)
break
}
}
};
}, [article, cache, mutate, router,
fontSize, setFontSize, lineHeight,
setLineHeight, marginWidth, setMarginWidth])
useKeyboardShortcuts(
articleKeyboardCommands(router, async (action) => {
@ -174,6 +165,8 @@ export default function Home(): JSX.Element {
<ArticleActionsMenu
article={article}
layout='horizontal'
lineHeight={lineHeight}
marginWidth={marginWidth}
articleActionHandler={actionHandler}
/>
}
@ -207,6 +200,8 @@ export default function Home(): JSX.Element {
<ArticleActionsMenu
article={article}
layout='vertical'
lineHeight={lineHeight}
marginWidth={marginWidth}
articleActionHandler={actionHandler}
/>
) : null}