upend/webui/src/components/BrowseAdd.svelte

<script lang="ts">
  import { createEventDispatcher } 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>