Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract checkout patch button
Rūdolfs Ošiņš committed 1 year ago
commit 72bcf0eed2dd1cbbabeda517f5336055193fc709
parent 476f76ac0eda45c74f69ebbd6c904a830cc39785
3 files changed +57 -33
added src/components/CheckoutPatchButton.svelte
@@ -0,0 +1,48 @@
+ 
<script lang="ts">
+ 
  import { formatOid } from "@app/lib/utils";
+
+ 
  import Border from "@app/components/Border.svelte";
+ 
  import Button from "@app/components/Button.svelte";
+ 
  import Command from "@app/components/Command.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";
+
+ 
  interface Props {
+ 
    patchId: string;
+ 
    selectedRevisionId: string;
+ 
    tab: "patch" | "revisions" | "timeline";
+ 
  }
+
+ 
  const { patchId, selectedRevisionId, tab }: Props = $props();
+
+ 
  const checkoutCommand = $derived.by(() => {
+ 
    if (tab === "revisions" && selectedRevisionId !== patchId) {
+ 
      return `rad patch checkout ${formatOid(patchId)} --revision ${formatOid(selectedRevisionId)}`;
+ 
    } else {
+ 
      return `rad patch checkout ${formatOid(patchId)}`;
+ 
    }
+ 
  });
+ 
</script>
+
+ 
<Popover popoverPositionRight="0" popoverPositionTop="3rem">
+ 
  {#snippet toggle(onclick)}
+ 
    <Button styleHeight="2.5rem" variant="secondary" {onclick}>
+ 
      <Icon name="checkout" />Checkout patch<Icon name="chevron-down" />
+ 
    </Button>
+ 
  {/snippet}
+ 
  {#snippet popover()}
+ 
    <Border
+ 
      styleAlignItems="flex-start"
+ 
      styleBackgroundColor="var(--color-background-float)"
+ 
      styleFlexDirection="column"
+ 
      styleGap="0.5rem"
+ 
      stylePadding="1rem"
+ 
      styleWidth="max-content"
+ 
      variant="ghost">
+ 
      <span class="txt-small">
+ 
        To checkout this patch in your working copy, run:
+ 
      </span>
+ 
      <Command command={checkoutCommand} styleWidth="100%" />
+ 
    </Border>
+ 
  {/snippet}
+ 
</Popover>
modified src/components/Command.svelte
@@ -21,7 +21,7 @@
  }

</style>
- 
<div class="cmd txt-monospace" style:width={styleWidth}>
+ 
<div class="cmd txt-monospace txt-small" style:width={styleWidth}>

  <Border

    hoverable

    onclick={() => clipboard.copy()}
modified src/views/repo/Patch.svelte
@@ -17,6 +17,7 @@
  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,
@@ -28,8 +29,7 @@


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

  import Border from "@app/components/Border.svelte";
- 
  import Button from "@app/components/Button.svelte";
- 
  import Command from "@app/components/Command.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";
@@ -44,7 +44,7 @@
  import PatchStateButton from "@app/components/PatchStateButton.svelte";

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

  import PatchTimeline from "@app/components/PatchTimeline.svelte";
- 
  import Popover, { closeFocused } from "@app/components/Popover.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";
@@ -104,13 +104,6 @@
    more = patches.more;

  });
- 
  const checkoutCommand = $derived.by(() => {
- 
    if (tab === "revisions" && selectedRevision.id !== patch.id) {
- 
      return `rad patch checkout ${formatOid(patch.id)} --revision ${formatOid(selectedRevision.id)}`;
- 
    } else {
- 
      return `rad patch checkout ${formatOid(patch.id)}`;
- 
    }
- 
  });

  const project = $derived(repo.payloads["xyz.radicle.project"]!);



  async function updateTitle(newTitle: string) {
@@ -562,28 +555,11 @@
          allowedToEdit={true}

          title={patch.title}

          cobId={patch.id} />
- 
        <div class="txt-small" style:margin-left="auto" style:z-index="40">
- 
          <Popover popoverPositionRight="0" popoverPositionTop="3rem">
- 
            {#snippet toggle(onclick)}
- 
              <Button styleHeight="2.5rem" variant="secondary" {onclick}>
- 
                <Icon name="checkout" />Checkout patch<Icon
- 
                  name="chevron-down" />
- 
              </Button>
- 
            {/snippet}
- 
            {#snippet popover()}
- 
              <Border
- 
                styleAlignItems="flex-start"
- 
                styleBackgroundColor="var(--color-background-float)"
- 
                styleFlexDirection="column"
- 
                styleGap="0.5rem"
- 
                stylePadding="1rem"
- 
                styleWidth="max-content"
- 
                variant="ghost">
- 
                To checkout this patch in your working copy, run:
- 
                <Command command={checkoutCommand} styleWidth="100%" />
- 
              </Border>
- 
            {/snippet}
- 
          </Popover>
+ 
        <div style:margin-left="auto" style:z-index="40">
+ 
          <CheckoutPatchButton
+ 
            {tab}
+ 
            selectedRevisionId={selectedRevision.id}
+ 
            patchId={patch.id} />

        </div>

      </div>

      <Border variant="ghost" styleGap="0">