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

Merge pull request #4091 from omnivore-app/feat/web-ux-tweaks

Browse Source 
Some more web tweaks for /home
This commit is contained in:
Jackson Harper
2024-06-21 11:40:07 +08:00
committed by GitHub
parent 5cf972f12a 70ccc5bc4f
commit bc0eeba158
14 changed files with 69 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/components/elements/ModalPrimitives.tsx
View File

@ -35,6 +35,7 @@ const Modal = styled(Content, {
export const ModalContent = styled(Modal, {
top: '50%',
left: '50%',
bg: '$readerBg',
transform: 'translate(-50%, -50%)',
width: '90vw',
maxWidth: '450px',

8
packages/web/components/elements/TickedRangeSlider.tsx
View File

@ -22,14 +22,14 @@ const StyledSlider = styled(Slider, {
height: '8px',
width: '225px',
borderRadius: '10px',
backgroundColor: '#F2F2F2',
backgroundColor: '$thTextSubtle2',
},
'.SliderThumb': {
display: 'block',
width: '20px',
height: '20px',
width: '15px',
height: '15px',
borderRadius: '50%',
border: '4px solid white',
border: '2px solid $thTextSubtle2',
backgroundColor: '#FFD234',
boxShadow: '0px 0px 20px rgba(19, 56, 77, 0.2)',
},

59
packages/web/components/nav-containers/home.tsx
View File

@ -40,7 +40,7 @@ export function HomeContainer(): JSX.Element {
}, [viewerData])
useEffect(() => {
window.sessionStorage.setItem('nav-return', router.asPath)
window.localStorage.setItem('nav-return', router.asPath)
}, [router.asPath])
return (
@ -74,7 +74,8 @@ export function HomeContainer(): JSX.Element {
>
{homeData.sections?.map((homeSection, idx) => {
if (homeSection.items.length < 1) {
return <></>
console.log('empty home section: ', homeSection)
return <SpanBox key={`section-${idx}`}></SpanBox>
}
switch (homeSection.layout) {
case 'just_added':
@ -110,7 +111,8 @@ export function HomeContainer(): JSX.Element {
/>
)
default:
return <></>
console.log('unknown home section: ', homeSection)
return <SpanBox key={`section-${idx}`}></SpanBox>
}
})}
</VStack>
@ -271,7 +273,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
<Pagination
items={items}
itemsPerPage={4}
itemsPerPage={10}
loadMoreButtonText="Load more Top Picks"
render={(homeItem) => (
<TopPicksItemView
@ -629,28 +631,34 @@ const TopPicksItemView = (
<SpanBox css={{ px: '20px' }}></SpanBox>
<HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
{props.homeItem.canSave && (
<Button style="homeAction">
<Button
style="homeAction"
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
props.dispatchList({
type: 'REMOVE_ITEM',
itemId: props.homeItem.id,
})
}}
>
<AddToLibraryActionIcon
color={theme.colors.homeActionIcons.toString()}
/>
</Button>
)}
{/* <Button style="homeAction">
<CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button> */}
{props.homeItem.canArchive && (
<Button
style="homeAction"
onClick={(event) => {
// archiveItem(props.homeItem)
console.log('archiving')
event.preventDefault()
event.stopPropagation()
props.dispatchList({
type: 'REMOVE_ITEM',
itemId: props.homeItem.id,
})
event.preventDefault()
event.stopPropagation()
}}
>
<ArchiveActionIcon
@ -659,12 +667,29 @@ const TopPicksItemView = (
</Button>
)}
{props.homeItem.canDelete && (
<Button style="homeAction">
<Button
style="homeAction"
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
props.dispatchList({
type: 'REMOVE_ITEM',
itemId: props.homeItem.id,
})
}}
>
<RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
)}
{props.homeItem.canShare && (
<Button style="homeAction">
<Button
style="homeAction"
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
}}
>
<ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
)}
@ -828,7 +853,7 @@ const SubscriptionSourceHoverContent = (
<HStack
distribution="start"
alignment="center"
css={{ width: '100%', gap: '10px' }}
css={{ width: '100%', gap: '10px', height: '35px' }}
>
{props.source.icon && <SiteIconLarge src={props.source.icon} />}
<SpanBox
@ -843,7 +868,7 @@ const SubscriptionSourceHoverContent = (
<SpanBox css={{ ml: 'auto', minWidth: '100px' }}>
{subscription && subscription.status == 'ACTIVE' && (
<Button style="ctaSubtle" css={{ fontSize: '12px' }}>
+ Unsubscribe
Unsubscribe
</Button>
)}
</SpanBox>

2
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View File

@ -95,7 +95,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
props.setIsChecked(props.item.id, !props.isChecked)
return
}
window.sessionStorage.setItem('nav-return', router.asPath)
window.localStorage.setItem('nav-return', router.asPath)
if (event.metaKey || event.ctrlKey) {
window.open(
`/${props.viewer.profile.username}/${props.item.slug}`,

2
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View File

@ -100,7 +100,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
props.setIsChecked(props.item.id, !props.isChecked)
return
}
window.sessionStorage.setItem('nav-return', router.asPath)
window.localStorage.setItem('nav-return', router.asPath)
if (event.metaKey || event.ctrlKey) {
window.open(
`/${props.viewer.profile.username}/${props.item.slug}`,

2
packages/web/components/templates/SettingsLayout.tsx
View File

@ -32,7 +32,7 @@ const ReturnButton = (): JSX.Element => {
},
}}
>
<Link href="/home">
<Link href="/l/home">
<HStack
css={{
pl: '20px',

11
packages/web/components/templates/article/PdfArticleContainer.tsx
View File

@ -35,9 +35,8 @@ export default function PdfArticleContainer(
const containerRef = useRef<HTMLDivElement | null>(null)
const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
number | undefined
>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] =
useState<number | undefined>(undefined)
const highlightsRef = useRef<Highlight[]>([])
const annotationOmnivoreId = (annotation: Annotation): string | undefined => {
@ -449,16 +448,16 @@ export default function PdfArticleContainer(
document.dispatchEvent(new Event('openOriginalArticle'))
break
case 'u':
const navReturn = window.sessionStorage.getItem('nav-return')
const navReturn = window.localStorage.getItem('nav-return')
if (navReturn) {
window.location.assign(navReturn)
return
}
const query = window.sessionStorage.getItem('q')
if (query) {
window.location.assign(`/home?${query}`)
window.location.assign(`/l/home?${query}`)
} else {
window.location.replace(`/home`)
window.location.replace(`/l/home`)
}
break
case 'e':

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

@ -89,7 +89,7 @@ export default function Home(): JSX.Element {
// return
// }
// }
const navReturn = window.sessionStorage.getItem('nav-return')
const navReturn = window.localStorage.getItem('nav-return')
if (navReturn) {
router.push(navReturn)
return
@ -303,7 +303,7 @@ export default function Home(): JSX.Element {
name: 'Return to library',
shortcut: ['u'],
perform: () => {
const navReturn = window.sessionStorage.getItem('nav-return')
const navReturn = window.localStorage.getItem('nav-return')
if (navReturn) {
router.push(navReturn)
return

4
packages/web/pages/_app.tsx
View File

@ -43,12 +43,12 @@ const generateActions = (router: NextRouter) => {
shortcut: ['g', 'h'],
keywords: 'go home',
perform: () => {
const navReturn = window.sessionStorage.getItem('nav-return')
const navReturn = window.localStorage.getItem('nav-return')
if (navReturn) {
router.push(navReturn)
return
}
router?.push('/home')
router?.push('/l/home')
},
},
{

2
packages/web/pages/api/client/auth.ts
View File

@ -29,7 +29,7 @@ const requestHandler = (req: NextApiRequest, res: NextApiResponse): void => {
})
} else {
res.writeHead(302, {
Location: '/home',
Location: '/l/home',
})
}

7
packages/web/pages/index.tsx
View File

@ -9,7 +9,12 @@ export default function LandingPage(): JSX.Element {
const { viewerData, isLoading } = useGetViewerQuery()
if (!isLoading && router.isReady && viewerData?.me) {
router.push('/home')
const navReturn = window.localStorage.getItem('nav-return')
if (navReturn) {
router.push(navReturn)
} else {
router.push('/l/home')
}
return <></>
} else if (isLoading || !router.isReady) {
return (

2
packages/web/pages/tools/bulk.tsx
View File

@ -202,7 +202,7 @@ export default function BulkPerformer(): JSX.Element {
<VStack css={{ width: '100%' }} alignment="center">
<Button
onClick={(e) => {
window.location.href = '/home'
window.location.href = '/l/home'
e.preventDefault()
}}
style="ctaDarkYellow"

2
packages/web/pages/tools/import/file.tsx
View File

@ -240,7 +240,7 @@ export default function ImportUploader(): JSX.Element {
{uploadState == 'completed' && (
<Button
onClick={(e) => {
window.location.href = '/home'
window.location.href = '/l/home'
e.preventDefault()
}}
style="ctaDarkYellow"

2
packages/web/pages/tools/import/matter-archive.tsx
View File

@ -190,7 +190,7 @@ export default function ImportUploader(): JSX.Element {
<VStack css={{ width: '100%' }} alignment="center">
<Button
onClick={(e) => {
window.location.href = '/home'
window.location.href = '/l/home'
e.preventDefault()
}}
style="ctaDarkYellow"