stufflog2/svelte-ui/src/components/TaskIcon.svelte

<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}&nbsp;/&nbsp;{task.itemAmount}
    </span>
  {:else}
    {task.completedAmount}&nbsp;/&nbsp;{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>