You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.8 KiB
Svelte
72 lines
1.8 KiB
Svelte
<script>
|
|
// @ts-nocheck
|
|
|
|
import { StartFarDisks } from "../wailsjs/go/main/App.js";
|
|
import PopoverTrigger from "./components/PopoverTrigger.svelte";
|
|
|
|
/** @type {Array<import('./App.svelte').Disk>} */
|
|
export let disks = [];
|
|
</script>
|
|
|
|
<div class="container mx-auto pt-4 mb-4">
|
|
<div class="disk-panel text-neutral-300">
|
|
{#each disks as disk, i}
|
|
<PopoverTrigger
|
|
maxWidth="200px"
|
|
align={i === 0 ? "left" : i === disks.length - 1 ? "right" : "center"}
|
|
>
|
|
<div slot="trigger">
|
|
{disk.Name}
|
|
<a role="button" href="#top" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
|
|
{disk.Free} Gb
|
|
</a>
|
|
</div>
|
|
|
|
<div slot="content" class="popover-content">
|
|
<div class="title">Диск {disk.Name}</div>
|
|
<div class="info-row">
|
|
<span class="label">Свободно:</span>
|
|
<span class="value">{disk.Free} Gb</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="label">Состояние:</span>
|
|
<span class="value">{disk.normal ? 'нормальное' : 'требует внимания'}</span>
|
|
</div>
|
|
</div>
|
|
</PopoverTrigger>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.disk-panel {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.info {
|
|
color: lightgreen;
|
|
}
|
|
.danger {
|
|
color: red;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
:global(.popover-content) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
:global(.popover-content .title) {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
:global(.popover-content .info-row) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
:global(.popover-content .label) {
|
|
color: #888;
|
|
}
|
|
</style> |