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

Cleanups for navigation menu icons

Browse Source
This commit is contained in:
Jackson Harper
2024-06-12 15:20:03 +08:00
parent 5a495798ac
commit 05cf487b5a
9 changed files with 165 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/web/components/elements/icons/ArchiveSectionIcon.tsx Normal file
View File

@ -0,0 +1,32 @@
/* eslint-disable functional/no-class */
/* eslint-disable functional/no-this-expression */
import { IconProps } from './IconProps'
import React from 'react'
export class ArchiveSectionIcon extends React.Component<IconProps> {
render() {
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width="23"
height="23"
viewBox="0 0 23 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M19.1667 3.18359H3.83341C2.77487 3.18359 1.91675 4.04171 1.91675 5.10026C1.91675 6.15881 2.77487 7.01693 3.83341 7.01693H19.1667C20.2253 7.01693 21.0834 6.15881 21.0834 5.10026C21.0834 4.04171 20.2253 3.18359 19.1667 3.18359Z"
fill={color}
/>
<path
d="M18.2083 8.93359C18.6999 8.93359 19.1053 9.3773 19.1599 9.94943L19.1666 10.0836V16.9836C19.1666 18.8207 17.9696 20.3224 16.4603 20.4278L16.2916 20.4336H6.70825C5.17684 20.4336 3.92525 18.9971 3.83804 17.1868L3.83325 16.9836V10.0836C3.83325 9.44822 4.26259 8.93359 4.79159 8.93359H18.2083ZM13.4166 10.8503H9.58325L9.47113 10.857C9.2382 10.8847 9.02353 10.9968 8.86777 11.1722C8.71201 11.3476 8.62599 11.574 8.62599 11.8086C8.62599 12.0432 8.71201 12.2696 8.86777 12.445C9.02353 12.6203 9.2382 12.7325 9.47113 12.7602L9.58325 12.7669H13.4166L13.5287 12.7602C13.7616 12.7325 13.9763 12.6203 14.1321 12.445C14.2878 12.2696 14.3739 12.0432 14.3739 11.8086C14.3739 11.574 14.2878 11.3476 14.1321 11.1722C13.9763 10.9968 13.7616 10.8847 13.5287 10.857L13.4166 10.8503Z"
fill={color}
/>
</g>
</svg>
)
}
}

3
packages/web/components/elements/icons/HomeIcon.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable functional/no-class */
/* eslint-disable functional/no-this-expression */
import { SpanBox } from '../LayoutPrimitives'
import { IconProps } from './IconProps'
import React from 'react'
@ -19,7 +20,7 @@ export class HomeIcon extends React.Component<IconProps> {
>
<g>
<path
d="M19.9329 12.3418L12.7458 6.07813C12.3924 5.77033 11.8662 5.77093 11.514 6.07933L4.35753 12.3433C3.70713 12.9127 4.11003 13.984 4.97433 13.984C5.49123 13.984 5.91033 14.4031 5.91033 14.9203V20.3893C5.91033 20.9065 6.32973 21.3253 6.84663 21.3253H10.1271V16.5322C10.1271 16.2397 10.3638 16.003 10.656 16.003H13.6359C13.9281 16.003 14.1651 16.2397 14.1651 16.5322V21.3256H17.2806C17.7978 21.3256 18.2169 20.9068 18.2169 20.3896V14.9206C18.2169 14.4034 18.636 13.9843 19.1529 13.9843H19.3179C20.1831 13.9837 20.5854 12.9103 19.9329 12.3418Z"
d="M19.9329 11.8028L12.7458 5.53907C12.3924 5.23127 11.8662 5.23187 11.514 5.54027L4.35753 11.8043C3.70713 12.3737 4.11003 13.445 4.97433 13.445C5.49123 13.445 5.91033 13.8641 5.91033 14.3813V19.8503C5.91033 20.3675 6.32973 20.7863 6.84663 20.7863H10.1271V15.9932C10.1271 15.7007 10.3638 15.464 10.656 15.464H13.6359C13.9281 15.464 14.1651 15.7007 14.1651 15.9932V20.7866H17.2806C17.7978 20.7866 18.2169 20.3678 18.2169 19.8506V14.3816C18.2169 13.8644 18.636 13.4453 19.1529 13.4453H19.3179C20.1831 13.4447 20.5854 12.3713 19.9329 11.8028Z"
fill={color}
/>
</g>

31
packages/web/components/elements/icons/NavMoreButtonDown.tsx Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable functional/no-class */
/* eslint-disable functional/no-this-expression */
import { IconProps } from './IconProps'
import React from 'react'
export class NavMoreButtonDownIcon extends React.Component<IconProps> {
render() {
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M6.25 9.43359L12 15.1836L17.75 9.43359"
stroke={color}
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
)
}
}

29
packages/web/components/elements/icons/NavMoreButtonUp.tsx Normal file
View File

@ -0,0 +1,29 @@
/* eslint-disable functional/no-class */
/* eslint-disable functional/no-this-expression */
import { IconProps } from './IconProps'
import React from 'react'
export class NavMoreButtonUpIcon extends React.Component<IconProps> {
render() {
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.75 15.1836L12 9.43359L6.25 15.1836"
stroke={color}
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
}

29
packages/web/components/elements/icons/ShortcutFolderClosed.tsx Normal file
View File

@ -0,0 +1,29 @@
/* eslint-disable functional/no-class */
/* eslint-disable functional/no-this-expression */
import { IconProps } from './IconProps'
import React from 'react'
export class ShortcutFolderClosed extends React.Component<IconProps> {
render() {
const size = (this.props.size || 26).toString()
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width="26"
height="26"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M9.48478 3.43359C9.71374 3.43357 9.93632 3.50899 10.1181 3.64818L10.2223 3.7388L13.041 6.55859H19.9014C20.6985 6.55855 21.4655 6.8631 22.0455 7.40993C22.6254 7.95676 22.9745 8.70454 23.0212 9.50026L23.0265 9.68359V18.0169C23.0265 18.814 22.7219 19.581 22.1751 20.1609C21.6283 20.7409 20.8805 21.09 20.0848 21.1367L19.9014 21.1419H5.31812C4.52102 21.142 3.75404 20.8374 3.17409 20.2906C2.59415 19.7438 2.24509 18.996 2.19832 18.2003L2.19312 18.0169V6.55859C2.19307 5.7615 2.49762 4.99452 3.04445 4.41457C3.59128 3.83463 4.33906 3.48557 5.13478 3.4388L5.31812 3.43359H9.48478Z"
fill={color}
/>
</g>
</svg>
)
}
}

5
packages/web/components/templates/PrimaryDropdown.tsx
View File

@ -20,8 +20,6 @@ import { ThemeSelector } from './article/ReaderSettingsControl'
type PrimaryDropdownProps = {
children?: ReactNode
showThemeSection: boolean
showFullThemeSection: boolean
layout?: LayoutType
updateLayout?: (layout: LayoutType) => void
@ -194,8 +192,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
</VStack>
</HStack>
<DropdownSeparator />
{props.showThemeSection && <LegacyMenuThemeSection {...props} />}
{props.showFullThemeSection && <ThemeSection {...props} />}
<ThemeSection {...props} />
<DropdownOption
onSelect={() => headerDropdownActionHandler('navigate-to-install')}
title="Install"

5
packages/web/components/templates/navMenu/Footer.tsx
View File

@ -29,10 +29,7 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
},
}}
>
<PrimaryDropdown
showThemeSection={!props.showFullThemeSection ?? true}
showFullThemeSection={props.showFullThemeSection ?? false}
/>
<PrimaryDropdown />
<SpanBox
css={{
marginLeft: 'auto',

48
packages/web/components/templates/navMenu/NavigationMenu.tsx
View File

@ -20,6 +20,7 @@ import {
ArrowDown,
CaretDown,
CaretUp,
Archive,
} from '@phosphor-icons/react'
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { theme } from '../../tokens/stitches.config'
@ -49,6 +50,11 @@ import { ToggleCaretLeftIcon } from '../../elements/icons/ToggleCaretLeftIcon'
import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { ArchiveActionIcon } from '../../elements/icons/home/ArchiveActionIcon'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { ArchiveSectionIcon } from '../../elements/icons/ArchiveSectionIcon'
import { NavMoreButtonDownIcon } from '../../elements/icons/NavMoreButtonDown'
import { NavMoreButtonUpIcon } from '../../elements/icons/NavMoreButtonUp'
import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed'
export const LIBRARY_LEFT_MENU_WIDTH = '275px'
@ -227,9 +233,22 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
style="articleActionIcon"
css={{
display: 'flex',
ml: '15px',
width: '100%',
gap: '10px',
maxWidth: '100%',
height: '34px',
px: '15px',
fontSize: '15px',
fontWeight: 'regular',
fontFamily: '$display',
color: '$thLibraryMenuUnselected',
'&:hover': {
opacity: '1',
color: '$thLibraryMenuUnselected',
backgroundColor: '$thBackground4',
},
}}
@ -238,11 +257,19 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
event.preventDefault()
}}
>
<HStack css={{ gap: '20px' }}>
<HStack
css={{ gap: '10px', width: '100%' }}
alignment="center"
distribution="start"
>
{moreFoldersOpenState ? (
<CaretUp size={12} />
<NavMoreButtonUpIcon
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
) : (
<CaretDown size={12} />
<NavMoreButtonDownIcon
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
)}
<SpanBox>More</SpanBox>
</HStack>
@ -254,14 +281,20 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
text="Archive"
section="archive"
isSelected={props.section == 'archive'}
icon={<ArchiveActionIcon color="#F59932" />}
icon={
<ArchiveSectionIcon
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
}
/>
<NavButton
{...props}
text="Trash"
section="trash"
isSelected={props.section == 'trash'}
icon={<TrashIcon color={theme.colors.highlight.toString()} />}
icon={
<TrashIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
}
/>
</SpanBox>
)}
@ -748,8 +781,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => {
}}
>
{props.node.isClosed ? (
<Folder
size={20}
<ShortcutFolderClosed
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
) : (

6
packages/web/components/templates/reader/ReaderHeader.tsx
View File

@ -144,12 +144,6 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
color={theme.colors.thHighContrast.toString()}
/>
</Button>
<PrimaryDropdown showThemeSection={false} showFullThemeSection={false}>
<CircleUtilityMenuIcon
size={25}
color={theme.colors.thHighContrast.toString()}
/>
</PrimaryDropdown>
</HStack>
</>
)