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 type { IconName } from "../external/icons"; import type { TaskResult } from "../models/task"; import DaysLeft from "./DaysLeft.svelte"; import Icon from "./Icon.svelte"; import LinkHook from "./LinkHook.svelte"; import Markdown from "./Markdown.svelte"; import ProjectIcon from "./ProjectIcon.svelte"; import ProjectProgress from "./ProjectProgress.svelte"; import Tag from "./Tag.svelte"; import TimeProgress from "./TimeProgress.svelte";
interface EntryIconHolder { icon: IconName }
interface EntryCommon { id: string name: string description: string icon?: IconName startTime?: string endTime?: string createdTime?: string group?: EntryIconHolder project?: EntryIconHolder tasks?: TaskResult[] active?: boolean statusName?: string tags?: string[] }
export let entry: EntryCommon; export let full = false; export let headerLink = ""; export let hideProgress: boolean = false; export let hideIcon: boolean = false; export let showTimeProgress: boolean = false; export let annotations: IconName[] = []; export let removeHook: boolean = false;
let iconName: IconName;
$: { if (entry.project != null) { iconName = entry.project.icon; } else if (entry.group != null) { iconName = entry.group.icon; } else { iconName = entry.icon || "question"; } } </script>
<div class="parent-entry" class:full={full}> {#if !removeHook} <LinkHook id={entry.id} /> {/if} {#if !hideIcon} <div class="icon" class:completed={entry.active === false}> {#if entry.active != null} <ProjectIcon project={entry} /> {:else} <Icon block name={iconName} /> {/if} </div> {/if} <div class="body"> <div class="header"> {#if entry.tags && entry.tags.length > 0} <Tag small value={entry.tags[0]} /> {/if} <div class="name"> {#if headerLink} <a href={headerLink}>{entry.name}</a> {:else} {entry.name} {/if} </div> <slot name="pre-annotation"></slot> {#each annotations as annotation (annotation)} <div class="annotation"> <Icon block name={annotation} /> </div> {/each} <div class="separator"></div> <slot name="post-seprator"></slot> {#if entry.endTime != null} <div class="days-left"> <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} /> </div> {/if} </div> {#if (!hideProgress && entry.tasks != null)} <ProjectProgress project={entry} /> {#if showTimeProgress && entry.endTime} <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} /> {/if} {/if} <slot name="above-description"></slot> {#if (full)} <Markdown source={entry.description} /> {/if} <slot></slot> </div> </div>
<style> div.parent-entry { display: flex; flex-direction: row; padding-bottom: 0.5em; } div.parent-entry.full { padding-bottom: 1em; } div.icon { font-size: 2em; padding: 0 0.5ch; width: 2ch; padding-top: 0.125em; color: #444; } div.icon.completed { color: #484; } div.body { display: flex; flex-direction: column; width: 100%; } div.header { display: flex; flex-direction: row; }
div.name { font-size: 1em; margin: auto 0; vertical-align: middle; font-weight: 100; } div.annotation { margin: auto 0; padding: 0 0.5ch; line-height: 0em; color: #333; } div.annotation + div.annotation { padding-left: 0; } div.separator { margin-left: auto; } div.days-left { margin-right: 0.25ch; margin-left: 1ch; }
a { color: inherit; text-decoration-color: #777; } </style>
|