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.
100 lines
2.4 KiB
100 lines
2.4 KiB
<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>
|