64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
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 {
|
|
ModalRoot,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
} from '../../elements/ModalPrimitives'
|
|
import { StyledText } from '../../elements/StyledText'
|
|
import { theme } from '../../tokens/stitches.config'
|
|
import { ReaderSettingsControl } from './ReaderSettingsControl'
|
|
|
|
type DisplaySettingsModalProps = {
|
|
onOpenChange: (open: boolean) => void
|
|
lineHeight: number
|
|
marginWidth: number
|
|
articleActionHandler: (action: string, arg?: number) => void
|
|
}
|
|
|
|
export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element {
|
|
return (
|
|
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
|
|
<ModalOverlay />
|
|
<ModalContent
|
|
css={{ overflow: 'auto' }}
|
|
onPointerDownOutside={(event) => {
|
|
event.preventDefault()
|
|
props.onOpenChange(false)
|
|
}}
|
|
>
|
|
<VStack css={{ width: '100%' }}>
|
|
<HStack
|
|
distribution="between"
|
|
alignment="center"
|
|
css={{ width: '100%' }}
|
|
>
|
|
<StyledText style="modalHeadline" css={{ pl: '16px' }}>Labels</StyledText>
|
|
<Button
|
|
css={{ pt: '16px', pr: '16px' }}
|
|
style="ghost"
|
|
onClick={() => {
|
|
props.onOpenChange(false)
|
|
}}
|
|
>
|
|
<CrossIcon
|
|
size={14}
|
|
strokeColor={theme.colors.grayText.toString()}
|
|
/>
|
|
</Button>
|
|
</HStack>
|
|
<ReaderSettingsControl
|
|
lineHeight={props.lineHeight}
|
|
marginWidth={props.marginWidth}
|
|
articleActionHandler={props.articleActionHandler}
|
|
/>
|
|
</VStack>
|
|
</ModalContent>
|
|
</ModalRoot>
|
|
)
|
|
}
|