prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add small library menu header button

Browse source
This commit is contained in:
Jackson Harper 2023-03-02 17:46:54 +08:00
parent e4a89bef9d
commit b254141e08
3 changed files with 102 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/web/components/elements/images/OmnivoreNameLogo.tsx
View file

@ -20,6 +20,26 @@ type OmnivoreLogoProps = {
strokeColor: string
}
export function OmnivoreSmallLogo(props: OmnivoreLogoProps): JSX.Element {
return (
<svg
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.82329 12.9213V7.47867C5.82329 7.01332 6.36957 6.75029 6.73377 7.07402L8.4131 9.5222C8.75706 9.80546 9.24265 9.80546 9.58661 9.5222L11.2255 7.09425C11.5897 6.79075 12.136 7.03355 12.136 7.49891V10.372C12.136 11.768 13.0667 12.9011 14.4627 12.9011H14.5032C15.6969 12.9011 16.7288 12.0918 17.0121 10.9385C17.1537 10.3315 17.2751 9.70429 17.2751 9.2187C17.2549 4.46397 13.2285 0.862512 8.4131 1.18624C4.32605 1.4695 1.02808 4.76746 0.744823 8.85451C0.421097 13.6699 4.22489 17.6963 8.99985 17.6963"
stroke="#0A0806"
strokeOpacity="0.4"
strokeWidth="1.4"
strokeMiterlimit="10"
/>
</svg>
)
}
export function OmnivoreLogoIcon(props: OmnivoreLogoProps): JSX.Element {
return (
<svg

9
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -98,8 +98,9 @@ export function HomeFeedContainer(): JSX.Element {
const gridContainerRef = useRef<HTMLDivElement>(null)
const [labelsTarget, setLabelsTarget] =
useState<LibraryItem | undefined>(undefined)
const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
undefined
)
const [showAddLinkModal, setShowAddLinkModal] = useState(false)
const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@ -772,7 +773,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
<Toaster />
{props.isValidating && props.items.length == 0 && <TopBarProgress />}
{/*
<SpanBox
css={{
width: '100%',
@ -789,7 +790,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
updateLayout={updateLayout}
setShowAddLinkModal={props.setShowAddLinkModal}
/>
</SpanBox>
</SpanBox> */}
<Dropzone
onDrop={handleDrop}

94
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -1,16 +1,21 @@
import { useRef, useState } from 'react'
import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { theme } from '../../tokens/stitches.config'
import { FormInput } from '../../elements/FormElements'
import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { Button, IconButton } from '../../elements/Button'
import { MagnifyingGlass, X } from 'phosphor-react'
import { FunnelSimple, MagnifyingGlass, X } from 'phosphor-react'
import { ListSelectorIcon } from '../../elements/images/ListSelectorIcon'
import { GridSelectorIcon } from '../../elements/images/GridSelectorIcon'
import { LayoutType } from './HomeFeedContainer'
import { PrimaryDropdown } from '../PrimaryDropdown'
import { LogoBox } from '../../elements/LogoBox'
import {
OmnivoreLogoIcon,
OmnivoreNameLogo,
OmnivoreSmallLogo,
} from '../../elements/images/OmnivoreNameLogo'
type LibraryHeaderProps = {
layout: LayoutType
@ -47,22 +52,11 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
},
}}
>
<HStack
alignment="center"
distribution="start"
css={{
width: '100%',
height: '100%',
}}
>
<LogoBox />
<SearchBox {...props} />
<ControlButtonBox
layout={props.layout}
updateLayout={props.updateLayout}
/>
</HStack>
{/* These will display/hide depending on breakpoints */}
<LargeHeaderLayout {...props} />
<SmallHeaderLayout {...props} />
</VStack>
{/* This spacer is put in to push library content down
below the fixed header height. */}
<Box
@ -78,6 +72,71 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
)
}
function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
return (
<HStack
alignment="center"
distribution="start"
css={{
width: '100%',
height: '100%',
'@mdDown': {
display: 'none',
},
}}
>
<LogoBox />
<SearchBox {...props} />
<ControlButtonBox
layout={props.layout}
updateLayout={props.updateLayout}
/>
</HStack>
)
}
function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
return (
<HStack
alignment="center"
distribution="start"
css={{
width: '100%',
height: '100%',
'@md': {
display: 'none',
},
}}
>
<MenuHeaderButton />
<ControlButtonBox
layout={props.layout}
updateLayout={props.updateLayout}
/>
</HStack>
)
}
function MenuHeaderButton(): JSX.Element {
return (
<HStack
css={{
ml: '10px',
minWidth: '60px',
minHeight: '30px',
bg: '#F0F0F0',
borderRadius: '5px',
px: '5px',
}}
alignment="center"
distribution="around"
>
<OmnivoreSmallLogo size={15} strokeColor="black" />
<FunnelSimple size={16} color="#6A6968" />
</HStack>
)
}
type SearchBoxProps = {
searchTerm: string | undefined
applySearchQuery: (searchQuery: string) => void
@ -272,6 +331,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
},
}}
>
<MagnifyingGlass size={20} color={theme.colors.graySolid.toString()} />
<PrimaryDropdown showThemeSection={true} />
</HStack>
</>