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

<script lang="ts">
  import { navigate } from "svelte-routing";

  import type { ProjectResult } from "../models/project";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import ProjectProgress from "./ProjectProgress.svelte";
  import StatusColor from "./StatusColor.svelte";
  import Tag from "./Tag.svelte";
  import TimeProgress from "./TimeProgress.svelte";

  export let project: ProjectResult;
  export let selected: boolean;

  let completed: boolean;
  let deadline: boolean;

  function handleClick() {
    navigate(`/questlog/${project.groupId || "META_UNGROUPED"}/${project.id}`);
  }

  $: completed = !project.active;
  $: deadline = !!project.endTime;
</script>

<StatusColor affects="project" entry={project} selected={selected}>
  <div class="ql-list-item" on:click={handleClick} class:selected class:deadline={deadline}>
    <div class="icon sccfg" class:completed>
      <Icon block name={project.icon} />
    </div>
    <div class="header">
      <div class="name">
        {#if project.tags.length > 0}
          <Tag small value={project.tags[0]} />
        {/if}
        <div class="content">{project.name}</div>
        {#if project.endTime}
          <div class="times">
            <DaysLeft compact startTime={project.startTime || project.createdTime} endTime={project.endTime} />
          </div>
        {/if}
      </div>
      <ProjectProgress project={project} />
      {#if project.endTime}
        <TimeProgress startTime={project.startTime || project.createdTime} endTime={project.endTime} />
      {/if}
    </div>
  </div>
</StatusColor>

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

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

    cursor: pointer;
  }
  div.ql-list-item:hover {
    background-color: #191919;
  }
  div.ql-list-item.selected {
    background-color: #222;
    color: #aaa;
  }
  div.ql-list-item:hover {
    color: #ccc;
  }
  div.ql-list-item.deadline {
    padding-top: 0.275em;
  }


  div.icon {
    padding: 0.3em 0.5ch;
    padding-right: 1ch;
    padding-top: 0.4em;
  }

  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>