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

Explicitly closing panel does not show the preview

mj-deploy
Standa Lukeš 4 years ago
parent
06c72d33ad
commit
6bbc40cfde
1 changed files with 15 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      frontend/src/TaskPanel.svelte

25
frontend/src/TaskPanel.svelte
View File

@ -7,7 +7,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
// export let tasks: TasksFile; // export let tasks: TasksFile;
let selectedTask: TaskDescriptor | null = null let selectedTask: TaskDescriptor | 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") {
@ -30,7 +30,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
} }
function close() { function close() {
heightClass = "collapsed" heightClass = "closed"
window.setTimeout(() => window.scrollTo({ window.setTimeout(() => window.scrollTo({
top: 0, top: 0,
left: 0, left: 0,
@ -54,10 +54,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;
} }
@ -66,13 +71,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";