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

<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import selectionStore from "../stores/selection";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import ProjectProgress from "./ProjectProgress.svelte";
import TimeProgress from "./TimeProgress.svelte";

  export let project: ProjectResult;

  let selected: boolean;
  let completed: boolean;

  function handleClick() {
    window.location.hash = "#" + project.id;
    selectionStore.change("hash", project.id);
  }

  $: selected = $selectionStore.hash === project.id;
  $: completed = !project.active;
</script>

<div class="ql-list-item" on:click={handleClick} class:selected>
  <div class="icon" class:completed>
    <Icon block name={project.icon} />
  </div>
  <div class="header">
    <div class="name">
      <div class="content">{project.name}</div>
      {#if project.endTime}
        <div class="times">
          <DaysLeft compact startTime={project.createdTime} endTime={project.endTime} />
        </div>
      {/if}
    </div>
    <ProjectProgress project={project} />
    {#if project.endTime}
      <TimeProgress startTime={project.createdTime} endTime={project.endTime} />
    {/if}
  </div>
</div>

<style>
  div.ql-list-item {
    display: flex;
    flex-direction: row;
    -webkit-user-select: none;
    -moz-user-select: none;

    color: #777;
    padding: 0.2em;
    padding-bottom: 0.05em;

    cursor: pointer;
  }
  div.ql-list-item:hover {
    color: #ccc;
    background-color: #191919;
  }

  div.ql-list-item.selected {
    background-color: #222;
  }

  div.icon {
    color: #444;

    padding: 0.3em 0.5ch;
    padding-right: 1ch;
    padding-top: 0.4em;
  }
  div.ql-list-item.selected div.icon {
    color: #666;
  }
  div.icon.completed {
    color: #484;
  }
  div.ql-list-item.selected div.icon.completed {
    color: #78ff78;
  }
  div.ql-list-item:hover div.icon {
    color: #ccc;
  }

  div.header {
    flex-grow: 1;
    flex-shrink: 0;
    padding-right: 0.5ch;
  }

  div.name {
    display: flex;
    flex-direction: row;
  }

  div.name > div.times {
    margin-left: auto;
  }
</style>