Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Tweak sync/authenticate/connect buttons
Rūdolfs Ošiņš committed 2 years ago
commit 4bd03f55dc026e1bdae52a8d8e04dbd58488c642
parent 54be2b78e410ff754fb51cfadbcce053dd0377e7
4 files changed +113 -109
modified src/App/Header/Authenticate.svelte
@@ -8,7 +8,6 @@
  import ConnectModal from "@app/modals/ConnectModal.svelte";

  import IconButton from "@app/components/IconButton.svelte";

  import IconSmall from "@app/components/IconSmall.svelte";
- 
  import Link from "@app/components/Link.svelte";

  import NodeId from "@app/components/NodeId.svelte";

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

</script>
@@ -17,23 +16,14 @@
  .container {

    display: flex;

    flex-direction: column;
- 
    gap: 1.5rem;
- 
  }
- 
  .host {
- 
    display: flex;
- 
    justify-content: space-between;
- 
    align-items: center;
- 
    font-size: var(--font-size-small);
+ 
    gap: 0.5rem;
+ 
    min-width: 18rem;

  }

  .status {

    font-size: var(--font-size-tiny);

    color: var(--color-fill-gray);

    text-align: left;

  }
- 
  .separator {
- 
    height: 1px;
- 
    background-color: var(--color-border-hint);
- 
  }

  .avatar {

    height: 1.5rem;

    color: var(--color-fill-primary) !important;
@@ -53,15 +43,11 @@
    top: -0.375rem;

    right: -0.375rem;

  }
- 
  .row {
- 
    display: flex;
- 
    flex-direction: column;
- 
    gap: 0.5rem;
- 
  }

  .user {

    display: flex;

    justify-content: space-between;

    align-items: center;
+ 
    gap: 1rem;

  }

  .identity {

    color: var(--color-fill-secondary);
@@ -70,10 +56,7 @@
</style>



{#if $httpdStore.state === "authenticated"}
- 
  <Popover
- 
    popoverPositionTop="3rem"
- 
    popoverPositionRight="-10rem"
- 
    popoverPositionLeft="0">
+ 
  <Popover popoverPositionTop="3rem" popoverPositionRight="0">

    <Button

      slot="toggle"

      let:toggle
@@ -91,44 +74,20 @@
    </Button>



    <div slot="popover" class="container">
- 
      <div class="row">
- 
        <div class="status">Httpd server running</div>
-
- 
        <div class="host">
- 
          radicle.local
-
- 
          <Link
- 
            on:afterNavigate={closeFocused}
- 
            route={{
- 
              resource: "nodes",
- 
              params: {
- 
                baseUrl: httpd.api.baseUrl,
- 
                projectPageIndex: 0,
- 
              },
- 
            }}>
- 
            <IconButton>Browse</IconButton>
- 
          </Link>
- 
        </div>
- 
      </div>
-
- 
      <div class="separator" />
-
- 
      <div class="row">
- 
        <div class="status">Authenticated as</div>
- 
        <div class="user">
- 
          <div class="identity">
- 
            <NodeId
- 
              nodeId={$httpdStore.session.publicKey}
- 
              alias={$httpdStore.session.alias} />
- 
          </div>
- 
          <IconButton
- 
            on:click={() => {
- 
              void httpd.disconnect();
- 
              closeFocused();
- 
            }}>
- 
            Disconnect
- 
          </IconButton>
+ 
      <div class="status">Authenticated as</div>
+ 
      <div class="user">
+ 
        <div class="identity">
+ 
          <NodeId
+ 
            nodeId={$httpdStore.session.publicKey}
+ 
            alias={$httpdStore.session.alias} />

        </div>
+ 
        <IconButton
+ 
          on:click={() => {
+ 
            void httpd.disconnect();
+ 
            closeFocused();
+ 
          }}>
+ 
          Disconnect
+ 
        </IconButton>

      </div>

    </div>

  </Popover>
@@ -141,7 +100,7 @@
      });

    }}

    size="large"
- 
    variant="outline">
+ 
    variant="primary-outline">

    <IconSmall name="key" />

    Authenticate

    <div class="indicator" />
@@ -155,7 +114,7 @@
      });

    }}

    size="large"
- 
    variant="outline">
+ 
    variant="primary-outline">

    <IconSmall name="chat" />

    Authenticate

  </Button>
modified src/App/Header/Connect.svelte
@@ -1,12 +1,17 @@
<script lang="ts">

  import type { HttpdState } from "@app/lib/httpd";
+ 
  import * as httpd from "@app/lib/httpd";
+ 
  import { closeFocused } from "@app/components/Popover.svelte";

  import { httpdStore } from "@app/lib/httpd";



  import Button from "@app/components/Button.svelte";
+ 
  import Command from "@app/components/Command.svelte";
+ 
  import ExternalLink from "@app/components/ExternalLink.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";

  import IconSmall from "@app/components/IconSmall.svelte";
+ 
  import Link from "@app/components/Link.svelte";

  import Popover from "@app/components/Popover.svelte";
- 
  import Command from "@app/components/Command.svelte";



  const buttonTitle: Record<HttpdState["state"], string> = {

    stopped: "radicle-httpd is stopped",
@@ -16,52 +21,87 @@
</script>



<style>
+ 
  .container {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 0.5rem;
+ 
    min-width: 18rem;
+ 
  }
+ 
  .host {
+ 
    display: flex;
+ 
    justify-content: space-between;
+ 
    align-items: center;
+ 
    font-size: var(--font-size-small);
+ 
  }

  .label {

    display: block;

    font-size: var(--font-size-small);

    font-weight: var(--font-weight-regular);

    margin-bottom: 0.75rem;

  }
+ 
  .status {
+ 
    font-size: var(--font-size-tiny);
+ 
    color: var(--color-fill-gray);
+ 
    text-align: left;
+ 
  }

</style>



{#if $httpdStore.state === "stopped"}
- 
  <Popover
- 
    popoverPositionTop="3rem"
- 
    popoverPositionRight="0"
- 
    popoverPositionLeft="-13rem">
+ 
  <Popover popoverPositionTop="3rem" popoverPositionRight="0">

    <Button

      slot="toggle"

      let:toggle

      on:click={toggle}

      title={buttonTitle[$httpdStore.state]}

      size="large"
- 
      variant="outline">
+ 
      variant="primary-outline">

      <IconSmall name="device" />

      Connect

    </Button>
- 
    <svelte:fragment slot="popover">
- 
      <div>
- 
        <div class="label">
- 
          Use the <a
- 
            target="_blank"
- 
            rel="noreferrer"
- 
            href="https://radicle.xyz/#try"
- 
            class="txt-link txt-bold">
- 
            Radicle CLI
- 
          </a>
- 
          to connect your device.
- 
        </div>
- 
        <div class="label">
- 
          Run the following command to start the httpd daemon.
- 
        </div>
- 
        <Command command="radicle-httpd" fullWidth />
+ 
    <div slot="popover" style:width="23rem">
+ 
      <div class="label">
+ 
        Use the
+ 
        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
+ 
        to connect your device.
+ 
      </div>
+ 
      <div class="label">
+ 
        Run the following command to start the httpd daemon.

      </div>
- 
    </svelte:fragment>
+ 
      <Command command="radicle-httpd" fullWidth />
+ 
    </div>

  </Popover>

{:else}
- 
  <Button title={buttonTitle[$httpdStore.state]} size="large" variant="primary">
- 
    <IconSmall name="device" />
- 
    Connected
- 
  </Button>
+ 
  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
+ 
    <Button
+ 
      slot="toggle"
+ 
      let:toggle
+ 
      on:click={toggle}
+ 
      title={buttonTitle[$httpdStore.state]}
+ 
      size="large"
+ 
      variant="primary">
+ 
      <IconSmall name="device" />
+ 
      Connected
+ 
    </Button>
+
+ 
    <div slot="popover" class="container">
+ 
      <div class="status">Httpd server running</div>
+
+ 
      <div class="host">
+ 
        radicle.local
+
+ 
        <Link
+ 
          on:afterNavigate={closeFocused}
+ 
          route={{
+ 
            resource: "nodes",
+ 
            params: {
+ 
              baseUrl: httpd.api.baseUrl,
+ 
              projectPageIndex: 0,
+ 
            },
+ 
          }}>
+ 
          <IconButton>Browse</IconButton>
+ 
        </Link>
+ 
      </div>
+ 
    </div>
+ 
  </Popover>

{/if}
modified src/App/Header/NodeInfo.svelte
@@ -1,8 +1,9 @@
<script lang="ts">

  import Button from "@app/components/Button.svelte";
- 
  import Popover from "@app/components/Popover.svelte";

  import Command from "@app/components/Command.svelte";
+ 
  import ExternalLink from "@app/components/ExternalLink.svelte";

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



  export let running: boolean = false;

</script>
@@ -16,16 +17,13 @@
  }

</style>
- 
<Popover
- 
  popoverPositionTop="3rem"
- 
  popoverPositionRight="-13rem"
- 
  popoverPositionLeft="0">
+ 
<Popover popoverPositionTop="3rem" popoverPositionRight="0">

  <Button

    slot="toggle"

    let:toggle

    on:click={toggle}

    size="large"
- 
    variant={running ? "primary" : "outline"}>
+ 
    variant={running ? "primary" : "primary-outline"}>

    <IconSmall name="broadcasting" />

    {#if running}

      Syncing
@@ -34,31 +32,21 @@
    {/if}

  </Button>
- 
  <svelte:fragment slot="popover">
+ 
  <div slot="popover" style:width="18rem">

    {#if running}

      <div class="label">
- 
        Use the <a
- 
          target="_blank"
- 
          rel="noreferrer"
- 
          href="https://radicle.xyz/#try"
- 
          class="txt-link txt-bold">
- 
          Radicle CLI
- 
        </a>
+ 
        Use the
+ 
        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>

        to stop your node.

      </div>

      <Command command="rad node stop" fullWidth />

    {:else}

      <div class="label">
- 
        Use the <a
- 
          target="_blank"
- 
          rel="noreferrer"
- 
          href="https://radicle.xyz/#try"
- 
          class="txt-link txt-bold">
- 
          Radicle CLI
- 
        </a>
+ 
        Use the
+ 
        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>

        to start your node.

      </div>

      <Command command="rad node start" fullWidth />

    {/if}
- 
  </svelte:fragment>
+ 
  </div>

</Popover>
modified src/components/Button.svelte
@@ -8,6 +8,7 @@
    | "gray-white"

    | "none"

    | "outline"
+ 
    | "primary-outline"

    | "primary"

    | "secondary"

    | "tab" = "gray";
@@ -137,6 +138,21 @@
    color: var(--color-foreground-contrast);

  }
+ 
  .primary-outline {
+ 
    background-color: transparent;
+ 
    color: var(--color-foreground-contrast);
+ 
    border: 1px solid var(--color-border-hint);
+ 
  }
+ 
  .primary-outline[disabled] {
+ 
    background-color: transparent;
+ 
    color: var(--color-fill-gray);
+ 
  }
+ 
  .primary-outline:not([disabled]):hover {
+ 
    background-color: transparent;
+ 
    border: 1px solid var(--color-fill-primary);
+ 
    color: var(--color-foreground-contrast);
+ 
  }
+ 


  .primary {

    color: var(--color-fill-primary);

    background-color: var(--color-fill-merged);
@@ -207,6 +223,7 @@
  class:gray-white={variant === "gray-white"}

  class:none={variant === "none"}

  class:outline={variant === "outline"}
+ 
  class:primary-outline={variant === "primary-outline"}

  class:primary={variant === "primary"}

  class:secondary={variant === "secondary"}

  class:tab={variant === "tab"}>