From bf7f64de6c70ea0bc2ce92deb94f6e6289e78060 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Fri, 29 Jul 2022 00:15:37 +0200 Subject: [PATCH 01/24] Menu Component Start --- packages/web/components/templates/Menu.tsx | 32 ++++++++++++++++++++++ packages/web/package.json | 1 + packages/web/stories/Menu.stories.tsx | 29 ++++++++++++++++++++ 3 files changed, 62 insertions(+) create mode 100644 packages/web/components/templates/Menu.tsx create mode 100644 packages/web/stories/Menu.stories.tsx diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx new file mode 100644 index 000000000..22ec96aea --- /dev/null +++ b/packages/web/components/templates/Menu.tsx @@ -0,0 +1,32 @@ +import React, { ReactNode } from 'react' + +//import { useRouter } from 'next/router' + +type MenuItem = { + name: string + action?: () => void + url?: string +} +type MenuProps = { + items: Array +} + +export const Menu = ({ items }: MenuProps) => { + //const router = useRouter() + console.log(items) + return ( + <> + {/* + +
+
+

Panel

+
+
*/} + + ) +} diff --git a/packages/web/package.json b/packages/web/package.json index cf0f6317f..aa9694872 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -38,6 +38,7 @@ "next": "^12.1.0", "phosphor-react": "^1.4.0", "pspdfkit": "^2022.2.3", + "pulling": "^2.0.1", "react": "^17.0.2", "react-apple-login": "^1.1.3", "react-colorful": "^5.5.1", diff --git a/packages/web/stories/Menu.stories.tsx b/packages/web/stories/Menu.stories.tsx new file mode 100644 index 000000000..fbef6499f --- /dev/null +++ b/packages/web/stories/Menu.stories.tsx @@ -0,0 +1,29 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +//import { updateThemeLocally } from '../lib/themeUpdater' +//import { ThemeId } from '../components/tokens/stitches.config' +import { Menu } from '../components/templates/Menu' + +export default { + title: 'Components/Menu', + component: Menu, + argTypes: { + item: { + description: 'Menu Item', + }, + action: { + description: 'Action that fires on click.', + }, + url: { + description: 'going to a specific link', + }, + }, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + {args.items[0]} +) + +export const MenuStory = Template.bind({}) +MenuStory.args = { + items: [{ name: 'Home' }], +} From 1564b52535dd6f2b3e3f12086c62824dc00aaefb Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Mon, 1 Aug 2022 03:21:29 +0200 Subject: [PATCH 02/24] Added Menu on the home page with static items --- packages/web/components/templates/Menu.tsx | 35 +++++++------------ .../templates/homeFeed/HomeFeedContainer.tsx | 3 +- packages/web/package.json | 2 +- packages/web/pages/home.tsx | 22 ++++++------ packages/web/stories/Menu.stories.tsx | 12 +++---- 5 files changed, 33 insertions(+), 41 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 22ec96aea..311e7acc6 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -1,32 +1,21 @@ import React, { ReactNode } from 'react' +import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar' +import 'react-pro-sidebar/dist/css/styles.css' //import { useRouter } from 'next/router' -type MenuItem = { - name: string - action?: () => void - url?: string -} -type MenuProps = { - items: Array -} - -export const Menu = ({ items }: MenuProps) => { - //const router = useRouter() - console.log(items) +export const Menubar = () => { return ( <> - {/* - -
-
-

Panel

-
-
*/} + + + Home + Today + Read Later + Highlights + NewsLetters + + ) } diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 5d9610987..7196f0cb1 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -661,7 +661,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { alignment="center" css={{ px: '$3', - width: '100%', + width: '75%', + display: 'inline-flex', '@smDown': { px: '$2', }, diff --git a/packages/web/package.json b/packages/web/package.json index aa9694872..8088e84b3 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -38,12 +38,12 @@ "next": "^12.1.0", "phosphor-react": "^1.4.0", "pspdfkit": "^2022.2.3", - "pulling": "^2.0.1", "react": "^17.0.2", "react-apple-login": "^1.1.3", "react-colorful": "^5.5.1", "react-dom": "^17.0.2", "react-hot-toast": "^2.1.1", + "react-pro-sidebar": "^0.7.1", "react-super-responsive-table": "^5.2.1", "react-topbar-progress-indicator": "^4.1.1", "react-twitter-widgets": "^1.10.0", diff --git a/packages/web/pages/home.tsx b/packages/web/pages/home.tsx index 1e1201f72..0d0aa4c55 100644 --- a/packages/web/pages/home.tsx +++ b/packages/web/pages/home.tsx @@ -2,6 +2,7 @@ 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 { return @@ -9,16 +10,17 @@ export default function Home(): JSX.Element { function LoadedContent(): JSX.Element { return ( - - + <> + + - - + + ) } diff --git a/packages/web/stories/Menu.stories.tsx b/packages/web/stories/Menu.stories.tsx index fbef6499f..2677d18f3 100644 --- a/packages/web/stories/Menu.stories.tsx +++ b/packages/web/stories/Menu.stories.tsx @@ -1,11 +1,11 @@ import { ComponentStory, ComponentMeta } from '@storybook/react' //import { updateThemeLocally } from '../lib/themeUpdater' //import { ThemeId } from '../components/tokens/stitches.config' -import { Menu } from '../components/templates/Menu' +import { Menubar } from '../components/templates/Menu' export default { title: 'Components/Menu', - component: Menu, + component: Menubar, argTypes: { item: { description: 'Menu Item', @@ -17,13 +17,13 @@ export default { description: 'going to a specific link', }, }, -} as ComponentMeta +} as ComponentMeta -const Template: ComponentStory = (args) => ( - {args.items[0]} +const Template: ComponentStory = () => ( + ) export const MenuStory = Template.bind({}) MenuStory.args = { - items: [{ name: 'Home' }], + items: ['Home', ], } From 5f2bc1bc130070c7d9769b66094f29072049fdd3 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 3 Aug 2022 19:24:13 +0200 Subject: [PATCH 03/24] Added links to the Menu Items except Today --- packages/web/components/templates/Menu.tsx | 53 +++++++++++++++++----- 1 file changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 311e7acc6..971c347d4 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -1,21 +1,50 @@ +import Link from 'next/link' import React, { ReactNode } from 'react' + import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar' import 'react-pro-sidebar/dist/css/styles.css' - +import { styled } from '../tokens/stitches.config' //import { useRouter } from 'next/router' +//const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 export const Menubar = () => { return ( - <> - - - Home - Today - Read Later - Highlights - NewsLetters - - - + + + + + Home + + + + + Today + + + + + Read Later + + + + + Highlights + + + + + Newsletters + + + + ) } From ed8677efaf46a81bcf81d8f35d59e274a9184362 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 3 Aug 2022 21:27:17 +0200 Subject: [PATCH 04/24] updated links for Today and updated stories --- packages/web/components/templates/Menu.tsx | 28 ++++++++++++++-------- packages/web/stories/Menu.stories.tsx | 15 +----------- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 971c347d4..c45ad8d4e 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -1,12 +1,23 @@ import Link from 'next/link' -import React, { ReactNode } from 'react' - -import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar' -import 'react-pro-sidebar/dist/css/styles.css' +import React from 'react' import { styled } from '../tokens/stitches.config' -//import { useRouter } from 'next/router' -//const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 +import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' +import 'react-pro-sidebar/dist/css/styles.css' + + +const calculateTodayMenuItem = () => { + const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 + + const hrefStr = `/home?q=in%3Ainbox+saved%3A${ + new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] + }Z${timeZoneHourDiff.toLocaleString('en-US', { + signDisplay: 'always', + })}Z%2B..*` + + console.log(hrefStr) + return hrefStr +} export const Menubar = () => { return ( { - + Today diff --git a/packages/web/stories/Menu.stories.tsx b/packages/web/stories/Menu.stories.tsx index 2677d18f3..cf488b9c8 100644 --- a/packages/web/stories/Menu.stories.tsx +++ b/packages/web/stories/Menu.stories.tsx @@ -6,17 +6,6 @@ import { Menubar } from '../components/templates/Menu' export default { title: 'Components/Menu', component: Menubar, - argTypes: { - item: { - description: 'Menu Item', - }, - action: { - description: 'Action that fires on click.', - }, - url: { - description: 'going to a specific link', - }, - }, } as ComponentMeta const Template: ComponentStory = () => ( @@ -24,6 +13,4 @@ const Template: ComponentStory = () => ( ) export const MenuStory = Template.bind({}) -MenuStory.args = { - items: ['Home', ], -} + From 80c8a7be6d81e4095a100540f44a286ce3797b71 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 3 Aug 2022 23:06:46 +0200 Subject: [PATCH 05/24] updating today URL that works --- packages/web/components/templates/Menu.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index c45ad8d4e..ab514dc0b 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -5,17 +5,15 @@ import { styled } from '../tokens/stitches.config' import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' import 'react-pro-sidebar/dist/css/styles.css' - const calculateTodayMenuItem = () => { const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 - + // console.log(timeZoneHourDiff.toLocaleString('en-US', { + // signDisplay: 'always', + // })) const hrefStr = `/home?q=in%3Ainbox+saved%3A${ new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] - }Z${timeZoneHourDiff.toLocaleString('en-US', { - signDisplay: 'always', - })}Z%2B..*` + }Z%${timeZoneHourDiff}B2..*` - console.log(hrefStr) return hrefStr } export const Menubar = () => { @@ -23,7 +21,8 @@ export const Menubar = () => { From 82e7a956d31644e8236d453e3d62088400c0bd8f Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 3 Aug 2022 23:46:37 +0200 Subject: [PATCH 06/24] tried css to change the background --- packages/web/components/templates/Menu.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index ab514dc0b..c4fb9bcc1 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -5,6 +5,15 @@ import { styled } from '../tokens/stitches.config' import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' import 'react-pro-sidebar/dist/css/styles.css' +// Styles-------------------------------- + +const MenuStyle = styled(ProSidebar, { + display: 'inline-block', + //override background to match the design? +}) + +// Functions------------------------------ + const calculateTodayMenuItem = () => { const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 // console.log(timeZoneHourDiff.toLocaleString('en-US', { @@ -16,15 +25,10 @@ const calculateTodayMenuItem = () => { return hrefStr } + export const Menubar = () => { return ( - + @@ -45,13 +49,12 @@ export const Menubar = () => { Highlights - Newsletters - + ) } From 3d36309b7c62ccf24ad2eec79e33742f012022ce Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 3 Aug 2022 23:48:41 +0200 Subject: [PATCH 07/24] fixed the runtime error --- packages/web/components/templates/Menu.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index c4fb9bcc1..1179db927 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -9,7 +9,9 @@ import 'react-pro-sidebar/dist/css/styles.css' const MenuStyle = styled(ProSidebar, { display: 'inline-block', - //override background to match the design? + '&:first-child': { + background: '$grayBgActive', + }, }) // Functions------------------------------ @@ -49,6 +51,7 @@ export const Menubar = () => { Highlights + Newsletters From 3a513cd4c632233ee66712eb08bb077e88b8d7ba Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Fri, 5 Aug 2022 16:28:03 +0200 Subject: [PATCH 08/24] Updating menu with new dynamic items like labels and subscriptions, also updating the architecture --- packages/web/components/templates/Menu.tsx | 156 +++++++++++++++------ 1 file changed, 114 insertions(+), 42 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 1179db927..eacae4eff 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -1,63 +1,135 @@ import Link from 'next/link' -import React from 'react' -import { styled } from '../tokens/stitches.config' +import React, { useEffect, useState } from 'react' + +import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery' +import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' import 'react-pro-sidebar/dist/css/styles.css' -// Styles-------------------------------- +import { TagSimple } from 'phosphor-react' -const MenuStyle = styled(ProSidebar, { - display: 'inline-block', - '&:first-child': { - background: '$grayBgActive', - }, -}) +// styles +const proSideBarStyles = { + display: 'inline-block', +} -// Functions------------------------------ +// Types +type MenuItems = { + label: string + query: string + icon: string | JSX.Element | null + href: string +} + +// Functions const calculateTodayMenuItem = () => { const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 + const hrefStr = `?q=in%3Ainbox+saved%3A${ + new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] + }Z%${timeZoneHourDiff}B2..*` // console.log(timeZoneHourDiff.toLocaleString('en-US', { // signDisplay: 'always', // })) - const hrefStr = `/home?q=in%3Ainbox+saved%3A${ - new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] - }Z%${timeZoneHourDiff}B2..*` - return hrefStr } +const createDynamicMenuItems = ( + labels: Array, + subscriptions: Array +) => { + const labelsList: Array = [] + const subscriptionsList: Array = [] + // Create labels list + if (labels) { + labels.map((l) => + labelsList.push({ + label: l.name, + query: `label:"${l.name}"`, + icon: , + href: `?q=label:"${l.name}"`, + }) + ) + } + // create subscriptions list + if (subscriptions) { + subscriptions.map((s) => + subscriptionsList.push({ + label: s.name, + query: `subscription:"${s.subscription}"`, + icon: 'subscription', + href: `?q=subscription:"${s.subscription}"`, + }) + ) + } + return [...labelsList, ...subscriptionsList] +} + +// Component export const Menubar = () => { + const { labels } = useGetLabelsQuery() + const { subscriptions } = useGetSubscriptionsQuery() + + const [menuList, setMenuList] = useState>([]) + + useEffect(() => { + setMenuList([ + { + label: 'Home', + query: 'in:inbox', + icon: null, + href: '/home', + }, + { + label: 'Today', + query: 'in:inbox -label:Newsletter', + icon: null, + href: calculateTodayMenuItem(), + }, + { + label: 'Read Later', + query: 'in:inbox -label:Newsletter', + icon: null, + href: `?q=in inbox+-label Newsletter`, + }, + { + label: 'HighLights', + query: 'type:highlights', + icon: null, + href: `?q=type highlights`, + }, + { + label: 'Newsletters', + query: 'in:inbox label:Newsletter', + icon: null, + href: `?q=in inbox+label Newsletter`, + }, + ...createDynamicMenuItems(labels, subscriptions), + ]) + }, []) + // const menuItems = useMemo(() => { + // if (labels || subscriptions) { + // setMenuList( [...menuList, ...createDynamicMenuItems(labels, subscriptions)]) + // } + // }, [labels, subscriptions, menuList]) + + console.log('menuList', menuList) + return ( - - - - - Home - - - - - Today - - - - - Read Later - - - - - Highlights - - - - - Newsletters - - + + + {menuList.length > 0 && + menuList.map((item) => { + return ( + + + {item.label} + + + ) + })} - + ) } From fac0e78c3d0781a4e06b43a95d3d3f2557daeebf Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Mon, 8 Aug 2022 16:16:19 +0200 Subject: [PATCH 09/24] 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 From 42eba03de72b5f22199737e459548db68b9ba809 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 10 Aug 2022 18:59:01 +0200 Subject: [PATCH 10/24] adding text color variable so that it works for both themes for menu --- packages/web/components/templates/Menu.tsx | 9 --------- packages/web/styles/menu.css | 22 ++++++++++++++-------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index d586e6ce0..a21c707e4 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -27,9 +27,6 @@ const calculateTodayMenuItem = () => { const hrefStr = `?q=in%3Ainbox+saved%3A${ new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] }Z%${timeZoneHourDiff}B2..*` - // console.log(timeZoneHourDiff.toLocaleString('en-US', { - // signDisplay: 'always', - // })) return hrefStr } @@ -106,12 +103,6 @@ export const Menubar = () => { ...createDynamicMenuItems(labels, subscriptions), ]) }, [labels, subscriptions]) - // const menuItems = useMemo(() => { - // if (labels || subscriptions) { - // setMenuList( [...menuList, ...createDynamicMenuItems(labels, subscriptions)]) - // } - // }, [labels, subscriptions, menuList]) - return ( diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index 29c2af5c7..881117862 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -1,14 +1,20 @@ /* Menu Override styles */ -.pro-sidebar > .pro-sidebar-inner { +.pro-sidebar>.pro-sidebar-inner { background-color: var(--colors-grayBase); - color: #000; - } - - .pro-sidebar .pro-menu a { - color: #000; + color: var(--colors-utilityTextDefault); } -.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item { - padding: 5px 30px 5px 20px; +.pro-sidebar .pro-menu a { + color: var(--colors-utilityTextDefault); +} + +.pro-sidebar .pro-menu .pro-menu-item>.pro-inner-item { + padding: 3px 20px 3px 20px; +} + +.pro-sidebar .pro-menu .pro-menu-item>.pro-inner-item>.pro-icon-wrapper { + width: 20px; + min-width: 0; + height: 25px; } \ No newline at end of file From f0d4c6fd7ffec0e74b70ed7fe305653f6ebc7234 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 10 Aug 2022 19:00:30 +0200 Subject: [PATCH 11/24] Removing the commented out code because now the functionality is supported through the Menu for Big screens --- .../templates/homeFeed/HomeFeedContainer.tsx | 63 ------------------- 1 file changed, 63 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index f3a8d2998..f80feefeb 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -53,21 +53,6 @@ import { export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' -// 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 fetchSearchResults = async (query: string, cb: any) => { if (!query.startsWith('#')) return const res = await typeaheadSearchQuery({ @@ -727,54 +712,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { searchTerm={props.searchTerm} applySearchQuery={props.applySearchQuery} /> - { //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 ( - // - // ) - // })} - // - //) - } {!props.isValidating && props.items.length == 0 ? ( Date: Wed, 10 Aug 2022 19:41:33 +0200 Subject: [PATCH 12/24] Cleaning up CSS and theming --- packages/web/styles/menu.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index 881117862..bd590bd1e 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -1,20 +1,20 @@ /* Menu Override styles */ -.pro-sidebar>.pro-sidebar-inner { - background-color: var(--colors-grayBase); - color: var(--colors-utilityTextDefault); +.pro-sidebar > .pro-sidebar-inner, .pro-sidebar .pro-menu a { + background-color: var(--colors-grayBase); + color: var(--colors-utilityTextDefault); } -.pro-sidebar .pro-menu a { - color: var(--colors-utilityTextDefault); +.pro-sidebar .pro-menu a:hover { + color: var(--colors-utilityTextDefault); } -.pro-sidebar .pro-menu .pro-menu-item>.pro-inner-item { - padding: 3px 20px 3px 20px; +.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item { + padding: 3px 20px 3px 20px; } -.pro-sidebar .pro-menu .pro-menu-item>.pro-inner-item>.pro-icon-wrapper { - width: 20px; - min-width: 0; - height: 25px; -} \ No newline at end of file +.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-icon-wrapper { + width: 20px; + min-width: 0; + height: 25px; +} From 496e3d651dbd095f747068c78f201ca9632bf8fd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:31:09 +0800 Subject: [PATCH 13/24] Move the menu off the homefeedgrid into new library layout --- .../templates/homeFeed/HomeFeedContainer.tsx | 89 +++++++++++++++---- .../templates/homeFeed/LibrarySearchBar.tsx | 9 +- packages/web/pages/home.tsx | 24 ++--- 3 files changed, 84 insertions(+), 38 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 3bb8cc751..e500d2db7 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -53,6 +53,20 @@ import { export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' +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 fetchSearchResults = async (query: string, cb: any) => { if (!query.startsWith('#')) return const res = await typeaheadSearchQuery({ @@ -82,14 +96,17 @@ 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) @@ -656,8 +673,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { alignment="center" css={{ px: '$3', - width: '75%', - display: 'inline-flex', + width: '100%', '@smDown': { px: '$2', }, @@ -665,16 +681,7 @@ 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' + } + 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 4d0c1fc96..e9127e0cd 100644 --- a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx +++ b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx @@ -49,14 +49,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element { ) return ( - + @@ -8,17 +9,16 @@ export default function Home(): JSX.Element { function LoadedContent(): JSX.Element { return ( - <> - - + + - - + + ) } From c127edbf737f6afb2b157038dc6f130552b5e0dc Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:32:34 +0800 Subject: [PATCH 14/24] Remove margin as the container will handle this, try making an item active, use new icon --- packages/web/components/templates/Menu.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index a21c707e4..0fa765fcb 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -5,18 +5,18 @@ import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuer import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' -import { TagSimple } from 'phosphor-react' +import { Tag, TagSimple } from 'phosphor-react' // styles const proSideBarStyles = { display: 'inline-block', - marginTop:'120px', } // Types type MenuItems = { label: string query: string + active?: boolean icon: string | JSX.Element | null href: string } @@ -42,7 +42,7 @@ const createDynamicMenuItems = ( labelsList.push({ label: l.name, query: `label:"${l.name}"`, - icon: , + icon: , href: `?q=label:"${l.name}"`, }) ) @@ -75,6 +75,7 @@ export const Menubar = () => { query: 'in:inbox', icon: null, href: '/home', + active: true, }, { label: 'Today', @@ -109,7 +110,7 @@ export const Menubar = () => { {menuList.length > 0 && menuList.map((item) => { return ( - + {item.label} From 8fa287c540ea0e23fed6c2892e1748e85845f688 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:33:14 +0800 Subject: [PATCH 15/24] Use library background color --- packages/web/styles/menu.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index bd590bd1e..bb266b231 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -1,7 +1,7 @@ /* Menu Override styles */ .pro-sidebar > .pro-sidebar-inner, .pro-sidebar .pro-menu a { - background-color: var(--colors-grayBase); + background-color: var(--colors-libraryBackground); color: var(--colors-utilityTextDefault); } @@ -10,9 +10,14 @@ } .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item { - padding: 3px 20px 3px 20px; + padding: 8px 20px 3px 20px; } +/* .pro-sidebar .pro-menu .active > .pro-inner-item { + background-color: #F8F8F8; + border-radius: 8px; +} */ + .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-icon-wrapper { width: 20px; min-width: 0; From 29a1f466ef5cc640114f7d92058d4e0cf8805dcd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:33:33 +0800 Subject: [PATCH 16/24] Add new colours for library --- packages/web/components/tokens/stitches.config.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index bca8ade05..afb99a2a1 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -112,6 +112,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = grayBg: '#FFFFFF', grayBgActive: '#e6e6e6', grayBorder: '#F0F0F0', + lightBorder: '#F0F0F0', grayTextContrast: '#3A3939', graySolid: '#9C9B9A', textDefault: 'rgba(255, 255, 255, 0.8)', @@ -155,6 +156,11 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = labelButtonsBg: '#F5F5F4', tooltipIcons: '#FDFAEC', + textSubtle: '#605F5D', + libraryBackground: '#FFFFFF', + border: '#F0F0F0', + + //utility textNonEssential: 'rgba(10, 8, 6, 0.4)', overlay: 'rgba(63, 62, 60, 0.2)', @@ -207,6 +213,10 @@ const darkThemeSpec = { avatarBg: '#000000', avatarFont: 'rgba(255, 255, 255, 0.8)', + textSubtle: '#AAAAAA', + libraryBackground: '#252525', + border: '#323232', + //utility utilityTextSubtle: 'rgba(255, 255, 255, 0.65)', textNonEssential: 'rgba(10, 8, 6, 0.4)', From 4f19d9f5ec05f77ecad9124b7865b9a807fb717c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:34:14 +0800 Subject: [PATCH 17/24] Add new text style --- packages/web/components/elements/StyledText.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index bf62d2630..59fad78e0 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -152,6 +152,15 @@ const textVariants = { fontWeight: '500', lineHeight: 'unset', }, + libraryHeader: { + pt: '0px', + m: '0px', + fontSize: 24, + fontFamily: 'inter', + lineHeight: 'unset', + fontWeight: 'medium', + color: '$textSubtle', + }, error: { color: '$error', fontSize: '$2', From 858448e0d4a8b0cf1595b302819a5fcab06c060d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 17:34:44 +0800 Subject: [PATCH 18/24] Update style for new library, display progress bar backgrounds --- packages/web/components/elements/Button.tsx | 4 +-- .../web/components/elements/ProgressBar.tsx | 1 + .../LibraryCards/GridLinkedItemCard.tsx | 2 +- yarn.lock | 29 ++++++++++++++++++- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index a3f8dd67d..7ad86281c 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -20,7 +20,7 @@ export const Button = styled('button', { }, ctaDarkYellow: { border: 0, - fontSize: '16px', + fontSize: '14px', fontWeight: 500, fontStyle: 'normal', fontFamily: 'Inter', @@ -28,7 +28,7 @@ export const Button = styled('button', { cursor: 'pointer', color: '$omnivoreGray', bg: '$omnivoreCtaYellow', - p: '10px 12px', + p: '10px 13px', }, ctaOutlineYellow: { boxSizing: 'border-box', diff --git a/packages/web/components/elements/ProgressBar.tsx b/packages/web/components/elements/ProgressBar.tsx index c8d15b868..cc39172a5 100644 --- a/packages/web/components/elements/ProgressBar.tsx +++ b/packages/web/components/elements/ProgressBar.tsx @@ -15,6 +15,7 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element { width: '100%', borderRadius: '$1', overflow: 'hidden', + backgroundColor: props.backgroundColor, }} > Date: Thu, 11 Aug 2022 17:36:09 +0800 Subject: [PATCH 19/24] Add page with new library layout --- .../elements/images/LibraryGridLayoutIcon.tsx | 21 +++ .../elements/images/LibraryListLayoutIcon.tsx | 13 ++ .../patterns/LibraryCards/LibraryGridCard.tsx | 178 ++++++++++++++++++ .../templates/library/LibraryAvatar.tsx | 62 ++++++ .../templates/library/LibraryContainer.tsx | 35 ++++ .../templates/library/LibraryHeadline.tsx | 23 +++ .../templates/library/LibraryList.tsx | 114 +++++++++++ .../templates/library/LibraryMenu.tsx | 14 ++ .../templates/library/LibrarySearchBar.tsx | 97 ++++++++++ packages/web/pages/library.tsx | 5 + 10 files changed, 562 insertions(+) create mode 100644 packages/web/components/elements/images/LibraryGridLayoutIcon.tsx create mode 100644 packages/web/components/elements/images/LibraryListLayoutIcon.tsx create mode 100644 packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx create mode 100644 packages/web/components/templates/library/LibraryAvatar.tsx create mode 100644 packages/web/components/templates/library/LibraryContainer.tsx create mode 100644 packages/web/components/templates/library/LibraryHeadline.tsx create mode 100644 packages/web/components/templates/library/LibraryList.tsx create mode 100644 packages/web/components/templates/library/LibraryMenu.tsx create mode 100644 packages/web/components/templates/library/LibrarySearchBar.tsx create mode 100644 packages/web/pages/library.tsx diff --git a/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx b/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx new file mode 100644 index 000000000..afa40677a --- /dev/null +++ b/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx @@ -0,0 +1,21 @@ +type LibraryGridLayoutIconProps = { + color: string +} + +export function LibraryGridLayoutIcon(props: LibraryGridLayoutIconProps): JSX.Element { + return ( + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/elements/images/LibraryListLayoutIcon.tsx b/packages/web/components/elements/images/LibraryListLayoutIcon.tsx new file mode 100644 index 000000000..01e413815 --- /dev/null +++ b/packages/web/components/elements/images/LibraryListLayoutIcon.tsx @@ -0,0 +1,13 @@ +type LibraryListLayoutIconProps = { + color: string +} + +export function LibraryListLayoutIcon(props: LibraryListLayoutIconProps): JSX.Element { + return ( + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx new file mode 100644 index 000000000..01b13b9f8 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -0,0 +1,178 @@ +import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' +import { CoverImage } from '../../elements/CoverImage' +import { StyledText } from '../../elements/StyledText' +import { authoredByText } from '../ArticleSubtitle' +import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon' +import { theme } from '../../tokens/stitches.config' +import { CardMenu } from '../CardMenu' +import { LabelChip } from '../../elements/LabelChip' +import { ProgressBar } from '../../elements/ProgressBar' +import type { LinkedItemCardProps } from './CardTypes' + +export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { + return ( + { + props.handleAction('showDetail') + }} + > + {props.item.image && ( + { + ;(e.target as HTMLElement).style.display = 'none' + }} + /> + )} + + + + {/* { + // This is here to prevent menu click events from bubbling + // up and causing us to "click" on the link item. + e.stopPropagation() + }} + > + + } + actionHandler={props.handleAction} + /> + */} + + {/* + + {props.item.author && ( + + {authoredByText(props.item.author)} + + )} + + {props.originText} + + + */} + + + + {props.item.description} + + + + + {props.item.labels?.map(({ name, color }, index) => ( + + ))} + + + + ) +} + +type CardTitleProps = { + title: string +} + +function CardTitle(props: CardTitleProps): JSX.Element { + return ( + + {props.title} + + ) +} diff --git a/packages/web/components/templates/library/LibraryAvatar.tsx b/packages/web/components/templates/library/LibraryAvatar.tsx new file mode 100644 index 000000000..e653036f3 --- /dev/null +++ b/packages/web/components/templates/library/LibraryAvatar.tsx @@ -0,0 +1,62 @@ +import { SpanBox, VStack } from '../../elements/LayoutPrimitives' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' + +import { styled } from '../../tokens/stitches.config' +import { Root, Image, Fallback } from '@radix-ui/react-avatar' + +type AvatarProps = { + viewer?: UserBasicData +} + +export function LibraryAvatar(props: AvatarProps): JSX.Element { + return ( + + + + {props.viewer?.profile.pictureUrl + ? + : {props.viewer?.name.charAt(0) ?? ''} + } + + + {/* This spacer is to help align with items in the search box */} + + + ) +} + +const StyledAvatar = styled(Root, { + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + verticalAlign: 'middle', + overflow: 'hidden', + userSelect: 'none', +}) + +const StyledImage = styled(Image, { + width: '100%', + height: '100%', + objectFit: 'cover', + + '&:hover': { + opacity: '48%', + }, +}) + +const StyledFallback = styled(Fallback, { + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '20px', + backgroundColor: '$omnivoreCtaYellow', + color: '#595959', +}) diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx new file mode 100644 index 000000000..47d0d883b --- /dev/null +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -0,0 +1,35 @@ +import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' +import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' +import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' +import { LibraryMenu } from './LibraryMenu' +import { LibraryAvatar } from './LibraryAvatar' +import { LibrarySearchBar } from './LibrarySearchBar' +import { LibraryList } from './LibraryList' +import { LibraryHeadline } from './LibraryHeadline' + + +export function LibraryContainer(): JSX.Element { + useGetUserPreferences() + + const { viewerData } = useGetViewerQuery() + + return ( + <> + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/templates/library/LibraryHeadline.tsx b/packages/web/components/templates/library/LibraryHeadline.tsx new file mode 100644 index 000000000..28c2e22c9 --- /dev/null +++ b/packages/web/components/templates/library/LibraryHeadline.tsx @@ -0,0 +1,23 @@ +import { HStack } from '../../elements/LayoutPrimitives' +import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' +import { StyledText } from '../../elements/StyledText' +import { theme } from '../../tokens/stitches.config' +import { LibraryListLayoutIcon } from '../../elements/images/LibraryListLayoutIcon' +import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIcon' +import { Button } from '../../elements/Button' + + +export function LibraryHeadline(): JSX.Element { + useGetUserPreferences() + + return ( + + Home + + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx new file mode 100644 index 000000000..f0b55a805 --- /dev/null +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -0,0 +1,114 @@ +import { Box } from '../../elements/LayoutPrimitives' +import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' +import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' +import { useMemo, useState } from 'react' +import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery' +import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes' +import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard' + +export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' + + +export function LibraryList(): JSX.Element { + useGetUserPreferences() + + const [layout, setLayout] = useState('GRID_LAYOUT') + const { viewerData } = useGetViewerQuery() + + + const defaultQuery = { + limit: 50, + sortDescending: true, + searchQuery: undefined, + } + + const { itemsPages, size, setSize, isValidating, performActionOnItem } = + useGetLibraryItemsQuery(defaultQuery) + + const libraryItems = useMemo(() => { + const items = + itemsPages?.flatMap((ad) => { + return ad.search.edges + }) || [] + return items + }, [itemsPages, performActionOnItem]) + + return ( + + {/* // {!isValidating && items.length == 0 ? ( + // { + + // }} + // /> + // ) : ( */} + + {libraryItems.map((linkedItem) => ( + div': { + bg: '$libraryBackground', + }, + '&:focus': { + '> div': { + bg: '$grayBgActive', + }, + }, + '&:hover': { + '> div': { + bg: '$grayBgActive', + }, + }, + }} + > + {viewerData?.me && ( + { + + }} + /> + )} + + ))} + + {/* Extra padding at bottom to give space for scrolling */} + + + ) +} \ No newline at end of file diff --git a/packages/web/components/templates/library/LibraryMenu.tsx b/packages/web/components/templates/library/LibraryMenu.tsx new file mode 100644 index 000000000..baf771a7b --- /dev/null +++ b/packages/web/components/templates/library/LibraryMenu.tsx @@ -0,0 +1,14 @@ +import { VStack } from '../../elements/LayoutPrimitives' +import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' +import { Menubar } from '../Menu' + + +export function LibraryMenu(): JSX.Element { + useGetUserPreferences() + + return ( + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx new file mode 100644 index 000000000..8831e7fdf --- /dev/null +++ b/packages/web/components/templates/library/LibrarySearchBar.tsx @@ -0,0 +1,97 @@ +import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' +import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' +import { useRouter } from 'next/router' +import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' +import { useState } from 'react' +import { FormInput } from '../../elements/FormElements' +import { Button } from '../../elements/Button' +import { X } from 'phosphor-react' +import { theme } from '../../tokens/stitches.config' + + +export function LibrarySearchBar(): JSX.Element { + useGetUserPreferences() + + + const router = useRouter() + const [searchTerm, setSearchTerm] = useState('') + const { viewerData } = useGetViewerQuery() + + return ( + <> + + +
{ + event.preventDefault() + // props.applySearchQuery(searchTerm || '') + // inputRef.current?.blur() + }} + > + { + // event.target.select() + // setFocused(true) + // }} + // onBlur={() => { + // setFocused(false) + // }} + // onChange={(event) => { + // setSearchTerm(event.target.value) + // }} + /> + + {searchTerm && ( + + + + + + )} +
+ + + + ) +} \ No newline at end of file diff --git a/packages/web/pages/library.tsx b/packages/web/pages/library.tsx new file mode 100644 index 000000000..839ff3251 --- /dev/null +++ b/packages/web/pages/library.tsx @@ -0,0 +1,5 @@ +import { LibraryContainer } from '../components/templates/library/LibraryContainer' + +export default function Library(): JSX.Element { + return +} From b6af9d3e5c6bc3950879b674c176fe272e44dc06 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 11 Aug 2022 19:21:05 +0800 Subject: [PATCH 20/24] Add libraryActive colour --- packages/web/components/tokens/stitches.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index afb99a2a1..b018a3c24 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -157,6 +157,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = tooltipIcons: '#FDFAEC', textSubtle: '#605F5D', + libraryActive: '#F8F8F8', libraryBackground: '#FFFFFF', border: '#F0F0F0', @@ -214,6 +215,7 @@ const darkThemeSpec = { avatarFont: 'rgba(255, 255, 255, 0.8)', textSubtle: '#AAAAAA', + libraryActive: '#3B3938', libraryBackground: '#252525', border: '#323232', From 5e5ed356877110fea680251454d38d22ba99be6b Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Fri, 12 Aug 2022 01:16:22 +0200 Subject: [PATCH 21/24] Added Code to support sub menu for Labels and subscriptions --- packages/web/components/templates/Menu.tsx | 64 +++++++++++++++++++--- 1 file changed, 56 insertions(+), 8 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 0fa765fcb..94d570eda 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react' import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery' import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar' -import { Tag, TagSimple } from 'phosphor-react' +import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar' +import { Tag } from 'phosphor-react' // styles const proSideBarStyles = { @@ -37,7 +37,7 @@ const createDynamicMenuItems = ( const labelsList: Array = [] const subscriptionsList: Array = [] // Create labels list - if (labels) { + if (labels.length) { labels.map((l) => labelsList.push({ label: l.name, @@ -48,7 +48,7 @@ const createDynamicMenuItems = ( ) } // create subscriptions list - if (subscriptions) { + if (subscriptions.length) { subscriptions.map((s) => subscriptionsList.push({ label: s.name, @@ -58,7 +58,7 @@ const createDynamicMenuItems = ( }) ) } - return [...labelsList, ...subscriptionsList] + return [{ labels: [...labelsList], subscriptions: [...subscriptionsList] }] } // Component @@ -67,8 +67,14 @@ export const Menubar = () => { const { subscriptions } = useGetSubscriptionsQuery() const [menuList, setMenuList] = useState>([]) + const [dynamicMenuItems, setDynamicMenuItems] = useState>([ + { labels: Array(), subscriptions: Array() }, + ]) useEffect(() => { + if (labels || subscriptions) { + setDynamicMenuItems(createDynamicMenuItems(labels, subscriptions)) + } setMenuList([ { label: 'Home', @@ -101,22 +107,64 @@ export const Menubar = () => { icon: null, href: `?q=in:inbox+label:Newsletter`, }, - ...createDynamicMenuItems(labels, subscriptions), ]) - }, [labels, subscriptions]) + },[labels, subscriptions]) + return ( {menuList.length > 0 && menuList.map((item) => { return ( - + {item.label} ) })} + {dynamicMenuItems.length > 0 && + dynamicMenuItems[0].labelsList.map((item: MenuItems) => { + return ( + + + + {item.label} + + + + ) + })} + {dynamicMenuItems.length > 0 && + dynamicMenuItems[0].subscriptionsList.map((item: MenuItems) => { + return ( + + + + {item.label} + + + + ) + })} ) From e4a66f8f9e9f78b3feecc6ec9b97021e69510201 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 12 Aug 2022 11:47:32 +0800 Subject: [PATCH 22/24] Use a single dictionary for labels and subscriptions --- packages/web/components/templates/Menu.tsx | 73 +++++++++++----------- packages/web/styles/menu.css | 5 ++ 2 files changed, 43 insertions(+), 35 deletions(-) diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 94d570eda..42d5e01d4 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -21,6 +21,11 @@ type MenuItems = { href: string } +type DynamicMenuItems = { + labels?: MenuItems[] + subscriptions?: MenuItems[] +} + // Functions const calculateTodayMenuItem = () => { const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 @@ -58,7 +63,7 @@ const createDynamicMenuItems = ( }) ) } - return [{ labels: [...labelsList], subscriptions: [...subscriptionsList] }] + return { labels: [...labelsList], subscriptions: [...subscriptionsList] } } // Component @@ -67,9 +72,7 @@ export const Menubar = () => { const { subscriptions } = useGetSubscriptionsQuery() const [menuList, setMenuList] = useState>([]) - const [dynamicMenuItems, setDynamicMenuItems] = useState>([ - { labels: Array(), subscriptions: Array() }, - ]) + const [dynamicMenuItems, setDynamicMenuItems] = useState({}) useEffect(() => { if (labels || subscriptions) { @@ -127,14 +130,13 @@ export const Menubar = () => { ) })} - {dynamicMenuItems.length > 0 && - dynamicMenuItems[0].labelsList.map((item: MenuItems) => { - return ( - - + {dynamicMenuItems.labels.map((item: MenuItems) => { + return ( { {item.label} - - - ) - })} - {dynamicMenuItems.length > 0 && - dynamicMenuItems[0].subscriptionsList.map((item: MenuItems) => { - return ( - - - - {item.label} - - - - ) - })} + ) + })} + + } + {dynamicMenuItems.subscriptions && + + {dynamicMenuItems.subscriptions.map((item: MenuItems) => { + return ( + + + {item.label} + + + ) + })} + + } ) diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index bb266b231..e711cdca9 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -5,6 +5,11 @@ color: var(--colors-utilityTextDefault); } +.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item { + color: var(--colors-utilityTextDefault); + background-color: var(--colors-libraryBackground); +} + .pro-sidebar .pro-menu a:hover { color: var(--colors-utilityTextDefault); } From 7a8516eb6bfe9a7e15652591249528f83a760fb9 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 12 Aug 2022 11:51:20 +0800 Subject: [PATCH 23/24] SVG attribute naming cleanup --- .../web/components/elements/images/LibraryGridLayoutIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx b/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx index afa40677a..13a2c9765 100644 --- a/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx +++ b/packages/web/components/elements/images/LibraryGridLayoutIcon.tsx @@ -5,7 +5,7 @@ type LibraryGridLayoutIconProps = { export function LibraryGridLayoutIcon(props: LibraryGridLayoutIconProps): JSX.Element { return ( - + From 745416d5f14820bd0d666cfdc49148796dd629b3 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 12 Aug 2022 12:07:49 +0800 Subject: [PATCH 24/24] Fix empty arrow function --- packages/web/components/templates/library/LibraryList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index f0b55a805..d104bf572 100644 --- a/packages/web/components/templates/library/LibraryList.tsx +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -100,7 +100,7 @@ export function LibraryList(): JSX.Element { item={linkedItem.node} viewer={viewerData.me} handleAction={(action: LinkedItemCardAction) => { - + console.log('card clicked') }} /> )}