Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix HoverPopover positioning
Rūdolfs Ošiņš committed 2 years ago
commit 693f8991a0eece7476fdad82c361c0a3b9bdceb0
parent d86ff1952affe44f70f01b8c19acc414219799d2
2 files changed +33 -22
modified src/components/HoverPopover.svelte
@@ -3,7 +3,9 @@


  export let onShow: () => void = () => {};

  export let stylePopoverPositionLeft: string | undefined = undefined;
+ 
  export let stylePopoverPositionRight: string | undefined = undefined;

  export let stylePopoverPositionTop: string | undefined = undefined;
+ 
  export let stylePopoverPositionBottom: string | undefined = undefined;

  export let stylePopoverPadding: string | undefined = "1rem";



  let visible: boolean = false;
@@ -17,38 +19,44 @@
</script>



<style>
+ 
  .container {
+ 
    position: relative;
+ 
  }

  .popover {

    background: var(--color-background-float);

    border-radius: var(--border-radius-regular);

    border: 1px solid var(--color-border-hint);

    box-shadow: var(--elevation-low);
- 
    position: relative;
- 
    right: 1rem;
+ 
    position: absolute;

    z-index: 10;

  }

</style>
- 
<div
- 
  role="button"
- 
  tabindex="0"
- 
  on:mouseenter={() => setVisible(true)}
- 
  on:mouseleave={() => setVisible(false)}>
- 
  <slot name="toggle" />
+ 
<div class="container">
+ 
  <div
+ 
    role="button"
+ 
    tabindex="0"
+ 
    on:mouseenter={() => setVisible(true)}
+ 
    on:mouseleave={() => setVisible(false)}>
+ 
    <slot name="toggle" />
- 
  {#if visible}
- 
    <!-- If this component is used inside a button (see `NodeId`, for example)
+ 
    {#if visible}
+ 
      <!-- If this component is used inside a button (see `NodeId`, for example)

       we don’t want clicks in the popover to trigger button actions. So we

       stop propagation of click events. -->
- 
    <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
    <!-- svelte-ignore a11y-no-static-element-interactions -->
- 
    <div style:position="absolute" on:click|stopPropagation>
- 
      <div
- 
        class="popover"
- 
        style:padding={stylePopoverPadding}
- 
        style:left={stylePopoverPositionLeft}
- 
        style:top={stylePopoverPositionTop}>
- 
        <slot name="popover" />
+ 
      <!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
      <!-- svelte-ignore a11y-no-static-element-interactions -->
+ 
      <div style:position="absolute" on:click|stopPropagation>
+ 
        <div
+ 
          class="popover"
+ 
          style:padding={stylePopoverPadding}
+ 
          style:left={stylePopoverPositionLeft}
+ 
          style:right={stylePopoverPositionRight}
+ 
          style:bottom={stylePopoverPositionBottom}
+ 
          style:top={stylePopoverPositionTop}>
+ 
          <slot name="popover" />
+ 
        </div>

      </div>
- 
    </div>
- 
  {/if}
+ 
    {/if}
+ 
  </div>

</div>
modified src/components/Popover.svelte
@@ -37,6 +37,9 @@
</script>



<style>
+ 
  .container {
+ 
    position: relative;
+ 
  }

  .popover {

    background: var(--color-background-float);

    border-radius: var(--border-radius-regular);
@@ -50,7 +53,7 @@


<svelte:window on:click={clickOutside} on:touchstart={clickOutside} />
- 
<div bind:this={thisComponent} style:position="relative">
+ 
<div bind:this={thisComponent} class="container">

  <slot name="toggle" {expanded} {toggle} />



  {#if expanded}