thm/upend
thm/upend
1
0
Fork 0
Code Issues 75 Pull requests Projects Releases 6 Packages Wiki Activity

[ui] scroll detail-mode columns into view

Browse source
This commit is contained in:
Tomáš Mládek 2022-03-20 16:43:50 +01:00
parent 4dcaeda3e9
commit 50aa34ef61
2 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webui/src/components/BrowseColumn.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher, tick } from "svelte";
import { normUrl } from "../util/history"; import { normUrl } from "../util/history";
import Inspect from "./Inspect.svelte"; import Inspect from "./Inspect.svelte";
@ -14,6 +14,7 @@
let detail = only; let detail = only;
let detailChanged = false; let detailChanged = false;
$: if (!detailChanged) detail = only; $: if (!detailChanged) detail = only;
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
function visit() { function visit() {
window.open(normUrl(`/browse/${address}`), "_blank"); window.open(normUrl(`/browse/${address}`), "_blank");

42
webui/src/views/Browse.svelte
View file

@ -19,13 +19,20 @@
} }
} }
$: { $: scrollToVisible(addresses.length - 1);
addresses;
root?.scrollTo({ function scrollToVisible(idx: number) {
left: root.scrollWidth, console.log(`Scrolling to ${idx}`);
behavior: "smooth", const target = root?.querySelector(
}); `[data-index='${idx}']`
)?.firstElementChild as HTMLElement;
if (target) {
root?.scrollTo({
left: target.offsetLeft,
behavior: "smooth",
});
}
} }
function onIdentified(index: number, ev: CustomEvent<string[]>) { function onIdentified(index: number, ev: CustomEvent<string[]>) {
@ -43,17 +50,20 @@
<div class="browser" bind:this={root}> <div class="browser" bind:this={root}>
{#each addresses as address, index} {#each addresses as address, index}
<BrowseColumn <div class="column" data-index={index}>
{address} <BrowseColumn
{index} {address}
only={addresses.length === 1} {index}
on:close={() => close(index)} only={addresses.length === 1}
on:resolved={(ev) => onIdentified(index, ev)} on:close={() => close(index)}
/> on:resolved={(ev) => onIdentified(index, ev)}
on:detail={(ev) => ev.detail && scrollToVisible(index)}
/>
</div>
{/each} {/each}
</div> </div>
<style scoped lang="scss"> <style lang="scss">
.browser { .browser {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
@ -65,4 +75,8 @@
margin-top: 1rem; margin-top: 1rem;
margin-bottom: var(--footer-height); margin-bottom: var(--footer-height);
} }
.column {
display: contents;
}
</style> </style>