Browse Source

Merge pull request 'Explicitly closing panel does not show the preview' (#16) from exyi/explicit-close into master

Reviewed-on: https://gitea.ks.matfyz.cz/KSP/graf-uloh/pulls/16
mj-deploy
Vašek Šraier 4 years ago
parent
commit
1e3d3808f9
  1. 11
      frontend/src/TaskPanel.svelte

11
frontend/src/TaskPanel.svelte

@ -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,
@ -60,10 +60,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;
} }