Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › 13463bd7
Move external addresses to a popover
Open rudolfs opened 17 days ago

check check-visual check-unit-test check-http-client-unit-test check-radicle-httpd check-e2e check-build check-http 👉 Workflow runs 👉 Branch on GitHub

Activity Changes +83 -16
2 files changed +83 -16 74e15e25 → 22545bed
modified src/views/nodes/NodeAddress.svelte
@@ -1,23 +1,88 @@
<script lang="ts">

  import type { Node } from "@http-client";
-
- 
  import { truncateId } from "@app/lib/utils";
+ 
  import Command from "@app/components/Command.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";

  import Id from "@app/components/Id.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";



  export let node: Node;
- 
  $: clipboard = node.config?.externalAddresses
- 
    ? `${node.id}@${node.config.externalAddresses[0]}`
- 
    : node.id;
+ 
  $: addresses = node.config?.externalAddresses ?? [];
+ 
  const externalAddressesCommand =
+ 
    'rad config push node.externalAddresses "example.com:58776"';

</script>
- 
<div style:word-break="break-word">
- 
  <!--prettier-ignore-->
- 
  <Id ariaLabel="node-id" shorten={false} id={clipboard}>
- 
    {#if node.config?.externalAddresses.length}
- 
      {truncateId(node.id)}@<wbr />{node.config?.externalAddresses[0]}
- 
    {:else}
- 
      {truncateId(node.id)}
- 
    {/if}
- 
  </Id>
- 
</div>
+ 
<style>
+ 
  .item {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: space-between;
+ 
    gap: 0.5rem;
+ 
    width: 100%;
+ 
    font: var(--txt-body-m-regular);
+ 
  }
+ 
  .address-list {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 0.5rem;
+ 
  }
+ 
  .box {
+ 
    font: var(--txt-body-m-regular);
+ 
    line-height: 1.625rem;
+ 
    width: 20rem;
+ 
  }
+ 
</style>
+
+ 
{#if addresses.length === 0}
+ 
  <div class="item">
+ 
    <span style:white-space="nowrap">External Address</span>
+ 
    <div
+ 
      class="global-flex-item"
+ 
      style:align-items="center"
+ 
      style:gap="0.25rem"
+ 
      style:color="var(--color-text-tertiary)"
+ 
      style:font="var(--txt-body-m-regular)">
+ 
      Not configured.
+ 
      <Popover popoverPositionTop="2.5rem" popoverPositionLeft="0">
+ 
        <IconButton slot="toggle" let:toggle on:click={toggle}>
+ 
          <Icon name="guide" />
+ 
        </IconButton>
+ 
        <div slot="popover" class="box">
+ 
          If you're the owner of this node, you can set an external address by
+ 
          running:
+ 
          <div style:margin-top="1rem">
+ 
            <Command command={externalAddressesCommand} fullWidth />
+ 
          </div>
+ 
        </div>
+ 
      </Popover>
+ 
    </div>
+ 
  </div>
+ 
{:else if addresses.length > 0}
+ 
  <div class="item">
+ 
    <span style:white-space="nowrap">External Addresses</span>
+ 
    <Popover popoverPositionTop="2rem" popoverPositionRight="0">
+ 
      <div
+ 
        slot="toggle"
+ 
        let:toggle
+ 
        let:expanded
+ 
        style:display="flex"
+ 
        style:align-items="center"
+ 
        style:gap="0.25rem">
+ 
        <IconButton on:click={toggle}>
+ 
          <Icon name={expanded ? "chevron-up" : "chevron-down"} />
+ 
        </IconButton>
+ 
      </div>
+ 
      <div slot="popover" class="address-list">
+ 
        {#each addresses as address}
+ 
          <Id
+ 
            ariaLabel="external-address"
+ 
            id={`rad node connect ${node.id}@${address}`}
+ 
            shorten={false}>
+ 
            <span style:font="var(--txt-code-regular)">{address}</span>
+ 
          </Id>
+ 
        {/each}
+ 
      </div>
+ 
    </Popover>
+ 
  </div>
+ 
{/if}
modified src/views/nodes/View.svelte
@@ -89,7 +89,6 @@
            <div class="global-flex-item">

              <SeedSelector {baseUrl} />

            </div>
- 
            <NodeAddress {node} />

          </div>

        </div>
@@ -130,6 +129,9 @@
        {/if}



        <div style:display="flex" style:flex-direction="column">
+ 
          <div style:width="100%">
+ 
            <NodeAddress {node} />
+ 
          </div>

          <PolicyExplainer seedingPolicy={node.config?.seedingPolicy} />

          <div class="sidebar-item">

            <Seeding count={stats.repos.total}>