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;
flex-direction: column;
img {
height: 100px;
margin-bottom: 4px;
border-radius: 4px;
object-fit: contain;
background: var(--secondary-background);
}
&.fade {
opacity: 0.4;
}
@ -59,27 +51,6 @@ const Entry = styled.div`
color: var(--tertiary-foreground);
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`
@ -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 }) {
if (!file.type.startsWith('image/')) return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
<div><div onClick={remove}><XCircle size={36} /></div></div>
<EmptyEntry>
<FileText size={36} />
</EmptyEntry>
<PreviewBox onClick={remove}>
<EmptyEntry className="icon">
<FileText size={36} />
</EmptyEntry>
<div class="overlay"><XCircle size={36} /></div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
</Entry>
@ -136,9 +152,10 @@ function FileEntry({ file, remove, index }: { file: File, remove?: () => void, i
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
{ remove && <div><div onClick={remove}><XCircle size={36} /></div></div> }
<img src={url}
alt={file.name} />
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} />
<div class="overlay"><XCircle size={36} /></div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
</Entry>