prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement margin slider

Browse source
This commit is contained in:
Jackson Harper 2022-04-10 20:53:40 -07:00
parent d05f091876
commit 197ae866a8
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/web/components/templates/article/ReaderSettingsModal.tsx
View file

@ -25,12 +25,15 @@ type ReaderSettingsProps = {
articleActionHandler: (action: string, arg?: number) => void
}
const VerticalDivider = styled(SpanBox, {
width: '1px',
height: '100%',
background: `${theme.colors.grayLine.toString()}`,
})
export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
const VerticalDivider = styled(SpanBox, {
width: '1px',
height: '100%',
background: `${theme.colors.grayLine.toString()}`,
})
const [marginWidth, setMarginWidth] = useState(props.userPreferences?.margin ?? 0)
return (
<VStack>
<HStack
@ -65,8 +68,9 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
<Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('decrementMarginWidth')}>
<ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
</Button>
<TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={(value) => {
console.log('range changed', value)
<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={() => props.articleActionHandler('incrementMarginWidth')}>
<ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />

11
packages/web/pages/[username]/[slug]/index.tsx
View file

@ -101,11 +101,18 @@ export default function Home(): JSX.Element {
case 'decrementFontSize':
await updateFontSize(Math.max(fontSize - 2, 10))
break
case 'setMarginWidth': {
const value = Number(arg)
if (value > 200 && value < 560) {
updateMarginWidth(value)
}
break
}
case 'incrementMarginWidth':
updateMarginWidth(Math.min(marginWidth + 50, 560))
updateMarginWidth(Math.min(marginWidth + 45, 560))
break
case 'decrementMarginWidth':
updateMarginWidth(Math.max(marginWidth - 50, 200))
updateMarginWidth(Math.max(marginWidth - 45, 200))
break
}
};