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