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 ProjectProgress from "./ProjectProgress.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 }
export let entry: EntryCommon; export let full = false; export let headerLink = ""; export let hideProgress: boolean = false; export let hideIcon: 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}> <LinkHook id={entry.id} /> {#if !hideIcon} <div class="icon" class:completed={entry.active === false}> <Icon block name={iconName} /> </div> {/if} <div class="body"> <div class="header"> <div class="name"> {#if headerLink} <a href={headerLink}>{entry.name}</a> {:else} {entry.name} {/if} </div> {#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} {#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: #333; } 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.days-left { margin-left: auto; margin-right: 0.25ch; }
a { color: inherit; text-decoration-color: #777; } </style>
|