|
|
<script lang="ts"> import type { IconName, iconNames } from "../external/icons"; import { formatTime } from "../utils/time"; import DaysLeft from "./DaysLeft.svelte"; import Icon from "./Icon.svelte"; import LinkHook from "./LinkHook.svelte"; import Markdown from "./Markdown.svelte";
interface ActualParent { id: string name: string }
interface EntryCommon { id: string name?: string description: string icon?: IconName
startTime?: string endTime?: string createdTime?: string loggedTime?: string
active?: boolean completedAmount?: number itemAmount?: number task?: EntryCommonSub } interface EntryCommonSub { name: string icon: IconName }
export let entry: EntryCommon = null; export let actualParent: ActualParent = null; export let hideParentName: boolean = false;
let iconName: IconName; let displayName: string; let displayTime: string;
$: iconName = entry.task?.icon || entry.icon; $: displayName = entry.name || entry.task?.name || ""; $: displayTime = entry.loggedTime ? formatTime(entry.loggedTime) : ""; </script>
<div class="child-entry"> <LinkHook id={entry.id} /> <div class="body"> <div class="header"> <slot name="icon"> <div class="icon"> <Icon name={iconName} /> </div> </slot> {#if (actualParent != null)} {#if !hideParentName} <div class="actual-parent-icon"> <Icon block name="link" /> </div> <div class="actual-parent"> <a href={`/questlog#${actualParent.id}`}>{actualParent.name}</a> </div> {/if} {/if} <div class="name">{displayName}</div> <div class="separator"></div> {#if (entry.endTime != null)} <div class="times"> <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} /> </div> {/if} {#if (displayTime != null)} <div class="times"> {displayTime} </div> {/if} </div> <div class="entry-body"> <Markdown source={entry.description} /> <slot></slot> </div> </div> </div>
<style> div.child-entry { display: flex; flex-direction: row; margin: 0.25em 0 0.75em 0; } div.icon, div.child-entry div.header :global(div.icon-like) { display: flex; flex-direction: column; font-size: 1em; padding: 0.2em .5ch;
margin-right: 0.5em; background: #444; color: #CCC; }
div.body { display: flex; flex-direction: column; width: 100%; } div.header { display: flex; flex-direction: row; background: #333; }
div.actual-parent-icon { display: flex; flex-direction: column; font-size: 1em; padding: 0.3em 0; padding-bottom: 0.1em;
margin-right: 0.5em; color: #555; } div.actual-parent { font-size: 1em; font-weight: 100; margin: auto 0; vertical-align: middle; padding: 0.125em 0; padding-right: 1ch;
display: flex; flex-direction: row; } div.actual-parent :global(div.icon) { display: none !important; }
div.name { font-size: 1em; font-weight: 100; margin: auto 0; vertical-align: middle; padding: 0.125em .5ch; } div.times { margin-right: 0.25ch; padding: 0.125em 0; } div.separator { margin-left: auto; }
div.entry-body { padding: 0.25em 1ch; background: #222; color: #aaa; border-bottom-right-radius: 0.5em; } </style>
|