Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract node status button
Rūdolfs Ošiņš committed 1 year ago
commit 476f76ac0eda45c74f69ebbd6c904a830cc39785
parent 052d3c5db33e24fe243ed21517274d12b0d152f4
2 files changed +46 -38
modified src/components/Header.svelte
@@ -9,15 +9,13 @@
  import useLocalStorage from "@app/lib/useLocalStorage.svelte";

  import { checkRadicleCLI } from "@app/lib/checkRadicleCLI.svelte";

  import { dynamicInterval } from "@app/lib/interval";
- 
  import { nodeRunning } from "@app/lib/events";

  import { setFocused } from "@app/components/Popover.svelte";



  import Avatar from "@app/components/Avatar.svelte";
- 
  import Border from "@app/components/Border.svelte";
- 
  import InfoButton from "@app/components/InfoButton.svelte";

  import Icon from "@app/components/Icon.svelte";
+ 
  import InfoButton from "@app/components/InfoButton.svelte";

  import NakedButton from "@app/components/NakedButton.svelte";
- 
  import Popover from "@app/components/Popover.svelte";
+ 
  import NodeStatusButton from "@app/components/NodeStatusButton.svelte";



  const activeRouteStore = router.activeRouteStore;
@@ -115,40 +113,7 @@


      <div class="global-flex">

        <InfoButton {config} />
- 
        <Popover
- 
          popoverPadding="0"
- 
          popoverPositionTop="2.5rem"
- 
          popoverPositionRight="0">
- 
          {#snippet toggle(onclick)}
- 
            <NakedButton variant="ghost" {onclick}>
- 
              {#if $nodeRunning}
- 
                <Icon name="online" />
- 
                Online
- 
              {:else}
- 
                <Icon name="offline" />
- 
                Offline
- 
              {/if}
- 
            </NakedButton>
- 
          {/snippet}
- 
          {#snippet popover()}
- 
            <Border
- 
              variant="ghost"
- 
              stylePadding="1rem"
- 
              styleMinWidth="20rem"
- 
              styleAlignItems="flex-start"
- 
              styleFlexDirection="column">
- 
              <div class="txt-small txt-missing">
- 
                {#if $nodeRunning}
- 
                  Your node is up and running, your changes will be synced
- 
                  automatically.
- 
                {:else}
- 
                  Your node is not running, changes you make are safe but won't
- 
                  be announced.
- 
                {/if}
- 
              </div>
- 
            </Border>
- 
          {/snippet}
- 
        </Popover>
+ 
        <NodeStatusButton />

        <NakedButton

          variant="ghost"

          stylePadding="0 4px"
added src/components/NodeStatusButton.svelte
@@ -0,0 +1,43 @@
+ 
<script lang="ts">
+ 
  import { nodeRunning } from "@app/lib/events";
+
+ 
  import Border from "@app/components/Border.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import NakedButton from "@app/components/NakedButton.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";
+ 
</script>
+
+ 
<Popover
+ 
  popoverPadding="0"
+ 
  popoverPositionTop="2.5rem"
+ 
  popoverPositionRight="0">
+ 
  {#snippet toggle(onclick)}
+ 
    <NakedButton variant="ghost" {onclick}>
+ 
      {#if $nodeRunning}
+ 
        <Icon name="online" />
+ 
        Online
+ 
      {:else}
+ 
        <Icon name="offline" />
+ 
        Offline
+ 
      {/if}
+ 
    </NakedButton>
+ 
  {/snippet}
+ 
  {#snippet popover()}
+ 
    <Border
+ 
      variant="ghost"
+ 
      stylePadding="1rem"
+ 
      styleMinWidth="20rem"
+ 
      styleAlignItems="flex-start"
+ 
      styleFlexDirection="column">
+ 
      <div class="txt-small txt-missing">
+ 
        {#if $nodeRunning}
+ 
          Your node is up and running, your changes will be synced
+ 
          automatically.
+ 
        {:else}
+ 
          Your node is not running, changes you make are safe but won't be
+ 
          announced.
+ 
        {/if}
+ 
      </div>
+ 
    </Border>
+ 
  {/snippet}
+ 
</Popover>