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

moved search bar and library to the top of menu, updated some more overriding styles

Browse Source
This commit is contained in:
Rupin Khandelwal
2022-08-08 16:16:19 +02:00
parent 3a513cd4c6
commit fac0e78c3d
6 changed files with 109 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/web/components/templates/Menu.tsx
View File

@ -5,13 +5,12 @@ import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuer
import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar'
import 'react-pro-sidebar/dist/css/styles.css'
import { TagSimple } from 'phosphor-react'
// styles
const proSideBarStyles = {
display: 'inline-block',
marginTop:'120px',
}
// Types
@ -19,7 +18,6 @@ type MenuItems = {
label: string
query: string
icon: string | JSX.Element | null
href: string
}
@ -83,39 +81,37 @@ export const Menubar = () => {
},
{
label: 'Today',
query: 'in:inbox -label:Newsletter',
query: 'in:inbox-label:Newsletter',
icon: null,
href: calculateTodayMenuItem(),
},
{
label: 'Read Later',
query: 'in:inbox -label:Newsletter',
query: 'in:inbox-label:Newsletter',
icon: null,
href: `?q=in inbox+-label Newsletter`,
href: `?q=in:inbox+-label:Newsletter`,
},
{
label: 'HighLights',
query: 'type:highlights',
icon: null,
href: `?q=type highlights`,
href: `?q=type:highlights`,
},
{
label: 'Newsletters',
query: 'in:inbox label:Newsletter',
icon: null,
href: `?q=in inbox+label Newsletter`,
href: `?q=in:inbox+label:Newsletter`,
},
...createDynamicMenuItems(labels, subscriptions),
])
}, [])
}, [labels, subscriptions])
// const menuItems = useMemo(() => {
// if (labels || subscriptions) {
// setMenuList( [...menuList, ...createDynamicMenuItems(labels, subscriptions)])
// }
// }, [labels, subscriptions, menuList])
console.log('menuList', menuList)
return (
<ProSidebar style={proSideBarStyles} breakPoint={'sm'}>
<Menu>

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

@ -53,19 +53,20 @@ import {
export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
// TODO: remove Commented out code after PR approval (l56-l70 & 730 - 777)
// const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
const SAVED_SEARCHES: Record<string, string> = {
Inbox: `in:inbox`,
'Read Later': `in:inbox -label:Newsletter`,
Highlights: `type:highlights`,
Today: `in:inbox saved:${
new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0]
}Z${timeZoneHourDiff.toLocaleString('en-US', {
signDisplay: 'always',
})}..*`,
Newsletters: `in:inbox label:Newsletter`,
}
// const SAVED_SEARCHES: Record<string, string> = {
// Inbox: `in:inbox`,
// 'Read Later': `in:inbox -label:Newsletter`,
// Highlights: `type:highlights`,
// Today: `in:inbox saved:${
// new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0]
// }Z${timeZoneHourDiff.toLocaleString('en-US', {
// signDisplay: 'always',
// })}..*`,
// Newsletters: `in:inbox label:Newsletter`,
// }
const fetchSearchResults = async (query: string, cb: any) => {
if (!query.startsWith('#')) return
@ -96,17 +97,14 @@ export function HomeFeedContainer(): JSX.Element {
const gridContainerRef = useRef<HTMLDivElement>(null)
const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
undefined
)
const [shareTarget, setShareTarget] =
useState<LibraryItem | undefined>(undefined)
const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
undefined
)
const [snoozeTarget, setSnoozeTarget] =
useState<LibraryItem | undefined>(undefined)
const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
undefined
)
const [labelsTarget, setLabelsTarget] =
useState<LibraryItem | undefined>(undefined)
const [showAddLinkModal, setShowAddLinkModal] = useState(false)
const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@ -670,7 +668,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
>
<Toaster />
{props.isValidating && props.items.length == 0 && <TopBarProgress />}
<HStack alignment="center" distribution="start" css={{ width: '100%' }}>
<HStack
alignment="center"
distribution="start"
css={{
width: '95%',
position: 'absolute',
top: '35px',
left: '20px',
}}
>
<StyledText
style="subHeadline"
css={{
@ -720,53 +727,55 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
searchTerm={props.searchTerm}
applySearchQuery={props.applySearchQuery}
/>
{viewerData?.me && (
<Box
css={{
display: 'flex',
width: '100%',
height: '44px',
marginTop: '16px',
gap: '8px',
flexDirection: 'row',
overflowY: 'scroll',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}}
>
{Object.keys(SAVED_SEARCHES).map((key) => {
const isInboxTerm = (term: string) => {
return !term || term === 'in:inbox'
}
{ //viewerData?.me && (
// <Box
// css={{
// display: 'flex',
// width: '100%',
// height: '44px',
// marginTop: '16px',
// gap: '8px',
// flexDirection: 'row',
// overflowY: 'scroll',
// scrollbarWidth: 'none',
// '&::-webkit-scrollbar': {
// display: 'none',
// },
// }}
// >
// {Object.keys(SAVED_SEARCHES).map((key) => {
// const isInboxTerm = (term: string) => {
// return !term || term === 'in:inbox'
// }
// const searchQuery = SAVED_SEARCHES[key]
// const style =
// searchQuery === props.searchTerm ||
// (!props.searchTerm && isInboxTerm(searchQuery))
// ? 'ctaDarkYellow'
// : 'ctaLightGray'
// return (
// <Button
// key={key}
// style={style}
// onClick={() => {
// props.applySearchQuery(searchQuery)
// }}
// css={{
// p: '10px 12px',
// height: '37.5px',
// borderRadius: '6px',
// whiteSpace: 'nowrap',
// }}
// >
// {key}
// </Button>
// )
// })}
// </Box>
//)
}
const searchQuery = SAVED_SEARCHES[key]
const style =
searchQuery === props.searchTerm ||
(!props.searchTerm && isInboxTerm(searchQuery))
? 'ctaDarkYellow'
: 'ctaLightGray'
return (
<Button
key={key}
style={style}
onClick={() => {
props.applySearchQuery(searchQuery)
}}
css={{
p: '10px 12px',
height: '37.5px',
borderRadius: '6px',
whiteSpace: 'nowrap',
}}
>
{key}
</Button>
)
})}
</Box>
)}
{!props.isValidating && props.items.length == 0 ? (
<EmptyLibrary
onAddLinkClicked={() => {

9
packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
View File

@ -49,7 +49,14 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
)
return (
<VStack css={{ width: '100%' }}>
<VStack
css={{
width: '95%',
position: 'absolute',
top: '105px',
left: '20px',
}}
>
<HStack
alignment="center"
distribution="start"

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

@ -1,5 +1,8 @@
import '../styles/globals.css'
import '../styles/articleInnerStyling.css'
import 'react-pro-sidebar/dist/css/styles.css'
import '../styles/menu.css'
import type { AppProps } from 'next/app'
import { IdProvider } from '@radix-ui/react-id'
import { NextRouter, useRouter } from 'next/router'

2
packages/web/pages/home.tsx
View File

@ -1,7 +1,5 @@
import { PrimaryLayout } from '../components/templates/PrimaryLayout'
import { HomeFeedContainer } from '../components/templates/homeFeed/HomeFeedContainer'
import { VStack } from './../components/elements/LayoutPrimitives'
import { useRef } from 'react'
import { Menubar } from '../components/templates/Menu'
export default function Home(): JSX.Element {

14
packages/web/styles/menu.css Normal file
View File

@ -0,0 +1,14 @@
/* Menu Override styles */
.pro-sidebar > .pro-sidebar-inner {
background-color: var(--colors-grayBase);
color: #000;
}
.pro-sidebar .pro-menu a {
color: #000;
}
.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item {
padding: 5px 30px 5px 20px;
}