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

Move keyboard commands from header into layout

Browse Source
This commit is contained in:
Jackson Harper
2023-02-25 08:51:25 +08:00
parent 0a949dc82f
commit a57dad444d
5 changed files with 92 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/web/components/patterns/PrimaryHeader.tsx
View File

@ -27,34 +27,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
const router = useRouter()
const [isScrolled, setIsScrolled] = useState(false)
useKeyboardShortcuts(
primaryCommands((action) => {
switch (action) {
// case 'themeDarker':
// darkenTheme()
// break
// case 'themeLighter':
// lightenTheme()
// break
case 'toggleShortcutHelpModalDisplay':
props.setShowKeyboardCommandsModal(true)
break
}
})
)
const initAnalytics = useCallback(() => {
setupAnalytics(props.user)
}, [props.user])
useEffect(() => {
initAnalytics()
window.addEventListener('load', initAnalytics)
return () => {
window.removeEventListener('load', initAnalytics)
}
}, [initAnalytics])
function headerDropdownActionHandler(action: HeaderDropdownAction): void {
switch (action) {
case 'apply-darker-theme':
@ -108,12 +80,14 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
return (
<>
<SpanBox css={{
display: props.alwaysDisplayToolbar ? 'none' : 'flex',
'@lgDown': {
display: 'none',
}
}}>
<SpanBox
css={{
display: props.alwaysDisplayToolbar ? 'none' : 'flex',
'@lgDown': {
display: 'none',
},
}}
>
<FloatingNavHeader
{...props}
isVisible={true}
@ -124,11 +98,13 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
alwaysDisplayToolbar={props.alwaysDisplayToolbar}
/>
</SpanBox>
<SpanBox css={{
'@lg': {
display: props.alwaysDisplayToolbar ? 'flex' : 'none',
}
}}>
<SpanBox
css={{
'@lg': {
display: props.alwaysDisplayToolbar ? 'flex' : 'none',
},
}}
>
<NavHeader
{...props}
isVisible={true}
@ -241,7 +217,7 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
position: 'fixed',
display: 'flex',
alignItems: 'center',
zIndex: 100,
zIndex: 5,
}}
>
<OmnivoreNameLogo href={props.username ? '/home' : '/login'} />
@ -256,7 +232,7 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
right: '18px',
position: 'fixed',
display: 'flex',
alignItems: 'center'
alignItems: 'center',
}}
>
<DropdownMenu
@ -274,4 +250,3 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
</>
)
}

31
packages/web/components/templates/PrimaryLayout.tsx
View File

@ -10,6 +10,8 @@ import { Analytics } from '@segment/analytics-next'
import { ConfirmationModal } from '../patterns/ConfirmationModal'
import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
import { setupAnalytics } from '../../lib/analytics'
import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
type PrimaryLayoutProps = {
children: ReactNode
@ -29,8 +31,20 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
useKeyboardShortcuts(navigationCommands(router))
useKeyboardShortcuts(
primaryCommands((action) => {
switch (action) {
case 'toggleShortcutHelpModalDisplay':
setShowKeyboardCommandsModal(true)
break
}
})
)
// Attempt to identify the user if they are logged in.
useEffect(() => {
setupAnalytics(viewerData?.me)
const user = window.analytics?.user().id()
if (!user && viewerData?.me?.id) {
window.analytics?.identify({ userId: viewerData?.me?.id })
@ -66,17 +80,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
},
}}
>
{/* <PrimaryHeader
user={viewerData?.me}
hideHeader={props.hideHeader}
userInitials={viewerData?.me?.name.charAt(0) ?? ''}
profileImageURL={viewerData?.me?.profile.pictureUrl}
isTransparent={true}
toolbarControl={props.headerToolbarControl}
alwaysDisplayToolbar={props.alwaysDisplayToolbar}
setShowLogoutConfirmation={setShowLogoutConfirmation}
setShowKeyboardCommandsModal={setShowKeyboardCommandsModal}
/> */}
<Box
css={{
height: '100%',
@ -84,12 +87,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
bg: '$grayBase',
}}
>
{/* <Box
css={{
height: '48px',
bg: '$grayBase',
}}
></Box> */}
{props.children}
{showLogoutConfirmation ? (
<ConfirmationModal

10
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View File

@ -1025,16 +1025,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
)}
</Dropzone>
</VStack>
{/* Temporary code */}
{/* <div>
<strong>Files:</strong>
<ul>
{uploadingFiles.map((fileName) => (
<li key={fileName}>{fileName}</li>
))}
</ul>
</div> */}
{/* Temporary code */}
{props.showAddLinkModal && (
<AddLinkModal onOpenChange={() => props.setShowAddLinkModal(false)} />
)}

2
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View File

@ -48,7 +48,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
css={{
top: '0',
left: '0',
zIndex: 100,
zIndex: 5,
position: 'fixed',
width: '100%',
height: HEADER_HEIGHT,

79
packages/web/pages/_document.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable functional/no-class */
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import { useCallback } from 'react'
import { getCssText, globalStyles } from '../components/tokens/stitches.config'
import { setupAnalytics } from '../lib/analytics'
export default class Document extends NextDocument {
render() {
@ -53,25 +55,61 @@ export default class Document extends NextDocument {
<script async src="/static/scripts/inject-sw.js" />
{/* prefetch (not preload) fonts that will be used by the reader */}
<link rel="prefetch" href='/static/fonts/Lora/Lora-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Lora/Lora-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Lora/Lora-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/Roboto/Roboto-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Roboto/Roboto-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Roboto/Roboto-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf' />
<link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf' />
<link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf' />
<link rel="prefetch" href='/static/fonts/SFMono/SFMonoRegular.otf' />
<link rel="prefetch" href="/static/fonts/Lora/Lora-Regular.ttf" />
<link rel="prefetch" href="/static/fonts/Lora/Lora-Bold.ttf" />
<link rel="prefetch" href="/static/fonts/Lora/Lora-Italic.ttf" />
<link
rel="prefetch"
href="/static/fonts/Merriweather/Merriweather-Regular.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Merriweather/Merriweather-Bold.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Merriweather/Merriweather-Italic.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Open_Sans/OpenSans-Regular.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Open_Sans/OpenSans-Bold.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Open_Sans/OpenSans-Italic.ttf"
/>
<link rel="prefetch" href="/static/fonts/Roboto/Roboto-Regular.ttf" />
<link rel="prefetch" href="/static/fonts/Roboto/Roboto-Bold.ttf" />
<link rel="prefetch" href="/static/fonts/Roboto/Roboto-Italic.ttf" />
<link
rel="prefetch"
href="/static/fonts/Crimson_Text/CrimsonText-Regular.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Crimson_Text/CrimsonText-Bold.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Crimson_Text/CrimsonText-Italic.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf"
/>
<link
rel="prefetch"
href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf"
/>
<link rel="prefetch" href="/static/fonts/SFMono/SFMonoRegular.otf" />
</Head>
<body>
<Main />
@ -82,3 +120,6 @@ export default class Document extends NextDocument {
)
}
}
function useEffect(arg0: () => () => void, arg1: (() => void)[]) {
throw new Error('Function not implemented.')
}