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

Explicitly closing panel does not show the preview

Browse source
This commit is contained in:
Standa Lukeš 2020-09-29 11:42:40 +00:00
parent 06c72d33ad
commit 6bbc40cfde
1 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/TaskPanel.svelte
View file

@ -7,7 +7,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
// export let tasks: TasksFile;
let selectedTask: TaskDescriptor | null = null
let heightClass: "collapsed" | "full" | "preview" = "collapsed"
let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
export function preSelect(task: TaskDescriptor) {
if (heightClass != "full") {
@ -30,7 +30,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
}
function close() {
heightClass = "collapsed"
heightClass = "closed"
window.setTimeout(() => window.scrollTo({
top: 0,
left: 0,
@ -54,10 +54,15 @@ import TaskDisplay from "./TaskDisplay.svelte";
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) {
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 {
height: 100px;
}
@ -66,13 +71,13 @@ import TaskDisplay from "./TaskDisplay.svelte";
}
.closeButton {
display: none;
position: absolute;
right: 0;
top: 0;
color: white;
background-color: red;
border: 0;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
color: white;
background-color: red;
border: 0;
cursor: pointer;
}
.closeButton::before {
content: "X";