From fac0e78c3d0781a4e06b43a95d3d3f2557daeebf Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Mon, 8 Aug 2022 16:16:19 +0200 Subject: [PATCH] moved search bar and library to the top of menu, updated some more overriding styles --- packages/web/components/templates/Menu.tsx | 18 +-- .../templates/homeFeed/HomeFeedContainer.tsx | 145 ++++++++++-------- .../templates/homeFeed/LibrarySearchBar.tsx | 9 +- packages/web/pages/_app.tsx | 3 + packages/web/pages/home.tsx | 2 - packages/web/styles/menu.css | 14 ++ 6 files changed, 109 insertions(+), 82 deletions(-) create mode 100644 packages/web/styles/menu.css diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index eacae4eff..d586e6ce0 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -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 ( diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 7196f0cb1..f3a8d2998 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -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 = { - 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 = { +// 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(null) - const [shareTarget, setShareTarget] = useState( - undefined - ) + const [shareTarget, setShareTarget] = + useState(undefined) - const [snoozeTarget, setSnoozeTarget] = useState( - undefined - ) + const [snoozeTarget, setSnoozeTarget] = + useState(undefined) - const [labelsTarget, setLabelsTarget] = useState( - undefined - ) + const [labelsTarget, setLabelsTarget] = + useState(undefined) const [showAddLinkModal, setShowAddLinkModal] = useState(false) const [showEditTitleModal, setShowEditTitleModal] = useState(false) @@ -670,7 +668,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { > {props.isValidating && props.items.length == 0 && } - + - {viewerData?.me && ( - - {Object.keys(SAVED_SEARCHES).map((key) => { - const isInboxTerm = (term: string) => { - return !term || term === 'in:inbox' - } + { //viewerData?.me && ( + // + // {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 ( + // + // ) + // })} + // + //) + } - const searchQuery = SAVED_SEARCHES[key] - const style = - searchQuery === props.searchTerm || - (!props.searchTerm && isInboxTerm(searchQuery)) - ? 'ctaDarkYellow' - : 'ctaLightGray' - return ( - - ) - })} - - )} {!props.isValidating && props.items.length == 0 ? ( { diff --git a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx index e9127e0cd..4d0c1fc96 100644 --- a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx +++ b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx @@ -49,7 +49,14 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { ) return ( - + .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; +} \ No newline at end of file