feat(webui): press shift and click close to reload a column
parent
a1fa423634
commit
0df4c78036
|
@ -14,6 +14,8 @@
|
||||||
export let only: boolean;
|
export let only: boolean;
|
||||||
export let background = "var(--background-lighter)";
|
export let background = "var(--background-lighter)";
|
||||||
export let forceDetail = false;
|
export let forceDetail = false;
|
||||||
|
let shifted = false;
|
||||||
|
let key = Math.random();
|
||||||
|
|
||||||
let detail = only || forceDetail;
|
let detail = only || forceDetail;
|
||||||
let detailChanged = false;
|
let detailChanged = false;
|
||||||
|
@ -62,12 +64,17 @@
|
||||||
window.addEventListener("mousemove", onMouseMove);
|
window.addEventListener("mousemove", onMouseMove);
|
||||||
window.addEventListener("mouseup", onMouseUp);
|
window.addEventListener("mouseup", onMouseUp);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function reload() {
|
||||||
|
key = Math.random();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="browse-column"
|
class="browse-column"
|
||||||
class:detail
|
class:detail
|
||||||
style="--background-color: {background}"
|
style="--background-color: {background}"
|
||||||
|
on:mousemove={(ev) => (shifted = ev.shiftKey)}
|
||||||
>
|
>
|
||||||
<div class="view" style="--width: {width}px">
|
<div class="view" style="--width: {width}px">
|
||||||
<header>
|
<header>
|
||||||
|
@ -98,15 +105,21 @@
|
||||||
Combine
|
Combine
|
||||||
</IconButton>
|
</IconButton>
|
||||||
{/if}
|
{/if}
|
||||||
<IconButton
|
{#if !shifted}
|
||||||
name="x-circle"
|
<IconButton
|
||||||
on:click={() => dispatch("close")}
|
name="x-circle"
|
||||||
disabled={only}
|
on:click={() => dispatch("close")}
|
||||||
>
|
disabled={only}
|
||||||
Close
|
>
|
||||||
</IconButton>
|
Close
|
||||||
|
</IconButton>
|
||||||
|
{:else}
|
||||||
|
<IconButton name="refresh" on:click={() => reload()}>Reload</IconButton>
|
||||||
|
{/if}
|
||||||
</header>
|
</header>
|
||||||
<slot {detail} />
|
{#key key}
|
||||||
|
<slot {detail} />
|
||||||
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
<div class="resizeHandle" on:mousedown|preventDefault={drag} />
|
<div class="resizeHandle" on:mousedown|preventDefault={drag} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue