use lock icon to indicate a private texture

This commit is contained in:
Pig Fang 2021-08-19 23:23:02 +08:00
parent c12c1fbd01
commit ff017573c3
No known key found for this signature in database
GPG Key ID: A8198F548DADA9E2
2 changed files with 17 additions and 10 deletions

View File

@ -22,6 +22,10 @@ const Card = styled.div`
}
`
const Icon = styled.i`
height: 24px;
`
const Badge = styled.span`
padding-top: 0.4rem;
`
@ -73,19 +77,22 @@ const Item: React.FC<Props> = (props) => {
<a href={link} className="ml-3 mr-2 mb-2 d-block" target="_blank">
<Card className="card">
<div className="card-body">
{item.public || (
<div className="ribbon-wrapper">
<div className="ribbon bg-pink">{t('skinlib.private')}</div>
</div>
)}
<a href={link} target="_blank">
<img src={preview} alt={item.name} className="card-img-top" />
</a>
</div>
<div className="card-footer">
<span className="d-block mb-1 text-truncate" title={item.name}>
{item.name}
</span>
<div className="d-flex align-items-center">
{item.public || (
<Icon
className="fas fa-lock text-warning mr-2"
title={t('skinlib.private')}
/>
)}
<span className="d-block mb-1 text-truncate" title={item.name}>
{item.name}
</span>
</div>
<div className="d-flex justify-content-between">
<div className="d-flex">
<Badge className="badge bg-teal mr-1">

View File

@ -198,10 +198,10 @@ test('private texture', async () => {
const item = { ...fixtureItem, public: false }
fetch.get.mockResolvedValue(createPaginator([item]))
const { queryByText } = render(<SkinLibrary />)
const { queryByTitle } = render(<SkinLibrary />)
await waitFor(() => expect(fetch.get).toBeCalled())
expect(queryByText(t('skinlib.private'))).toBeInTheDocument()
expect(queryByTitle(t('skinlib.private'))).toBeInTheDocument()
})
describe('by filter', () => {