Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Avoid nested button for `Popover`
Thomas Scholtes committed 2 years ago
commit b757e6269174d488dd50ae66d91397c3c23e74a8
parent bc64e90d7f14040afdc297ad4749aa9d85751eed
13 files changed +45 -25
modified src/App/Footer.svelte
@@ -61,7 +61,7 @@
      popoverPositionBottom="2rem"

      popoverPositionRight="0"

      popoverWidth="21rem">
- 
      <IconButton slot="toggle">
+ 
      <IconButton slot="toggle" let:toggle on:click={toggle}>

        <IconSmall name="brush" />

        Theme

      </IconButton>
modified src/App/Header/Connect.svelte
@@ -84,6 +84,8 @@
    popoverWidth="25rem">

    <Button

      slot="toggle"
+ 
      let:toggle
+ 
      on:click={toggle}

      title={buttonTitle[$httpdStore.state]}

      size="large"

      variant="outline">
modified src/components/Popover.svelte
@@ -8,7 +8,6 @@
</script>



<script lang="ts">
- 
  export let disabled = false;

  export let popoverBorderRadius: string | undefined = undefined;

  export let popoverPadding: string | undefined = undefined;

  export let popoverPositionBottom: string | undefined = undefined;
@@ -27,13 +26,11 @@
  }



  function toggle() {
- 
    if (!disabled) {
- 
      expanded = !expanded;
- 
      if ($focused === thisComponent) {
- 
        closeFocused();
- 
      } else {
- 
        focused.set(thisComponent);
- 
      }
+ 
    expanded = !expanded;
+ 
    if ($focused === thisComponent) {
+ 
      closeFocused();
+ 
    } else {
+ 
      focused.set(thisComponent);

    }

  }
@@ -55,15 +52,7 @@
<svelte:window on:click={clickOutside} on:touchstart={clickOutside} />



<div bind:this={thisComponent} style:position="relative">
- 
  <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
  <div
- 
    role="button"
- 
    tabindex="0"
- 
    on:click={toggle}
- 
    style:user-select="none"
- 
    style:cursor={disabled ? "not-allowed" : "pointer"}>
- 
    <slot name="toggle" {expanded} />
- 
  </div>
+ 
  <slot name="toggle" {expanded} {toggle} />



  {#if expanded}

    <div
modified src/components/ReactionSelector.svelte
@@ -43,7 +43,11 @@
  popoverPositionBottom="2rem"

  popoverPositionLeft="0"

  popoverPadding="0">
- 
  <IconButton slot="toggle" title="toggle-reaction-popover">
+ 
  <IconButton
+ 
    slot="toggle"
+ 
    let:toggle
+ 
    on:click={toggle}
+ 
    title="toggle-reaction-popover">

    <IconSmall name="face" />

  </IconButton>
modified src/views/projects/Cob/CobStateButton.svelte
@@ -54,6 +54,8 @@
    popoverBorderRadius="var(--border-radius-small)">

    <Button

      slot="toggle"
+ 
      let:toggle
+ 
      on:click={toggle}

      styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0"

      stylePadding="0 0.25rem"

      variant="gray-white"
modified src/views/projects/Cob/Revision.svelte
@@ -266,7 +266,11 @@
          popoverPositionTop="2.5rem"

          popoverPositionRight="0"

          popoverBorderRadius="var(--border-radius-small)">
- 
          <IconButton slot="toggle" title="toggle-context-menu">
+ 
          <IconButton
+ 
            slot="toggle"
+ 
            let:toggle
+ 
            on:click={toggle}
+ 
            title="toggle-context-menu">

            <IconSmall name="more" />

          </IconButton>

          <DropdownList
modified src/views/projects/Header/CloneButton.svelte
@@ -37,7 +37,12 @@
  popoverPositionTop="3rem"

  popoverPositionRight="0"

  popoverWidth="26rem">
- 
  <Button slot="toggle" size="large" variant="secondary">
+ 
  <Button
+ 
    slot="toggle"
+ 
    let:toggle
+ 
    on:click={toggle}
+ 
    size="large"
+ 
    variant="secondary">

    Clone

    <Icon name="download" />

  </Button>
modified src/views/projects/Header/TrackButton.svelte
@@ -36,6 +36,8 @@
  popoverWidth="33rem">

  <Button

    slot="toggle"
+ 
    let:toggle
+ 
    on:click={toggle}

    size="large"

    variant="outline"

    title="Tracked by {trackings} {pluralize('node', trackings)}">
modified src/views/projects/Issues.svelte
@@ -89,6 +89,8 @@
          <Button

            let:expanded

            slot="toggle"
+ 
            let:toggle
+ 
            on:click={toggle}

            ariaLabel="filter-dropdown"

            title="Filter issues by state">

            <div style:color={stateColor[state]}>
modified src/views/projects/Patch.svelte
@@ -692,13 +692,14 @@
          {#if view.name === "commits" || view.name === "changes"}

            <div style="margin-left: auto;">

              <Popover
- 
                disabled={patch.revisions.length === 1}

                popoverPadding="0"

                popoverPositionTop="2.5rem"

                popoverBorderRadius="var(--border-radius-small)">

                <Button

                  let:expanded

                  slot="toggle"
+ 
                  let:toggle
+ 
                  on:click={toggle}

                  size="regular"

                  disabled={patch.revisions.length === 1}>

                  <span
modified src/views/projects/Patches.svelte
@@ -95,6 +95,8 @@
          <Button

            let:expanded

            slot="toggle"
+ 
            let:toggle
+ 
            on:click={toggle}

            ariaLabel="filter-dropdown"

            title="Filter patches by state">

            <div style:color={stateColor[state]}>
modified src/views/projects/Source/BranchSelector.svelte
@@ -40,11 +40,12 @@
    <Popover

      popoverPadding="0"

      popoverPositionTop="2.5rem"
- 
      popoverBorderRadius="var(--border-radius-small)"
- 
      disabled={hideDropdown}>
+ 
      popoverBorderRadius="var(--border-radius-small)">

      <Button

        variant="outline"

        let:expanded
+ 
        let:toggle
+ 
        on:click={toggle}

        slot="toggle"

        styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"

        title="Change branch"
modified src/views/projects/Source/PeerSelector.svelte
@@ -44,7 +44,13 @@
  popoverPadding="0"

  popoverPositionTop="2.5rem"

  popoverBorderRadius="var(--border-radius-small)">
- 
  <Button let:expanded slot="toggle" title="Change peer" disabled={!peers}>
+ 
  <Button
+ 
    slot="toggle"
+ 
    let:expanded
+ 
    let:toggle
+ 
    on:click={toggle}
+ 
    title="Change peer"
+ 
    disabled={!peers}>

    {#if !selectedPeer}

      <IconSmall name="delegate" />

    {/if}