You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script lang="ts"> import type { IconName } from "../external/icons";
import type { TaskResult } from "../models/task"; import Icon from "./Icon.svelte";
export let task: TaskResult; export let iconName: IconName;
let showNumbersAnyway; let inactive;
$: { switch (task.statusTag) { case "to do": iconName = "lightbulb"; break; case "on hold": iconName = "hourglass"; break; case "declined": iconName = "times"; break; case "failed": iconName = "times"; break; default: iconName = "check"; break; } }
$: showNumbersAnyway = ["to do", "on hold"].includes(task.statusTag) && task.itemAmount > 1; $: inactive = !task.active || showNumbersAnyway; </script>
<div class="icon sccsi" class:targetonly={showNumbersAnyway} class:inactive={inactive}> {#if !task.active || showNumbersAnyway} <span class="on"> {#if showNumbersAnyway} {task.itemAmount} {:else} <Icon block name={iconName} /> {/if} </span> <span class="off"> {task.completedAmount} / {task.itemAmount} </span> {:else} {task.completedAmount} / {task.itemAmount} {/if} </div>
<style> div.icon { display: flex; flex-direction: column; font-size: 1em; padding: 0.2em .5ch;
margin-right: 0.5em; background: #444; color: #CCC; } div.icon.inactive { padding-top: 0.295em; padding-bottom: 0.115em;
background: #484; color: #78ff78; } div.icon.targetonly { min-width: 1.5ch; text-align: center; padding-top: 0.205em; padding-bottom: 0.225em; } div.icon.targetonly span.on { font-weight: 800; } div.icon.inactive span.off { display: none; } div.icon.inactive:hover { padding-top: 0.16em; padding-bottom: 0.27em; } div.icon.inactive:hover span.on { display: none; } div.icon.inactive:hover span.off { display: inline; } </style>
|