Browse Source

Add additional customizations for Card prop

- Change image visibility default
- Removable info panel
- Removable modal overlay button
master
jeffvli 3 years ago
committed by Jeff
parent
commit
05caee5bb1
  1. 91
      src/components/card/Card.tsx
  2. 11
      src/components/card/styled.tsx

91
src/components/card/Card.tsx

@ -47,6 +47,9 @@ const Card = ({
cacheImages, cacheImages,
cachePath, cachePath,
handleFavorite, handleFavorite,
notVisibleByDefault,
noInfoPanel,
noModalButton,
...rest ...rest
}: any) => { }: any) => {
const history = useHistory(); const history = useHistory();
@ -190,18 +193,16 @@ const Card = ({
return ( return (
<> <>
<CardPanel <CardPanel cardsize={size} style={rest.style}>
tabIndex={0}
cardsize={size}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
handleClick();
}
}}
style={rest.style}
>
<Overlay cardsize={size}> <Overlay cardsize={size}>
<ImgPanel> <ImgPanel
tabIndex={0}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
handleClick();
}
}}
>
{rest.coverArt.match('placeholder') ? ( {rest.coverArt.match('placeholder') ? (
<CardImgWrapper <CardImgWrapper
id="placeholder-wrapper" id="placeholder-wrapper"
@ -234,7 +235,7 @@ const Card = ({
alt="img" alt="img"
effect="opacity" effect="opacity"
cardsize={size} cardsize={size}
visibleByDefault={cacheImages} visibleByDefault={notVisibleByDefault ? false : cacheImages}
afterLoad={() => { afterLoad={() => {
if (cacheImages) { if (cacheImages) {
cacheImage( cacheImage(
@ -285,7 +286,7 @@ const Card = ({
/> />
</CustomTooltip> </CustomTooltip>
)} )}
{!rest.isModal && ( {!rest.isModal && !noModalButton && (
<CustomTooltip text="View in modal" delay={1000}> <CustomTooltip text="View in modal" delay={1000}>
<ModalViewOverlayButton <ModalViewOverlayButton
size={size <= 160 ? 'xs' : 'sm'} size={size <= 160 ? 'xs' : 'sm'}
@ -299,44 +300,46 @@ const Card = ({
</ImgPanel> </ImgPanel>
</Overlay> </Overlay>
<InfoPanel cardsize={size}> {!noInfoPanel && (
<InfoSpan> <InfoPanel cardsize={size}>
<CardTitleWrapper> <InfoSpan>
<CustomTooltip text={rest.title}>
<CardTitleButton
appearance="link"
tabIndex={-1}
size="sm"
onClick={handleClick}
cardsize={size}
>
{rest.title}
</CardTitleButton>
</CustomTooltip>
</CardTitleWrapper>
</InfoSpan>
<InfoSpan>
{subUrl ? (
<CardTitleWrapper> <CardTitleWrapper>
<CustomTooltip text={rest.subtitle}> <CustomTooltip text={rest.title}>
<CardSubtitleButton <CardTitleButton
appearance="link" appearance="link"
tabIndex={-1} tabIndex={-1}
size="xs" size="sm"
onClick={handleSubClick} onClick={handleClick}
cardsize={size} cardsize={size}
> >
{rest.subtitle} {rest.title}
</CardSubtitleButton> </CardTitleButton>
</CustomTooltip> </CustomTooltip>
</CardTitleWrapper> </CardTitleWrapper>
) : ( </InfoSpan>
<CardSubtitle cardsize={size}> <InfoSpan>
{rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>} {subUrl ? (
</CardSubtitle> <CardTitleWrapper>
)} <CustomTooltip text={rest.subtitle}>
</InfoSpan> <CardSubtitleButton
</InfoPanel> appearance="link"
tabIndex={-1}
size="xs"
onClick={handleSubClick}
cardsize={size}
>
{rest.subtitle}
</CardSubtitleButton>
</CustomTooltip>
</CardTitleWrapper>
) : (
<CardSubtitle cardsize={size}>
{rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>}
</CardSubtitle>
)}
</InfoSpan>
</InfoPanel>
)}
</CardPanel> </CardPanel>
</> </>
); );

11
src/components/card/styled.tsx

@ -59,10 +59,6 @@ export const CardPanel = styled(Panel)<Card>`
filter: ${(props) => props.theme.other.card.hover.filter}; filter: ${(props) => props.theme.other.card.hover.filter};
transition: ${(props) => props.theme.other.card.hover.transition}; transition: ${(props) => props.theme.other.card.hover.transition};
} }
&:focus-visible {
outline: 2px ${(props) => props.theme.colors.primary} solid;
}
`; `;
export const InfoPanel = styled(Panel)<Card>` export const InfoPanel = styled(Panel)<Card>`
@ -82,6 +78,11 @@ export const ImgPanel = styled(Panel)<Card>`
border-left: ${(props) => props.theme.other.card.image.borderLeft} !important; border-left: ${(props) => props.theme.other.card.image.borderLeft} !important;
border-radius: ${(props) => props.theme.other.card.image.borderRadius} !important; border-radius: ${(props) => props.theme.other.card.image.borderRadius} !important;
&:focus-visible {
border-color: ${(props) => props.theme.colors.primary} !important;
outline: none !important;
}
&:hover { &:hover {
border-color: ${(props) => props.theme.colors.primary} !important; border-color: ${(props) => props.theme.colors.primary} !important;
@ -109,6 +110,7 @@ export const CardButton = styled(Button)`
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: 0s;
`; `;
export const CardTitleWrapper = styled.span` export const CardTitleWrapper = styled.span`
@ -156,7 +158,6 @@ export const CardSubtitle = styled.div<Card>`
export const CardImg = styled.img<Card>` export const CardImg = styled.img<Card>`
height: ${(props) => `${props.cardsize}px`}; height: ${(props) => `${props.cardsize}px`};
width: ${(props) => `${props.cardsize}px`};
`; `;
export const LazyCardImg = styled(LazyLoadImage)<Card>` export const LazyCardImg = styled(LazyLoadImage)<Card>`

Loading…
Cancel
Save