[ui] add a button for adding column to current selection
also add `focus()` method to Selector/Inputfeat/vaults
parent
d48e5346a7
commit
46f8f38ac8
|
@ -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">
|
||||
import { createEventDispatcher, tick } from "svelte";
|
||||
import { createEventDispatcher, onMount, tick } from "svelte";
|
||||
import { normUrl } from "../util/history";
|
||||
|
||||
import Inspect from "./Inspect.svelte";
|
||||
|
@ -16,6 +16,11 @@
|
|||
$: if (!detailChanged) detail = only;
|
||||
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
||||
|
||||
onMount(() => {
|
||||
// Required to make detail mode detection work in Browse
|
||||
dispatch("detail", detail);
|
||||
});
|
||||
|
||||
function visit() {
|
||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let input: HTMLInputElement;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
@ -13,11 +14,16 @@
|
|||
function onInput() {
|
||||
dispatch("input", value);
|
||||
}
|
||||
|
||||
export function focus() {
|
||||
input.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="input" class:focused>
|
||||
<slot name="prefix" />
|
||||
<input
|
||||
bind:this={input}
|
||||
{placeholder}
|
||||
bind:value
|
||||
on:input={onInput}
|
||||
|
|
|
@ -10,9 +10,9 @@
|
|||
import Input from "./Input.svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let type: "attribute" | "value";
|
||||
export let attribute: string | undefined = undefined;
|
||||
export let value: IValue | undefined = undefined;
|
||||
export let type: "attribute" | "value";
|
||||
export let valueTypes: VALUE_TYPE[] | undefined = undefined;
|
||||
export let placeholder = "";
|
||||
export let disabled = false;
|
||||
|
@ -177,6 +177,11 @@
|
|||
let inputFocused = false;
|
||||
let hover = false;
|
||||
$: visible = (inputFocused || hover) && Boolean(options.length);
|
||||
|
||||
let input: Input;
|
||||
export function focus() {
|
||||
input.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="selector">
|
||||
|
@ -189,6 +194,7 @@
|
|||
</div>
|
||||
{:else}
|
||||
<Input
|
||||
bind:this={input}
|
||||
bind:value={inputValue}
|
||||
on:input={onInput}
|
||||
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { useNavigate, useParams } from "svelte-navigator";
|
||||
import BrowseAdd from "../components/BrowseAdd.svelte";
|
||||
import BrowseColumn from "../components/BrowseColumn.svelte";
|
||||
import { updateTitle } from "../util/title";
|
||||
const navigate = useNavigate();
|
||||
|
@ -9,6 +10,12 @@
|
|||
let identities: string[] = [];
|
||||
$: addresses = $params.addresses.split(",");
|
||||
|
||||
function add(address: string) {
|
||||
let _addresses = addresses.concat();
|
||||
_addresses.push(address);
|
||||
navigate(`/browse/${_addresses.join(",")}`);
|
||||
}
|
||||
|
||||
function close(idx: number) {
|
||||
let _addresses = addresses.concat();
|
||||
_addresses.splice(idx, 1);
|
||||
|
@ -21,11 +28,9 @@
|
|||
|
||||
$: scrollToVisible(addresses.length - 1);
|
||||
|
||||
function scrollToVisible(idx: number) {
|
||||
console.log(`Scrolling to ${idx}`);
|
||||
const target = root?.querySelector(
|
||||
`[data-index='${idx}']`
|
||||
)?.firstElementChild as HTMLElement;
|
||||
function scrollToVisible(idx: string | number) {
|
||||
const target = root?.querySelector(`[data-index='${idx}']`)
|
||||
?.firstElementChild as HTMLElement;
|
||||
|
||||
if (target) {
|
||||
root?.scrollTo({
|
||||
|
@ -45,6 +50,14 @@
|
|||
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(" / "));
|
||||
</script>
|
||||
|
||||
|
@ -57,10 +70,20 @@
|
|||
only={addresses.length === 1}
|
||||
on:close={() => close(index)}
|
||||
on:resolved={(ev) => onIdentified(index, ev)}
|
||||
on:detail={(ev) => ev.detail && scrollToVisible(index)}
|
||||
on:detail={(ev) => onDetailChanged(index, ev)}
|
||||
/>
|
||||
</div>
|
||||
{/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>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
Loading…
Reference in New Issue