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

Fix - Grid and List Layout

Browse source
This commit is contained in:
Rupin Khandelwal 2022-10-04 13:03:55 -05:00
parent 579962f942
commit ab17b9f2da
2 changed files with 312 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

370
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -1,8 +1,11 @@
import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { removeHTMLTags } 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'
import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
@ -16,62 +19,244 @@ const ellipsisText = {
margin: 'auto 0',
}
const cardTitleGridStyle = {
mt: '0',
mb: '0',
fontSize: '18px',
textAlign: 'left',
lineHeight: '1.25',
// whiteSpace: 'nowrap',
// textOverflow: 'ellipsis',
width: '100%',
// overflow: 'hidden',
}
const cardTitleListStyle = {
...ellipsisText,
fontSize: '14px',
fontWeight: '600',
textAlign: 'left',
}
export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
return (
<VStack
distribution="start"
alignment="start"
css={{
width: '100%',
}}
>
<HStack
alignment="start"
distribution="between"
css={{
width: '100%',
display: 'grid',
gridTemplateColumns: '0.01fr 1fr 2fr 150px',
gridTemplateRows: '1fr',
borderBottom: '1px solid $graySeparator',
height: '45px',
}}
>
<ProgressBarVertical
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayProgressBackground.toString()}
borderRadius={
props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
}
height={'45px'}
/>
<CardTitle title={props.item.title} />
<StyledText
css={{
...ellipsisText,
color: '$grayTextContrast',
}}
data-testid="listDesc"
>
{/* <Box css={{ display: 'block', py: '12px' }}> */}
{props.item.labels?.map(({ name, color }, index) => (
<LabelChip key={index} text={name || ''} color={color} />
))}
{/* </Box> */}
{props.item.description}
</StyledText>
<>
{props.layout !== 'GRID_LAYOUT' ? (
// <VStack
// css={{
// p: '12px',
// height: '100%',
// // width: '100%',
// // maxWidth: '100%',
// borderRadius: '8px',
// cursor: 'pointer',
// // wordBreak: 'break-word',
// // overflow: 'clip',
// border: '1px solid $libraryActiveMenuItem',
// // position: 'relative',
// }}
// alignment="start"
// distribution="start"
// onClick={() => {
// props.handleAction('showDetail')
// }}
// >
// {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
// <CoverImage
// src={props.item.image}
// alt="Link Preview Image"
// width="100%"
// height={160}
// css={{ borderRadius: '8px' }}
// onError={(e) => {
// ;(e.target as HTMLElement).style.display = 'none'
// }}
// />
// )} */}
// <VStack
// distribution="start"
// alignment="start"
// css={{
// px: '0px',
// width: '100%',
// pl: '$1',
// }}
// >
// <HStack
// alignment="start"
// distribution="between"
// css={{
// width: '100%',
// //p: '0px',
// //mr: '-12px',
// mt: '15px',
// display: 'grid',
// gridTemplateColumns: '1fr 24px',
// gridTemplateRows: '1fr',
// }}
// >
// <CardTitle title={props.item.title} />
// <Box
// css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
// onClick={(e) => {
// // This is here to prevent menu click events from bubbling
// // up and causing us to "click" on the link item.
// e.stopPropagation()
// }}
// >
// <CardMenu
// item={props.item}
// viewer={props.viewer}
// triggerElement={
// <MoreOptionsIcon
// size={24}
// strokeColor={theme.colors.grayTextContrast.toString()}
// orientation="horizontal"
// />
// }
// actionHandler={props.handleAction}
// />
// </Box>
// </HStack>
// <HStack alignment="start" distribution="between">
// <StyledText
// style="caption"
// css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
// >
// {props.item.author && (
// <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
// )}
// {props.originText && (
// <>
// <Box
// css={{
// height: '4px',
// width: '4px',
// borderRadius: '50%',
// display: 'inline-block',
// background: 'var(--colors-graySolid)',
// }}
// ></Box>
// <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
// {props.originText}
// </SpanBox>
// </>
// )}
// </StyledText>
// </HStack>
// </VStack>
// <HStack
// alignment="start"
// distribution="between"
// css={{
// width: '100%',
// pt: '$2',
// px: '$1',
// pr: '12px',
// mt: '7px',
// flexGrow: '1',
// }}
// >
// <StyledText
// css={{
// // m: 0,
// // py: '0px',
// // mr: '$2',
// fontStyle: 'normal',
// fontWeight: '400',
// fontSize: '14px',
// // lineHeight: '125%',
// // color: '$grayTextContrast',
// // flexGrow: '4',
// // overflow: 'hidden',
// // display: '-webkit-box',
// // WebkitLineClamp: 5,
// // WebkitBoxOrient: 'vertical',
// }}
// data-testid="listDesc"
// >
// {props.item.description}
// </StyledText>
// </HStack>
// <Box css={{ display: 'block', py: '12px' }}>
// {props.item.labels?.map(({ name, color }, index) => (
// <LabelChip key={index} text={name || ''} color={color} />
// ))}
// </Box>
// <ProgressBar
// fillPercentage={props.item.readingProgressPercent}
// fillColor={theme.colors.highlight.toString()}
// backgroundColor={theme.colors.lightBorder.toString()}
// borderRadius={
// props.item.readingProgressPercent === 100
// ? '0'
// : '0px 8px 8px 0px'
// }
// />
// </VStack>
'jjjjjjjjjjjj'
) : (
// )}
<StyledText
style="caption"
css={{ ...ellipsisText, fontWeight: '400' }}
// {props.layout === 'LIST_LAYOUT' && (
<VStack
distribution="start"
alignment="start"
css={{
width: '100%',
}}
>
{props.item.author && (
<SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
)}
</StyledText>
</HStack>
</VStack>
<HStack
alignment="start"
distribution="between"
css={{
width: '100%',
display: 'grid',
gridTemplateColumns: '0.01fr 1fr 2fr 150px',
gridTemplateRows: '1fr',
borderBottom: '1px solid $graySeparator',
height: '45px',
}}
>
<ProgressBarVertical
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayProgressBackground.toString()}
borderRadius={
props.item.readingProgressPercent === 100
? '0'
: '0px 8px 8px 0px'
}
height={'45px'}
/>
<CardTitle title={props.item.title} />
<StyledText
css={{
...ellipsisText,
color: '$grayTextContrast',
}}
data-testid="listDesc"
>
{/* <Box css={{ display: 'block', py: '12px' }}> */}
{props.item.labels?.map(({ name, color }, index) => (
<LabelChip key={index} text={name || ''} color={color} />
))}
{/* </Box> */}
{props.item.description}
</StyledText>
<StyledText
style="caption"
css={{ ...ellipsisText, fontWeight: '400' }}
>
{props.item.author && (
<SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
)}
</StyledText>
</HStack>
</VStack>
)}
</>
)
}
@ -79,19 +264,84 @@ type CardTitleProps = {
title: string
}
function CardTitle(props: CardTitleProps): JSX.Element {
function CardTitle(
props: CardTitleProps,
cardProps: LinkedItemCardProps
): JSX.Element {
return (
<StyledText
style="listTitle"
data-testid="listTitle"
css={{
...ellipsisText,
fontSize: '14px',
fontWeight: '600',
textAlign: 'left',
}}
css={
cardProps.layout === 'GRID_LAYOUT'
? cardTitleGridStyle
: cardTitleListStyle
}
>
{props.title}
</StyledText>
)
}
// export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
// return (
// <VStack
// distribution="start"
// alignment="start"
// css={{
// width: '100%',
// }}
// >
// <HStack
// alignment="start"
// distribution="between"
// css={{
// width: '100%',
// display: 'grid',
// gridTemplateColumns: '0.01fr 1fr 2fr 150px',
// gridTemplateRows: '1fr',
// borderBottom: '1px solid $graySeparator',
// height: '45px',
// }}
// >
// <ProgressBarVertical
// fillPercentage={props.item.readingProgressPercent}
// fillColor={theme.colors.highlight.toString()}
// backgroundColor={theme.colors.grayProgressBackground.toString()}
// borderRadius={
// props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
// }
// height={'45px'}
// />
// <CardTitle title={props.item.title} />
// <StyledText
// css={{
// ...ellipsisText,
// color: '$grayTextContrast',
// }}
// data-testid="listDesc"
// >
// {/* <Box css={{ display: 'block', py: '12px' }}> */}
// {props.item.labels?.map(({ name, color }, index) => (
// <LabelChip key={index} text={name || ''} color={color} />
// ))}
// {/* </Box> */}
// {props.item.description}
// </StyledText>
// <StyledText
// style="caption"
// css={{ ...ellipsisText, fontWeight: '400' }}
// >
// {props.item.author && (
// <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
// )}
// </StyledText>
// </HStack>
// </VStack>
// )
// }
// type CardTitleProps = {
// title: string
// }

3
packages/web/components/templates/library/LibraryList.tsx
View file

@ -83,7 +83,8 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
>
{viewerData?.me && (
<LibraryGridCard
layout={props.layoutCoordinator.layout}
//layout={props.layoutCoordinator.layout}
layout={'LIST_LAYOUT'}
item={linkedItem.node}
viewer={viewerData.me}
handleAction={(action: LinkedItemCardAction) => {