KSP/graf-uloh
Archived
37
1
Fork 0
Code Issues 20 Pull requests Releases Wiki Activity

Merge master

Browse source
This commit is contained in:
Standa Lukeš 2020-09-29 19:30:04 +00:00
parent f4601a782b
commit e9a6ccb59c
1 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/TaskPanel.svelte
View file

@ -8,7 +8,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
let selectedTask: TaskDescriptor | null = null let selectedTask: TaskDescriptor | null = null
export let selectedTaskId: string | null = null export let selectedTaskId: string | null = null
let heightClass: "collapsed" | "full" | "preview" = "collapsed" let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
export function preSelect(task: TaskDescriptor) { export function preSelect(task: TaskDescriptor) {
if (heightClass != "full") { if (heightClass != "full") {
@ -36,13 +36,19 @@ import TaskDisplay from "./TaskDisplay.svelte";
function close() { function close() {
location.hash = "" location.hash = ""
heightClass = "collapsed" heightClass = "closed"
window.setTimeout(() => window.scrollTo({ window.setTimeout(() => window.scrollTo({
top: 0, top: 0,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
}), 100) }), 100)
} }
function handleKeydown(e: KeyboardEvent) {
if (e.key === "Escape") {
close()
}
}
</script> </script>
<style> <style>
@ -60,10 +66,15 @@ import TaskDisplay from "./TaskDisplay.svelte";
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
} }
} }
/* Used when the panel is explicitly closed - collapsed would still show the hover preview */
.panel.closed {
display: none;
}
/* Used when the panel is implicitly closed - it does not disappear when there is mouse over it */
.panel.collapsed:not(:hover) { .panel.collapsed:not(:hover) {
display: none; display: none;
} }
/* Used when the user hovers over a node and we want to show that there is something - a small expandable preview */
.panel.preview, .panel:not(.full):hover { .panel.preview, .panel:not(.full):hover {
height: 100px; height: 100px;
} }
@ -72,13 +83,13 @@ import TaskDisplay from "./TaskDisplay.svelte";
} }
.closeButton { .closeButton {
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
color: white; color: white;
background-color: red; background-color: red;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
} }
.closeButton::before { .closeButton::before {
content: "X"; content: "X";
@ -86,6 +97,8 @@ import TaskDisplay from "./TaskDisplay.svelte";
.panel.full .closeButton { display: inherit } .panel.full .closeButton { display: inherit }
</style> </style>
<svelte:window on:keydown={handleKeydown} />
<div class="panel {heightClass}" <div class="panel {heightClass}"
on:click={() => location.hash = `#task/${selectedTask?.id}`}> on:click={() => location.hash = `#task/${selectedTask?.id}`}>
<TaskDisplay taskId={selectedTask?.id} /> <TaskDisplay taskId={selectedTask?.id} />