From 2615a0d33ecb8832287647125880d5e60101e368 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 16 Feb 2024 14:41:49 +0800 Subject: [PATCH] Add new nav icons, fixes for highlights view on smaller screen --- .../elements/icons/HighlightsIcon.tsx | 44 ++++--- .../templates/homeFeed/HighlightsLayout.tsx | 41 +++--- .../templates/homeFeed/HomeFeedContainer.tsx | 2 + .../templates/navMenu/LibraryMenu.tsx | 123 +++++++++++++++++- .../web/components/tokens/stitches.config.ts | 6 +- 5 files changed, 179 insertions(+), 37 deletions(-) diff --git a/packages/web/components/elements/icons/HighlightsIcon.tsx b/packages/web/components/elements/icons/HighlightsIcon.tsx index ef882dce2..10684b273 100644 --- a/packages/web/components/elements/icons/HighlightsIcon.tsx +++ b/packages/web/components/elements/icons/HighlightsIcon.tsx @@ -4,38 +4,48 @@ import { IconProps } from './IconProps' import React from 'react' -export class FollowingIcon extends React.Component { +export class HighlightsIcon extends React.Component { render() { const size = (this.props.size || 26).toString() const color = (this.props.color || '#2A2A2A').toString() return ( + diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx index b28a172ca..1b66e1f91 100644 --- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx +++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx @@ -20,23 +20,24 @@ import { import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard' import { NotebookContent } from '../article/Notebook' import { EmptyHighlights } from './EmptyHighlights' -import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer' import { highlightsAsMarkdown } from './HighlightItem' +import { MenuHeaderButton } from './LibraryHeader' type HighlightItemsLayoutProps = { items: LibraryItem[] viewer: UserBasicData | undefined + showFilterMenu: boolean + setShowFilterMenu: (show: boolean) => void + gridContainerRef: React.RefObject } export function HighlightItemsLayout( props: HighlightItemsLayoutProps ): JSX.Element { - // const headerHeight = useGetHeaderHeight() - const [currentItem, setCurrentItem] = useState( - undefined - ) + const [currentItem, setCurrentItem] = + useState(undefined) const listReducer = ( state: LibraryItem[], @@ -106,10 +107,7 @@ export function HighlightItemsLayout( @@ -122,15 +120,12 @@ export function HighlightItemsLayout( + distribution="start" + > + + + + )} diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx index b6399f6fd..69144d824 100644 --- a/packages/web/components/templates/navMenu/LibraryMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx @@ -20,6 +20,10 @@ import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon' import Link from 'next/link' import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon' import { NavMenuFooter } from './Footer' +import { FollowingIcon } from '../../elements/icons/FollowingIcon' +import { HomeIcon } from '../../elements/icons/HomeIcon' +import { LibraryIcon } from '../../elements/icons/LibraryIcon' +import { HighlightsIcon } from '../../elements/icons/HighlightsIcon' export const LIBRARY_LEFT_MENU_WIDTH = '275px' @@ -110,13 +114,14 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element { css={{ width: '100%', px: '25px', - pb: '25px', + pb: '17px', pt: '4.5px', lineHeight: '1', }} > + @@ -139,6 +144,48 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element { ) } +const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => { + return ( + + } + /> + } + /> + } + /> + } + /> + + ) +} + function SavedSearches( props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined } ): JSX.Element { @@ -175,7 +222,7 @@ function SavedSearches( return ( @@ -400,6 +447,78 @@ function MenuPanel(props: MenuPanelProps): JSX.Element { ) } +type NavButtonProps = { + text: string + icon: ReactNode + + filterTerm: string + searchTerm: string | undefined + + applySearchQuery: (searchTerm: string) => void + setShowFilterMenu: (show: boolean) => void +} + +function NavButton(props: NavButtonProps): JSX.Element { + const isInboxFilter = (filter: string) => { + return filter === '' || filter === 'in:inbox' + } + const selected = useMemo(() => { + if (isInboxFilter(props.filterTerm) && !props.searchTerm) { + return true + } + return props.searchTerm === props.filterTerm + }, [props.searchTerm, props.filterTerm]) + + return ( + { + props.applySearchQuery(props.filterTerm) + props.setShowFilterMenu(false) + e.preventDefault() + }} + > + {props.icon} + {props.text} + + ) +} + type FilterButtonProps = { text: string diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index a27c06931..4f9c41ec9 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -181,11 +181,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = thLibrarySearchbox: '#FCFCFC', thLibraryMenuPrimary: '#3D3D3D', thLibraryMenuSecondary: '#3D3D3D', - thLibraryMenuUnselected: '#898989', + thLibraryMenuUnselected: '#3D3D3D', thLibrarySelectionColor: '#FFEA9F', thLibraryNavigationMenuFooter: '#EFEADE', thLibraryMenuFooterHover: '#FFFFFF', thFormInput: '#EBEBEB', + thHomeIcon: '#2A2A2A', thHeaderIconRing: '#D9D9D9', thHeaderIconInner: '#898989', @@ -305,12 +306,13 @@ const darkThemeSpec = { thLibrarySearchbox: '#3D3D3D', thLibraryMenuPrimary: '#EBEBEB', thLibraryMenuSecondary: '#EBEBEB', - thLibraryMenuUnselected: '#898989', + thLibraryMenuUnselected: 'white', thLibrarySelectionColor: '#3D3D3D', thLibraryNavigationMenuFooter: '#3D3D3D', thLibraryMenuFooterHover: '#6A6968', searchActiveOutline: '#866D15', thFormInput: '#3D3D3D', + thHomeIcon: '#FFFFFF', thHeaderIconRing: '#3D3D3D', thHeaderIconInner: '#D9D9D9',