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 { 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>
|