152 lines
3.2 KiB
Svelte
152 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import IconX from "@tabler/icons-svelte/IconX.svelte";
|
|
import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
|
|
|
|
export let filename: string;
|
|
export let status: string;
|
|
export let progress: number = 0;
|
|
export let icon: ConstructorOfATypedSvelteComponent;
|
|
</script>
|
|
|
|
<div class="download-item">
|
|
<div class="download-info">
|
|
<div class="file-title">
|
|
<div class="download-type">
|
|
<svelte:component this={icon} />
|
|
</div>
|
|
<span>
|
|
{filename}
|
|
</span>
|
|
</div>
|
|
<div class="file-progress">
|
|
<div
|
|
class="progress"
|
|
style="width: {Math.min(100, progress)}%"
|
|
></div>
|
|
</div>
|
|
<div class="file-status">{status}</div>
|
|
</div>
|
|
<div class="file-actions">
|
|
<button class="action-button">
|
|
<IconDownload />
|
|
</button>
|
|
<button class="action-button">
|
|
<IconX />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.download-item,
|
|
.file-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.download-item {
|
|
width: 425px;
|
|
padding: 8px 0;
|
|
gap: 8px;
|
|
border-bottom: 1.5px var(--button-elevated) solid;
|
|
}
|
|
|
|
.download-type {
|
|
display: flex;
|
|
}
|
|
|
|
.download-type :global(svg) {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.download-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
gap: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-progress {
|
|
width: 100%;
|
|
background-color: var(--button-elevated);
|
|
}
|
|
|
|
.file-progress,
|
|
.file-progress .progress {
|
|
height: 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.file-progress .progress {
|
|
background-color: var(--blue);
|
|
}
|
|
|
|
.file-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
}
|
|
|
|
.file-status {
|
|
font-size: 12px;
|
|
color: var(--gray);
|
|
line-break: anywhere;
|
|
}
|
|
|
|
.file-actions {
|
|
gap: 4px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.file-actions {
|
|
position: absolute;
|
|
right: 0;
|
|
background-color: var(--button);
|
|
height: 90%;
|
|
padding-left: 18px;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
|
|
mask-image: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(0, 0, 0, 1) 20%
|
|
);
|
|
}
|
|
|
|
.download-item:hover .file-actions {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.action-button {
|
|
padding: 8px;
|
|
height: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.action-button :global(svg) {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.download-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.download-item:last-child {
|
|
padding-bottom: 0;
|
|
border: none;
|
|
}
|
|
</style>
|