prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Encapsulate the article actions menu, standardize header height at 48px

Browse source
This commit is contained in:
Jackson Harper 2022-04-08 10:01:14 -07:00
parent 136762310d
commit 19e3af66d5
5 changed files with 17 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/web/components/elements/Button.tsx
View file

@ -153,6 +153,14 @@ export const Button = styled('button', {
opacity: 0.8,
},
},
articleActionIcon: {
bg: 'transparent',
border: 'none',
cursor: 'pointer',
'&:hover': {
opacity: 0.8,
},
},
ghost: {
color: 'transparent',
border: 'none',

46
packages/web/components/patterns/PrimaryHeader.tsx
View file

@ -18,6 +18,7 @@ import { setupAnalytics } from '../../lib/analytics'
import { Button } from '../elements/Button'
import Link from 'next/link'
import { ArchiveBox, ArrowSquareOut, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react'
import { ArticleActionsMenu } from '../templates/article/ArticleActionsMenu'
type HeaderProps = {
user?: UserBasicData
@ -160,11 +161,10 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
width: '100%',
boxShadow: props.isDisplayingShadow ? '$panelShadow' : 'unset',
p: '0px $3 0px $3',
height: '68px',
height: '48px',
position: 'fixed',
bg: 'transparent',
'@smDown': {
height: '48px',
p: '0px 18px 0px 16px',
},
'@lgDown': {
@ -195,33 +195,8 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
mr: '16px',
}}
>
<HStack distribution="end" alignment="center" css={{
gap: '4px',
// background: 'red',
height: '100%',
width: '100%',
m: '0px',
}}
>
<Button style='plainIcon'>
<TextAa size={24} color='#5D5C5B' />
</Button>
<ArticleActionsMenu layout='horizontal' />
<Button style='plainIcon'>
<TagSimple size={24} color='#5D5C5B' />
</Button>
<Button style='plainIcon'>
<HighlighterCircle size={24} color='#5D5C5B' />
</Button>
<Button style='plainIcon'>
<ArchiveBox size={24} color='#5D5C5B' />
</Button>
<Button style='plainIcon'>
<DotsThree size={24} color='#5D5C5B' />
</Button>
</HStack>
</HStack>
@ -230,21 +205,6 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
alignment="center"
css={{ display: 'flex', alignItems: 'center' }}
>
{/* <Box css={{ '@smDown': { visibility: 'collapse' } }}>
<a href="https://github.com/omnivore-app/omnivore" target='_blank' rel="noreferrer">
<Button style="ctaLightGray" css={{ background: 'unset', mr: '32px' }}>
<HStack css={{ height: '100%' }}>
<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill={theme.colors.grayTextContrast.toString()} fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<SpanBox css={{ pl: '8px', color: '$grayTextContrast' }}>Follow us on GitHub</SpanBox>
<Box className='ctaButtonIcon' css={{ ml: '4px' }}>
<ArrowSquareOut size={16} />
</Box>
</HStack>
</Button>
</a>
</Box> */}
<DropdownMenu
username={props.username}
triggerElement={

5
packages/web/components/templates/PrimaryLayout.tsx
View file

@ -84,8 +84,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
<Box
ref={props.scrollElementRef}
css={{
// top: '68px',
// '@smDown': { top: '48px' },
position: 'fixed',
overflowY: 'auto',
height: '100%',
@ -96,9 +94,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
<Box
ref={props.scrollElementRef}
css={{
height: '68px',
height: '48px',
bg: '$grayBase',
'@smDown': { height: '48px' },
}}
></Box>
{props.children}

3
packages/web/components/templates/SettingsLayout.tsx
View file

@ -54,8 +54,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
/>
<Box
css={{
top: '68px',
'@smDown': { top: '48px' },
top: '48px',
position: 'fixed',
overflowY: 'auto',
height: '100%',

36
packages/web/pages/[username]/[slug]/index.tsx
View file

@ -27,6 +27,8 @@ import { styled, theme } from '../../../components/tokens/stitches.config'
import { Button } from '../../../components/elements/Button'
import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react'
import { Separator } from '@radix-ui/react-separator'
import { Article } from '../../../components/templates/article/Article'
import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
const MenuSeparator = styled(Separator, {
width: '100%',
@ -124,7 +126,7 @@ export default function Home(): JSX.Element {
<VStack distribution="between" alignment="center" css={{
position: 'fixed',
flexDirection: 'row-reverse',
top: '-68px',
top: '-120px',
left: 8,
height: '100%',
width: '48px',
@ -133,38 +135,8 @@ export default function Home(): JSX.Element {
},
}}
>
<VStack distribution="start" alignment="center" css={{
gap: '4px',
// background: 'red',
height: '200px',
width: '100%',
m: '0px',
}}
>
<Button style='plainIcon'>
<TextAa size={24} color='#5D5C5B' />
</Button>
<MenuSeparator />
<Button style='plainIcon'>
<TagSimple size={24} color='#5D5C5B' />
</Button>
<Button style='plainIcon'>
<HighlighterCircle size={24} color='#5D5C5B' />
</Button>
<MenuSeparator />
<Button style='plainIcon'>
<ArchiveBox size={24} color='#5D5C5B' />
</Button>
<MenuSeparator />
<Button style='plainIcon'>
<DotsThree size={24} color='#5D5C5B' />
</Button>
</VStack>
<ArticleActionsMenu layout='vertical' />
</VStack>
{article.contentReader == 'PDF' ? (
<PdfArticleContainerNoSSR
article={article}