hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve attachment download card

Browse source
This commit is contained in:
hippoz 2023-08-09 23:33:19 +03:00
parent aa2085050a
commit a884c02f29
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/MessageAttachment.svelte
View file

@ -48,7 +48,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap;
padding: var(--space-norm); padding: var(--space-norm);
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
border-radius: 9999px; border-radius: 9999px;
background-color: var(--background-color-0); background-color: var(--background-color-0);
} }
@ -68,13 +71,20 @@
} }
.attachment-filename { .attachment-filename {
color: var(--foreground-color-3); color: var(--foreground-color-2);
margin-right: 6px; margin-right: var(--space-md);
} }
.attachment-card .icon-button { .attachment-card .icon-button {
margin-left: auto; margin-left: auto;
} }
.attachment-card .download {
background: var(--purple-1);
border-radius: 9999px;
padding: var(--space-xs);
color: var(--foreground-color-1);
}
</style> </style>
@ -86,7 +96,7 @@
{:else if renderAs === AttachmentRenderAs.DownloadableFile} {:else if renderAs === AttachmentRenderAs.DownloadableFile}
<div class="attachment attachment-card"> <div class="attachment attachment-card">
<div class="attachment-filename">{ attachment.file_name }</div> <div class="attachment-filename">{ attachment.file_name }</div>
<a class="icon-button material-icons-outlined" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a> <a class="icon-button material-icons-outlined download" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
</div> </div>
{:else} {:else}
<div class="attachment attachment-card">Couldn't render attachment</div> <div class="attachment attachment-card">Couldn't render attachment</div>