Browse Source

Next tasks and close button on the bottom of task modal

mj-deploy
Standa Lukeš 4 years ago
parent
commit
d7c9251238
  1. 4
      frontend/src/TaskDisplay.svelte
  2. 27
      frontend/src/TaskPanel.svelte

4
frontend/src/TaskDisplay.svelte

@ -55,10 +55,6 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
list-style: initial; list-style: initial;
margin-left: 2em; margin-left: 2em;
} }
div {
font-size: 1.25rem;
}
</style> </style>
<div> <div>

27
frontend/src/TaskPanel.svelte

@ -1,21 +1,23 @@
<script lang="ts"> <script lang="ts">
import type { TasksFile, TaskDescriptor } from "./tasks"; import type { TasksFile, TaskDescriptor } from "./tasks";
import TaskDisplay from "./TaskDisplay.svelte"; import TaskDisplay from "./TaskDisplay.svelte";
import GraphNode from "./GraphNode.svelte";
import { taskStatuses } from "./task-status-cache";
export let tasks: TasksFile; export let tasks: TasksFile;
let selectedTask: TaskDescriptor | null = null let selectedTask: TaskDescriptor | null = null
let nextTasks: TaskDescriptor[] = []
export let selectedTaskId: string | null = null export let selectedTaskId: string | null = null
let heightClass: "closed" | "full" = "closed" let heightClass: "closed" | "full" = "closed"
let lastSelectedTaskId: string | null = null let lastSelectedTaskId: string | null = null
$: { $: {
if (selectedTaskId && lastSelectedTaskId != selectedTaskId) { if (selectedTaskId && lastSelectedTaskId != selectedTaskId) {
heightClass = "full" heightClass = "full"
selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null
nextTasks = tasks.tasks.filter(t => t.requires.includes(selectedTaskId!) && !t.hidden && t.type != "label")
} else { } else {
heightClass = "closed"; heightClass = "closed";
} }
@ -51,6 +53,8 @@
box-sizing: border-box; box-sizing: border-box;
z-index: 120; z-index: 120;
border-radius: 30px; border-radius: 30px;
font-size: 1.25rem;
text-align: left;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.panel { .panel {
@ -85,6 +89,10 @@
content: "✖"; content: "✖";
} }
.panel.full .closeButton { display: inherit } .panel.full .closeButton { display: inherit }
.splitter {
margin: 0px 8px;
color: #777777;
}
</style> </style>
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
@ -93,4 +101,19 @@
on:click={() => location.hash = `#task/${selectedTask?.id}`}> on:click={() => location.hash = `#task/${selectedTask?.id}`}>
<TaskDisplay task={selectedTask} /> <TaskDisplay task={selectedTask} />
<button type=button class="closeButton" on:click|stopPropagation={close}></button> <button type=button class="closeButton" on:click|stopPropagation={close}></button>
<hr>
<a href="javascript:;" on:click={close}>Zavřít</a>
{#if nextTasks.length}
<span class="splitter">|</span> Pokračování:
{#each nextTasks as nextT}
{#if nextTasks[0] != nextT} <span class="splitter">|</span> {/if}
<a href="#task/{nextT.id}">{nextT.title}</a>
<!-- <svg style="display: inline-block;">
<GraphNode task={nextT} status={$taskStatuses.get(nextT.taskReference)} on:click={e => { location.hash = "task/" + nextT.id }}></GraphNode>
</svg> -->
{/each}
{/if}
</div> </div>