Improve settings layout when sections are empty, better display settings for PDFs

2023-10-02 11:58:18 +08:00
parent 73cfc3a43b
commit 6d9f8293df
5 changed files with 215 additions and 15 deletions
--- a/packages/web/components/templates/article/PDFDisplaySettingsModal.tsx
+++ b/packages/web/components/templates/article/PDFDisplaySettingsModal.tsx
@ -0,0 +1,163 @@
+import * as Switch from '@radix-ui/react-switch'
+import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
+import { HStack, VStack } from '../../elements/LayoutPrimitives'
+import {
+  ModalRoot,
+  ModalContent,
+  ModalOverlay,
+} from '../../elements/ModalPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { ReaderSettingsControl } from './ReaderSettingsControl'
+import { styled } from '../../tokens/stitches.config'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
+
+type PDFDisplaySettingsModalProps = {
+  centerX: boolean
+  onOpenChange: (open: boolean) => void
+  triggerElementRef?: React.RefObject<HTMLElement>
+  readerSettings: ReaderSettings
+}
+
+export function PDFDisplaySettingsModal(
+  props: PDFDisplaySettingsModalProps
+): JSX.Element {
+  return (
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+      <ModalOverlay css={{ backgroundColor: 'unset' }} />
+      <ModalContent
+        css={{
+          width: '345px',
+          padding: '0px',
+          top: '262px',
+          left: 'calc(100% - 250px)',
+          '@lgDown': {
+            top: '300px',
+            left: '50%',
+          },
+        }}
+        onPointerDownOutside={(event) => {
+          event.preventDefault()
+          props.onOpenChange(false)
+        }}
+      >
+        <VStack css={{ width: '100%' }}>
+          <PDFSettings readerSettings={props.readerSettings} />
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}
+
+type SettingsProps = {
+  readerSettings: ReaderSettings
+}
+
+function PDFSettings(props: SettingsProps): JSX.Element {
+  const { readerSettings } = props
+  const [showPDFToolBar, setShowPDFToolBar] = usePersistedState({
+    key: 'reader-show-pdf-tool-bar',
+    initialValue: true,
+    isSessionStorage: false,
+  })
+
+  return (
+    <VStack
+      css={{ width: '100%', minHeight: '320px', p: '10px' }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="show-menu-bar" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            Show Tool Bar
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="show-menu-bar"
+          checked={showPDFToolBar}
+          onCheckedChange={(checked: boolean) => {
+            setShowPDFToolBar(checked)
+            document.dispatchEvent(new Event('pdfReaderUpdateSettings'))
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack>
+
+      {/* <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="high-contrast-text" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            High Contrast Text
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="high-contrast-text"
+          checked={readerSettings.highContrastText ?? false}
+          onCheckedChange={(checked: boolean) => {
+            readerSettings.setHighContrastText(checked)
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack> */}
+    </VStack>
+  )
+}
+
+const SwitchRoot = styled(Switch.Root, {
+  all: 'unset',
+  width: 42,
+  height: 25,
+  backgroundColor: '$thBorderColor',
+  borderRadius: '9999px',
+  position: 'relative',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': { boxShadow: `0 0 0 2px $thBorderColor` },
+  '&[data-state="checked"]': { backgroundColor: '$thBorderColor' },
+})
+
+const SwitchThumb = styled(Switch.Thumb, {
+  display: 'block',
+  width: 21,
+  height: 21,
+  backgroundColor: '$thTextContrast2',
+  borderRadius: '9999px',
+  transition: 'transform 100ms',
+  transform: 'translateX(2px)',
+  willChange: 'transform',
+  '&[data-state="checked"]': { transform: 'translateX(19px)' },
+})
+
+const Label = styled('label', {
+  color: 'white',
+  fontSize: 15,
+  lineHeight: 1,
+})