Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract patch state filter button
Rūdolfs Ošiņš committed 1 year ago
commit c83fa99c9657383c2f73b7684fc296678fcee9ce
parent fca3753c64c7e6ba88ead9928a4bc05c0d7e12a6
2 files changed +84 -66
added src/components/PatchStateFilterButton.svelte
@@ -0,0 +1,77 @@
+ 
<script lang="ts">
+ 
  import type { PatchStatus } from "@app/views/repo/router";
+ 
  import type { ProjectPayloadMeta } from "@bindings/repo/ProjectPayloadMeta";
+
+ 
  import capitalize from "lodash/capitalize";
+
+ 
  import { patchStatusColor } from "@app/lib/utils";
+
+ 
  import { closeFocused } from "@app/components/Popover.svelte";
+
+ 
  import Border from "@app/components/Border.svelte";
+ 
  import DropdownList from "@app/components/DropdownList.svelte";
+ 
  import DropdownListItem from "@app/components/DropdownListItem.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import OutlineButton from "@app/components/OutlineButton.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";
+
+ 
  interface Props {
+ 
    counters: ProjectPayloadMeta["patches"];
+ 
    select: (filter: PatchStatus | undefined) => Promise<void>;
+ 
    status: PatchStatus | undefined;
+ 
  }
+
+ 
  const { status, select, counters }: Props = $props();
+ 
</script>
+
+ 
{#snippet iconSnippet(status: PatchStatus | undefined)}
+ 
  <div class="icon" style:color={status ? patchStatusColor[status] : undefined}>
+ 
    <Icon
+ 
      name={status === undefined || status === "open"
+ 
        ? "patch"
+ 
        : `patch-${status}`} />
+ 
  </div>
+ 
{/snippet}
+
+ 
{#snippet counterSnippet(status: PatchStatus | undefined)}
+ 
  <div style:margin-left="auto" style:padding-left="0.25rem">
+ 
    {#if status}
+ 
      {counters[status]}
+ 
    {:else}
+ 
      {counters.draft + counters.open + counters.archived + counters.merged}
+ 
    {/if}
+ 
  </div>
+ 
{/snippet}
+
+ 
<Popover popoverPositionLeft="0" popoverPositionTop="3rem">
+ 
  {#snippet toggle(onclick)}
+ 
    <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
+ 
      {@render iconSnippet(status)}
+ 
      {status ? capitalize(status) : "All"}
+ 
      {@render counterSnippet(status)}
+ 
      <Icon name="chevron-down" />
+ 
    </OutlineButton>
+ 
  {/snippet}
+
+ 
  {#snippet popover()}
+ 
    <Border variant="ghost">
+ 
      <DropdownList
+ 
        items={[undefined, "draft", "open", "archived", "merged"] as const}>
+ 
        {#snippet item(state)}
+ 
          <DropdownListItem
+ 
            styleGap="0.5rem"
+ 
            styleMinHeight="2.5rem"
+ 
            selected={status === state}
+ 
            onclick={async () => {
+ 
              await select(state);
+ 
              closeFocused();
+ 
            }}>
+ 
            {@render iconSnippet(state)}
+ 
            {state ? capitalize(state) : "All"}
+ 
            {@render counterSnippet(state)}
+ 
          </DropdownListItem>
+ 
        {/snippet}
+ 
      </DropdownList>
+ 
    </Border>
+ 
  {/snippet}
+ 
</Popover>
modified src/views/repo/Patch.svelte
@@ -10,14 +10,12 @@
  import type { Review } from "@bindings/cob/patch/Review";

  import type { Revision } from "@bindings/cob/patch/Revision";
- 
  import capitalize from "lodash/capitalize";

  import fuzzysort from "fuzzysort";



  import * as roles from "@app/lib/roles";

  import * as router from "@app/lib/router";

  import { DEFAULT_TAKE } from "./router";

  import { announce } from "@app/components/AnnounceSwitch.svelte";
- 
  import { closeFocused } from "@app/components/Popover.svelte";

  import {

    formatOid,

    patchStatusBackgroundColor,
@@ -31,8 +29,6 @@
  import Border from "@app/components/Border.svelte";

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

  import CopyableId from "@app/components/CopyableId.svelte";
- 
  import DropdownList from "@app/components/DropdownList.svelte";
- 
  import DropdownListItem from "@app/components/DropdownListItem.svelte";

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

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

  import LabelInput from "@app/components/LabelInput.svelte";
@@ -40,11 +36,10 @@
  import Link from "@app/components/Link.svelte";

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

  import NewPatchButton from "@app/components/NewPatchButton.svelte";
- 
  import OutlineButton from "@app/components/OutlineButton.svelte";

  import PatchStateButton from "@app/components/PatchStateButton.svelte";
+ 
  import PatchStateFilterButton from "@app/components/PatchStateFilterButton.svelte";

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

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

  import ReviewComponent from "@app/components/Review.svelte";

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

  import RevisionComponent from "@app/components/Revision.svelte";
@@ -327,28 +322,6 @@
  }

</style>
- 
{#snippet icons(status: PatchStatus | undefined)}
- 
  <div class="icon" style:color={status ? patchStatusColor[status] : undefined}>
- 
    <Icon
- 
      name={status === undefined || status === "open"
- 
        ? "patch"
- 
        : `patch-${status}`} />
- 
  </div>
- 
{/snippet}
-
- 
{#snippet counters(status: PatchStatus | undefined)}
- 
  <div style:margin-left="auto" style:padding-left="0.25rem">
- 
    {#if status}
- 
      {project.meta.patches[status]}
- 
    {:else}
- 
      {project.meta.patches.draft +
- 
        project.meta.patches.open +
- 
        project.meta.patches.archived +
- 
        project.meta.patches.merged}
- 
    {/if}
- 
  </div>
- 
{/snippet}
- 


<Layout {config} loadMoreSecondColumn={loadMoreTeasers}>

  {#snippet headerCenter()}

    <CopyableId id={patch.id} />
@@ -403,44 +376,12 @@
    </div>

    {#if showFilters}

      <div class="global-flex" style:margin="1rem 0">
- 
        <Popover popoverPositionLeft="0" popoverPositionTop="3rem">
- 
          {#snippet toggle(onclick)}
- 
            <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
- 
              {@render icons(status)}
- 
              {status ? capitalize(status) : "All"}
- 
              {@render counters(status)}
- 
              <Icon name="chevron-down" />
- 
            </OutlineButton>
- 
          {/snippet}
-
- 
          {#snippet popover()}
- 
            <Border variant="ghost">
- 
              <DropdownList
- 
                items={[
- 
                  undefined,
- 
                  "draft",
- 
                  "open",
- 
                  "archived",
- 
                  "merged",
- 
                ] as const}>
- 
                {#snippet item(state)}
- 
                  <DropdownListItem
- 
                    styleGap="0.5rem"
- 
                    styleMinHeight="2.5rem"
- 
                    selected={status === state}
- 
                    onclick={async () => {
- 
                      await loadPatches(state);
- 
                      closeFocused();
- 
                    }}>
- 
                    {@render icons(state)}
- 
                    {state ? capitalize(state) : "All"}
- 
                    {@render counters(state)}
- 
                  </DropdownListItem>
- 
                {/snippet}
- 
              </DropdownList>
- 
            </Border>
- 
          {/snippet}
- 
        </Popover>
+ 
        <PatchStateFilterButton
+ 
          counters={project.meta.patches}
+ 
          {status}
+ 
          select={async selectedState => {
+ 
            await loadPatches(selectedState);
+ 
          }} />

        {#if patchTeasers.length > 0}

          <TextInput

            onFocus={async () => {