[ui] add a button for adding column to current selection
also add `focus()` method to Selector/Input
This commit is contained in:
parent
d48e5346a7
commit
46f8f38ac8
5 changed files with 126 additions and 8 deletions
78
webui/src/components/BrowseAdd.svelte
Normal file
78
webui/src/components/BrowseAdd.svelte
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher, tick } from "svelte";
|
||||||
|
|
||||||
|
import Icon from "./utils/Icon.svelte";
|
||||||
|
import Selector from "./utils/Selector.svelte";
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
let selector: Selector;
|
||||||
|
|
||||||
|
let editable = false;
|
||||||
|
$: {
|
||||||
|
if (editable) {
|
||||||
|
dispatch("editable");
|
||||||
|
setTimeout(() => dispatch("editable"), 500); // once animation has finished
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$: editable && selector && selector.focus();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="view" class:editable on:click={() => (editable = true)}>
|
||||||
|
<div class="icon">
|
||||||
|
<Icon name="plus-circle" />
|
||||||
|
</div>
|
||||||
|
{#if editable}
|
||||||
|
<div class="controls">
|
||||||
|
<Selector
|
||||||
|
bind:this={selector}
|
||||||
|
type="value"
|
||||||
|
valueTypes={["Address"]}
|
||||||
|
on:input={(ev) => {
|
||||||
|
dispatch("input", ev.detail);
|
||||||
|
editable = false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.view {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: var(--background-lighter);
|
||||||
|
color: var(--foreground-lighter);
|
||||||
|
border: 1px solid var(--foreground-lightest);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: opacity 0.3s, width 0.5s, min-width 0.5s;
|
||||||
|
|
||||||
|
opacity: 0.4;
|
||||||
|
width: 48px;
|
||||||
|
min-width: 48px;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.editable {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.editable {
|
||||||
|
width: 18em;
|
||||||
|
min-width: 18em;
|
||||||
|
.icon {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 48px;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher, tick } from "svelte";
|
import { createEventDispatcher, onMount, tick } from "svelte";
|
||||||
import { normUrl } from "../util/history";
|
import { normUrl } from "../util/history";
|
||||||
|
|
||||||
import Inspect from "./Inspect.svelte";
|
import Inspect from "./Inspect.svelte";
|
||||||
|
@ -16,6 +16,11 @@
|
||||||
$: if (!detailChanged) detail = only;
|
$: if (!detailChanged) detail = only;
|
||||||
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
// Required to make detail mode detection work in Browse
|
||||||
|
dispatch("detail", detail);
|
||||||
|
});
|
||||||
|
|
||||||
function visit() {
|
function visit() {
|
||||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
window.open(normUrl(`/browse/${address}`), "_blank");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
|
let input: HTMLInputElement;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
@ -13,11 +14,16 @@
|
||||||
function onInput() {
|
function onInput() {
|
||||||
dispatch("input", value);
|
dispatch("input", value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function focus() {
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="input" class:focused>
|
<div class="input" class:focused>
|
||||||
<slot name="prefix" />
|
<slot name="prefix" />
|
||||||
<input
|
<input
|
||||||
|
bind:this={input}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
bind:value
|
bind:value
|
||||||
on:input={onInput}
|
on:input={onInput}
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
import Input from "./Input.svelte";
|
import Input from "./Input.svelte";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let type: "attribute" | "value";
|
||||||
export let attribute: string | undefined = undefined;
|
export let attribute: string | undefined = undefined;
|
||||||
export let value: IValue | undefined = undefined;
|
export let value: IValue | undefined = undefined;
|
||||||
export let type: "attribute" | "value";
|
|
||||||
export let valueTypes: VALUE_TYPE[] | undefined = undefined;
|
export let valueTypes: VALUE_TYPE[] | undefined = undefined;
|
||||||
export let placeholder = "";
|
export let placeholder = "";
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
@ -177,6 +177,11 @@
|
||||||
let inputFocused = false;
|
let inputFocused = false;
|
||||||
let hover = false;
|
let hover = false;
|
||||||
$: visible = (inputFocused || hover) && Boolean(options.length);
|
$: visible = (inputFocused || hover) && Boolean(options.length);
|
||||||
|
|
||||||
|
let input: Input;
|
||||||
|
export function focus() {
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="selector">
|
<div class="selector">
|
||||||
|
@ -189,6 +194,7 @@
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<Input
|
<Input
|
||||||
|
bind:this={input}
|
||||||
bind:value={inputValue}
|
bind:value={inputValue}
|
||||||
on:input={onInput}
|
on:input={onInput}
|
||||||
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { useNavigate, useParams } from "svelte-navigator";
|
import { useNavigate, useParams } from "svelte-navigator";
|
||||||
|
import BrowseAdd from "../components/BrowseAdd.svelte";
|
||||||
import BrowseColumn from "../components/BrowseColumn.svelte";
|
import BrowseColumn from "../components/BrowseColumn.svelte";
|
||||||
import { updateTitle } from "../util/title";
|
import { updateTitle } from "../util/title";
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
@ -9,6 +10,12 @@
|
||||||
let identities: string[] = [];
|
let identities: string[] = [];
|
||||||
$: addresses = $params.addresses.split(",");
|
$: addresses = $params.addresses.split(",");
|
||||||
|
|
||||||
|
function add(address: string) {
|
||||||
|
let _addresses = addresses.concat();
|
||||||
|
_addresses.push(address);
|
||||||
|
navigate(`/browse/${_addresses.join(",")}`);
|
||||||
|
}
|
||||||
|
|
||||||
function close(idx: number) {
|
function close(idx: number) {
|
||||||
let _addresses = addresses.concat();
|
let _addresses = addresses.concat();
|
||||||
_addresses.splice(idx, 1);
|
_addresses.splice(idx, 1);
|
||||||
|
@ -21,11 +28,9 @@
|
||||||
|
|
||||||
$: scrollToVisible(addresses.length - 1);
|
$: scrollToVisible(addresses.length - 1);
|
||||||
|
|
||||||
function scrollToVisible(idx: number) {
|
function scrollToVisible(idx: string | number) {
|
||||||
console.log(`Scrolling to ${idx}`);
|
const target = root?.querySelector(`[data-index='${idx}']`)
|
||||||
const target = root?.querySelector(
|
?.firstElementChild as HTMLElement;
|
||||||
`[data-index='${idx}']`
|
|
||||||
)?.firstElementChild as HTMLElement;
|
|
||||||
|
|
||||||
if (target) {
|
if (target) {
|
||||||
root?.scrollTo({
|
root?.scrollTo({
|
||||||
|
@ -45,6 +50,14 @@
|
||||||
identities = identities;
|
identities = identities;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let detailMode = false;
|
||||||
|
function onDetailChanged(index: number, ev: CustomEvent<boolean>) {
|
||||||
|
if (ev.detail) {
|
||||||
|
scrollToVisible(index);
|
||||||
|
}
|
||||||
|
detailMode = addresses.length === 1 && ev.detail;
|
||||||
|
}
|
||||||
|
|
||||||
$: updateTitle("Browse", identities.join(" / "));
|
$: updateTitle("Browse", identities.join(" / "));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -57,10 +70,20 @@
|
||||||
only={addresses.length === 1}
|
only={addresses.length === 1}
|
||||||
on:close={() => close(index)}
|
on:close={() => close(index)}
|
||||||
on:resolved={(ev) => onIdentified(index, ev)}
|
on:resolved={(ev) => onIdentified(index, ev)}
|
||||||
on:detail={(ev) => ev.detail && scrollToVisible(index)}
|
on:detail={(ev) => onDetailChanged(index, ev)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
{#if !detailMode}
|
||||||
|
{#key addresses}
|
||||||
|
<div class="column" data-index="add">
|
||||||
|
<BrowseAdd
|
||||||
|
on:input={(ev) => add(ev.detail.c)}
|
||||||
|
on:editable={() => scrollToVisible("add")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
Loading…
Reference in a new issue