From 73cfc3a43b785f2e543a46c5ddf631b9d2499486 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sat, 30 Sep 2023 14:22:11 +0800 Subject: [PATCH 1/3] Account limits UX test --- packages/web/pages/settings/account.tsx | 41 ++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 3e34236aa..6c5d26a56 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -16,7 +16,9 @@ import { Button } from '../../components/elements/Button' import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery' import { updateUserMutation } from '../../lib/networking/mutations/updateUserMutation' import { updateUserProfileMutation } from '../../lib/networking/mutations/updateUserProfileMutation' -import { styled } from '../../components/tokens/stitches.config' +import { styled, theme } from '../../components/tokens/stitches.config' +import { ProgressBar } from '../../components/elements/ProgressBar' +import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery' const StyledLabel = styled('label', { fontWeight: 600, @@ -54,6 +56,16 @@ export default function Account(): JSX.Element { isUsernameValidationLoading, ]) + const { itemsPages, isValidating } = useGetLibraryItemsQuery({ + limit: 0, + searchQuery: 'in:all', + sortDescending: false, + }) + + const libraryCount = useMemo(() => { + return itemsPages?.find(() => true)?.search.pageInfo.totalCount + }, [itemsPages, isValidating]) + useEffect(() => { if (viewerData?.me?.profile.username) { setUsername(viewerData?.me?.profile.username) @@ -250,6 +262,33 @@ export default function Account(): JSX.Element { + + + Account Storage + {!isValidating && ( + <> + + + {`${libraryCount} of 50K library items used.`} + + + )} + + From 6d9f8293df2373e7a84658431549e583ae03945b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 2 Oct 2023 11:58:18 +0800 Subject: [PATCH 2/3] Improve settings layout when sections are empty, better display settings for PDFs --- .../components/templates/SettingsLayout.tsx | 10 +- .../article/PDFDisplaySettingsModal.tsx | 163 ++++++++++++++++++ .../templates/article/PdfArticleContainer.tsx | 25 ++- .../templates/settings/SettingsTable.tsx | 2 + .../web/pages/[username]/[slug]/index.tsx | 30 +++- 5 files changed, 215 insertions(+), 15 deletions(-) create mode 100644 packages/web/components/templates/article/PDFDisplaySettingsModal.tsx diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx index 03bc7bcaa..f10457ce1 100644 --- a/packages/web/components/templates/SettingsLayout.tsx +++ b/packages/web/components/templates/SettingsLayout.tsx @@ -43,7 +43,11 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { }, [showLogout]) return ( - <> + @@ -52,7 +56,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { height: HEADER_HEIGHT, }} > - + {props.children} @@ -70,6 +74,6 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { onOpenChange={() => setShowKeyboardCommandsModal(false)} /> ) : null} - + ) } diff --git a/packages/web/components/templates/article/PDFDisplaySettingsModal.tsx b/packages/web/components/templates/article/PDFDisplaySettingsModal.tsx new file mode 100644 index 000000000..41a5ac510 --- /dev/null +++ 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 + readerSettings: ReaderSettings +} + +export function PDFDisplaySettingsModal( + props: PDFDisplaySettingsModalProps +): JSX.Element { + return ( + + + { + event.preventDefault() + props.onOpenChange(false) + }} + > + + + + + + ) +} + +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 ( + + + + { + setShowPDFToolBar(checked) + document.dispatchEvent(new Event('pdfReaderUpdateSettings')) + }} + > + + + + + {/* + + { + readerSettings.setHighContrastText(checked) + }} + > + + + */} + + ) +} + +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, +}) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 91ef31da4..31fcd487f 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -22,6 +22,7 @@ import 'react-sliding-pane/dist/react-sliding-pane.css' import { NotebookContent } from './Notebook' import { NotebookHeader } from './NotebookHeader' import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions' +import { usePersistedState } from '../../../lib/hooks/usePersistedState' export type PdfArticleContainerProps = { viewer: UserBasicData @@ -36,9 +37,8 @@ export default function PdfArticleContainer( const containerRef = useRef(null) const [notebookKey, setNotebookKey] = useState(uuidv4()) const [noteTarget, setNoteTarget] = useState(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< - number | undefined - >(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = + useState(undefined) const highlightsRef = useRef([]) const annotationOmnivoreId = (annotation: Annotation): string | undefined => { @@ -65,7 +65,12 @@ export default function PdfArticleContainer( 'spacer', 'search', 'export-pdf', + 'sidebar-bookmarks', + 'sidebar-thumbnails', + 'sidebar-document-outline', ] + + console.log('PSPDFKit.defaultToolbarItems', PSPDFKit.defaultToolbarItems) const toolbarItems = PSPDFKit.defaultToolbarItems.filter( (i) => ALLOWED_TOOLBAR_ITEM_TYPES.indexOf(i.type) !== -1 ) @@ -194,6 +199,11 @@ export default function PdfArticleContainer( return props.article.readingProgressAnchorIndex } + console.log( + 'theme: ', + isDarkTheme() ? PSPDFKit.Theme.DARK : PSPDFKit.Theme.LIGHT + ) + instance = await PSPDFKit.load({ container: container || '.pdf-container', toolbarItems, @@ -455,6 +465,15 @@ export default function PdfArticleContainer( } }) + document.addEventListener('pdfReaderUpdateSettings', () => { + const show = localStorage.getItem('reader-show-pdf-tool-bar') + const showToolbarbar = show ? JSON.parse(show) == true : false + + instance.setViewState((viewState) => + viewState.set('showToolbar', showToolbarbar) + ) + }) + return () => { PSPDFKit && container && PSPDFKit.unload(container) } diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx index 14aa86219..ae5395872 100644 --- a/packages/web/components/templates/settings/SettingsTable.tsx +++ b/packages/web/components/templates/settings/SettingsTable.tsx @@ -302,10 +302,12 @@ export const SettingsTable = (props: SettingsTableProps): JSX.Element => { /> ( () => import('./../../../components/templates/article/PdfArticleContainer'), @@ -556,15 +557,26 @@ export default function Home(): JSX.Element { onOpenChange={() => readerSettings.setShowSetLabelsModal(false)} /> )} - {readerSettings.showEditDisplaySettingsModal && ( - { - readerSettings.setShowEditDisplaySettingsModal(false) - }} - /> - )} + {article?.contentReader === 'PDF' && + readerSettings.showEditDisplaySettingsModal && ( + { + readerSettings.setShowEditDisplaySettingsModal(false) + }} + /> + )} + {article?.contentReader !== 'PDF' && + readerSettings.showEditDisplaySettingsModal && ( + { + readerSettings.setShowEditDisplaySettingsModal(false) + }} + /> + )} {article && showEditModal && ( Date: Mon, 2 Oct 2023 11:59:20 +0800 Subject: [PATCH 3/3] Comment out account size UX --- packages/web/pages/settings/account.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 6c5d26a56..823f5b68a 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -263,7 +263,7 @@ export default function Account(): JSX.Element { - )} - + */}