Fixed the problem about the layouts - Fresh look helps
This commit is contained in:
Rupin Khandelwal
@ -38,167 +38,189 @@ const cardTitleListStyle = {
|
||||
textAlign: 'left',
|
||||
}
|
||||
|
||||
// Props
|
||||
type CardTitleProps = {
|
||||
title: string
|
||||
}
|
||||
|
||||
// Functions
|
||||
function CardTitle(
|
||||
props: CardTitleProps,
|
||||
cardProps: LinkedItemCardProps
|
||||
): JSX.Element {
|
||||
return (
|
||||
<StyledText
|
||||
style="listTitle"
|
||||
data-testid="listTitle"
|
||||
css={
|
||||
cardProps.layout === 'GRID_LAYOUT'
|
||||
? cardTitleGridStyle
|
||||
: cardTitleListStyle
|
||||
}
|
||||
>
|
||||
{props.title}
|
||||
</StyledText>
|
||||
)
|
||||
}
|
||||
|
||||
// Component
|
||||
export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{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'
|
||||
{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>
|
||||
) : (
|
||||
// )}
|
||||
|
||||
// {props.layout === 'LIST_LAYOUT' && (
|
||||
<VStack
|
||||
distribution="start"
|
||||
alignment="start"
|
||||
@ -237,11 +259,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
||||
}}
|
||||
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>
|
||||
|
||||
@ -259,89 +279,3 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
type CardTitleProps = {
|
||||
title: string
|
||||
}
|
||||
|
||||
function CardTitle(
|
||||
props: CardTitleProps,
|
||||
cardProps: LinkedItemCardProps
|
||||
): JSX.Element {
|
||||
return (
|
||||
<StyledText
|
||||
style="listTitle"
|
||||
data-testid="listTitle"
|
||||
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
|
||||
// }
|
||||
|
||||
@ -83,8 +83,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
|
||||
>
|
||||
{viewerData?.me && (
|
||||
<LibraryGridCard
|
||||
//layout={props.layoutCoordinator.layout}
|
||||
layout={'LIST_LAYOUT'}
|
||||
layout={props.layoutCoordinator.layout}
|
||||
item={linkedItem.node}
|
||||
viewer={viewerData.me}
|
||||
handleAction={(action: LinkedItemCardAction) => {
|
||||
|
||||
Reference in New Issue
Block a user