pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add grid card indicator for favorite items

Browse source
This commit is contained in:
jeffvli 2023-05-13 23:06:02 -07:00
parent 4c98afb613
commit e2e3a50f1f
2 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -66,7 +66,7 @@ const InnerCardContainer = styled.div`
} }
`; `;
const ImageContainer = styled.div` const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -89,6 +89,22 @@ const ImageContainer = styled.div`
content: ''; content: '';
user-select: none; user-select: none;
} }
${(props) =>
props.$isFavorite &&
`
&::after {
position: absolute;
top: -50px;
left: -50px;
width: 80px;
height: 80px;
background-color: var(--primary-color);
box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
transform: rotate(-45deg);
content: '';
pointer-events: none;
}
`}
`; `;
const Image = styled(SimpleImg)` const Image = styled(SimpleImg)`
@ -154,7 +170,7 @@ export const DefaultCard = ({
onClick={() => navigate(path)} onClick={() => navigate(path)}
> >
<InnerCardContainer> <InnerCardContainer>
<ImageContainer> <ImageContainer $isFavorite={data?.userFavorite}>
{data?.imageUrl ? ( {data?.imageUrl ? (
<Image <Image
importance="auto" importance="auto"

21
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -44,7 +44,7 @@ const LinkContainer = styled.div`
cursor: pointer; cursor: pointer;
`; `;
const ImageContainer = styled.div` const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -67,6 +67,23 @@ const ImageContainer = styled.div`
user-select: none; user-select: none;
} }
${(props) =>
props.$isFavorite &&
`
&::after {
position: absolute;
top: -50px;
left: -50px;
width: 80px;
height: 80px;
background-color: var(--primary-color);
box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
transform: rotate(-45deg);
content: '';
pointer-events: none;
}
`}
&:hover { &:hover {
&::before { &::before {
opacity: 0.5; opacity: 0.5;
@ -138,7 +155,7 @@ export const PosterCard = ({
return ( return (
<PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}> <PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
<LinkContainer onClick={() => navigate(path)}> <LinkContainer onClick={() => navigate(path)}>
<ImageContainer> <ImageContainer $isFavorite={data?.userFavorite}>
{data?.imageUrl ? ( {data?.imageUrl ? (
<Image <Image
importance="auto" importance="auto"