Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Change ScopePolicy and httpd tooltip from hover to clickable tooltip
Sebastian Martinez committed 2 years ago
commit 89ea5f904f85f3bf6712eec193f46448dbc90698
parent 87e3c2b5c7ae1e72bb0ecbbd4455af80571f73b9
4 files changed +24 -25
modified src/views/home/Index.svelte
@@ -19,14 +19,15 @@
  import AppLayout from "@app/App/AppLayout.svelte";

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

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

  import FilterButton from "./components/FilterButton.svelte";

  import HomepageSection from "./components/HomepageSection.svelte";
- 
  import HoverPopover from "@app/components/HoverPopover.svelte";

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

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

  import PreferredSeedDropdown from "./components/PreferredSeedDropdown.svelte";
- 
  import Command from "@app/components/Command.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";



  const selectedSeed = deduplicateStore(

    derived(preferredSeeds, $ => $?.selected),
@@ -208,12 +209,15 @@
        Pinned projects on your selected seed node

        {#if !nodeId}

          <div class="global-hide-on-mobile">
- 
            <HoverPopover stylePopoverPositionTop="0.5rem">
- 
              <div slot="toggle">
+ 
            <Popover
+ 
              popoverPositionTop="1.5rem"
+ 
              popoverPositionLeft="0"
+ 
              popoverPositionRight="-15rem">
+ 
              <IconButton slot="toggle" let:toggle on:click={toggle}>

                <span style:color="var(--color-fill-gray)">

                  <IconSmall name="info" />

                </span>
- 
              </div>
+ 
              </IconButton>



              <div slot="popover" class="popover txt-small">

                <div style:padding-bottom="0.5rem">
@@ -221,7 +225,7 @@
                </div>

                <Command command="radicle-httpd" />

              </div>
- 
            </HoverPopover>
+ 
            </Popover>

          </div>

        {/if}

      </svelte:fragment>
modified src/views/home/components/HomepageSection.svelte
@@ -23,7 +23,7 @@


  .subtitle {

    display: flex;
- 
    gap: 0.5rem;
+ 
    gap: 0.25rem;

    align-items: center;

    margin-top: 0.25rem;

    color: var(--color-foreground-dim);
modified src/views/nodes/ScopePolicyPopover.svelte
@@ -3,14 +3,15 @@


  import capitalize from "lodash/capitalize";
- 
  import HoverPopover from "@app/components/HoverPopover.svelte";

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

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



  export let policy: Policy;

  export let scope: Scope;
- 
  export let stylePopoverPositionRight: string | undefined = undefined;
- 
  export let stylePopoverPositionLeft: string | undefined = undefined;
+ 
  export let popoverPositionRight: string | undefined = undefined;
+ 
  export let popoverPositionLeft: string | undefined = undefined;

</script>



<style>
@@ -43,19 +44,19 @@
    <span class="txt-semibold">{capitalize(scope)}</span>

  </span>

  <span style:color="var(--color-fill-gray)">
- 
    <HoverPopover
- 
      {stylePopoverPositionRight}
- 
      {stylePopoverPositionLeft}
- 
      stylePopoverPositionBottom="1.5rem">
- 
      <div slot="toggle">
+ 
    <Popover
+ 
      {popoverPositionRight}
+ 
      {popoverPositionLeft}
+ 
      popoverPositionBottom="1.5rem">
+ 
      <IconButton slot="toggle" let:toggle on:click={toggle}>

        <span style:color="var(--color-fill-gray)">

          <IconSmall name="info" />

        </span>
- 
      </div>
+ 
      </IconButton>



      <div slot="popover" class="popover">

        <ScopePolicyExplainer {scope} {policy} />

      </div>
- 
    </HoverPopover>
+ 
    </Popover>

  </span>

</div>
modified src/views/nodes/View.svelte
@@ -150,19 +150,13 @@
        </div>

        <div class="global-hide-on-mobile" style:margin-left="auto">

          {#if policy && scope}
- 
            <ScopePolicyPopover
- 
              {scope}
- 
              {policy}
- 
              stylePopoverPositionRight="-1rem" />
+ 
            <ScopePolicyPopover {scope} {policy} popoverPositionRight="0" />

          {/if}

        </div>

      </div>

      <div class="subtitle global-hide-on-desktop">

        {#if policy && scope}
- 
          <ScopePolicyPopover
- 
            {scope}
- 
            {policy}
- 
            stylePopoverPositionLeft="-14rem" />
+ 
          <ScopePolicyPopover {scope} {policy} popoverPositionLeft="-5.5rem" />

        {/if}

      </div>