cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Restructure FilePreview to be less "hacky"

Browse source
This commit is contained in:
bree 2021-06-23 13:46:31 -04:00
parent 0ce77951cb
commit 46155a65dd
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
1 changed files with 53 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/components/common/messaging/bars/FilePreview.tsx
View file

@ -31,14 +31,6 @@ const Entry = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
img {
height: 100px;
margin-bottom: 4px;
border-radius: 4px;
object-fit: contain;
background: var(--secondary-background);
}
&.fade { &.fade {
opacity: 0.4; opacity: 0.4;
} }
@ -59,27 +51,6 @@ const Entry = styled.div`
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
text-align: center; text-align: center;
} }
div:first-child {
position: relative;
height: 0;
div {
display: grid;
height: 100px;
cursor: pointer;
border-radius: 4px;
place-items: center;
opacity: 0;
transition: 0.1s ease opacity;
background: rgba(0, 0, 0, 0.8);
&:hover {
opacity: 1;
}
}
}
`; `;
const Description = styled.div` const Description = styled.div`
@ -114,13 +85,58 @@ const EmptyEntry = styled.div`
} }
`; `;
const PreviewBox = styled.div`
display: grid;
grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center;
background: var(--primary-background);
overflow: hidden;
cursor: pointer;
border-radius: 4px;
.icon, .overlay { grid-area: main }
.icon {
height: 100px;
margin-bottom: 4px;
object-fit: contain;
}
.overlay {
display: grid;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: 0.1s ease opacity;
}
&:hover {
.overlay {
visibility: visible;
opacity: 1;
background-color: rgba(0, 0, 0, 0.8);
}
}
`
function FileEntry({ file, remove, index }: { file: File, remove?: () => void, index: number }) { function FileEntry({ file, remove, index }: { file: File, remove?: () => void, index: number }) {
if (!file.type.startsWith('image/')) return ( if (!file.type.startsWith('image/')) return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
<div><div onClick={remove}><XCircle size={36} /></div></div> <PreviewBox onClick={remove}>
<EmptyEntry> <EmptyEntry className="icon">
<FileText size={36} /> <FileText size={36} />
</EmptyEntry> </EmptyEntry>
<div class="overlay"><XCircle size={36} /></div>
</PreviewBox>
<span class="fn">{file.name}</span> <span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span> <span class="size">{determineFileSize(file.size)}</span>
</Entry> </Entry>
@ -136,9 +152,10 @@ function FileEntry({ file, remove, index }: { file: File, remove?: () => void, i
return ( return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
{ remove && <div><div onClick={remove}><XCircle size={36} /></div></div> } <PreviewBox onClick={remove}>
<img src={url} <img class="icon" src={url} alt={file.name} />
alt={file.name} /> <div class="overlay"><XCircle size={36} /></div>
</PreviewBox>
<span class="fn">{file.name}</span> <span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span> <span class="size">{determineFileSize(file.size)}</span>
</Entry> </Entry>