add collection bar tile icon
This commit is contained in:
parent
403a1e9083
commit
ed7ac4288e
|
@ -3,28 +3,32 @@ import { EnteFile } from 'types/file';
|
|||
import {
|
||||
ActiveIndicator,
|
||||
CollectionBarTile,
|
||||
CollectionBarTileIcon,
|
||||
CollectionBarTileText,
|
||||
} from '../styledComponents';
|
||||
import CollectionCard from '../CollectionCard';
|
||||
import TruncateText from 'components/TruncateText';
|
||||
import { Box } from '@mui/material';
|
||||
import { CollectionSummaryType } from 'constants/collection';
|
||||
import Favorite from '@mui/icons-material/Favorite';
|
||||
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
||||
|
||||
interface Iprops {
|
||||
active: boolean;
|
||||
latestFile: EnteFile;
|
||||
collectionName: string;
|
||||
collectionType: CollectionSummaryType;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
|
||||
const { active, collectionName, ...others } = props;
|
||||
const { active, collectionName, collectionType, ...others } = props;
|
||||
|
||||
return (
|
||||
<Box ref={ref}>
|
||||
<CollectionCard collectionTile={CollectionBarTile} {...others}>
|
||||
<CollectionBarTileText>
|
||||
<TruncateText text={collectionName} />
|
||||
</CollectionBarTileText>
|
||||
<CollectionCardText collectionName={collectionName} />
|
||||
<CollectionCardIcon collectionType={collectionType} />
|
||||
</CollectionCard>
|
||||
{active && <ActiveIndicator />}
|
||||
</Box>
|
||||
|
@ -32,3 +36,22 @@ const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
|
|||
});
|
||||
|
||||
export default CollectionListBarCard;
|
||||
|
||||
function CollectionCardText({ collectionName }) {
|
||||
return (
|
||||
<CollectionBarTileText>
|
||||
<TruncateText text={collectionName} />
|
||||
</CollectionBarTileText>
|
||||
);
|
||||
}
|
||||
|
||||
function CollectionCardIcon({ collectionType }) {
|
||||
return (
|
||||
<CollectionBarTileIcon>
|
||||
{collectionType === CollectionSummaryType.favorites && <Favorite />}
|
||||
{collectionType === CollectionSummaryType.archived && (
|
||||
<VisibilityOff />
|
||||
)}
|
||||
</CollectionBarTileIcon>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -99,6 +99,7 @@ export default function CollectionListBar(props: IProps) {
|
|||
ref={collectionChipsRef[item.id]}
|
||||
active={activeCollection === item.id}
|
||||
onClick={clickHandler(item.id)}
|
||||
collectionType={item.type}
|
||||
collectionName={item.name}
|
||||
/>
|
||||
))}
|
||||
|
|
|
@ -86,7 +86,16 @@ export const CollectionBarTileText = styled(Overlay)`
|
|||
rgba(0, 0, 0, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0.5) 86.46%
|
||||
);
|
||||
`;
|
||||
|
||||
export const CollectionBarTileIcon = styled(Overlay)`
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
& > .MuiSvgIcon-root {
|
||||
font-size: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const AllCollectionTileText = styled(Overlay)`
|
||||
|
|
Loading…
Reference in a new issue