Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › fc5eb115
Design Polish II
Merged did:key:z6MkfgZK...5YMm opened 2 years ago

Improve edit buttons on issue and patch Switch Seed and Clone buttons

check check-visual check-unit-test check-httpd-api-unit-test check-e2e check-build

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

Activity Changes +43 -33
9 files changed +43 -33 04999a1e → d883a0f3
modified public/colors.css
@@ -29,6 +29,7 @@
  --color-border-success: #97ceb0;

  --color-fill-secondary: #7070ff;

  --color-fill-secondary-hover: #8585ff;
+ 
  --color-fill-secondary-counter: #7a7aff;

  --color-fill-ghost: #ebebff;

  --color-fill-ghost-hover: #f5f5ff;

  --color-fill-separator: #dbdbff;
@@ -85,6 +86,7 @@
  --color-border-success: #2a5a40;

  --color-fill-secondary: #7070ff;

  --color-fill-secondary-hover: #8585ff;
+ 
  --color-fill-secondary-counter: #7a7aff;

  --color-fill-ghost: #24252d;

  --color-fill-ghost-hover: #2e2f38;

  --color-fill-separator: #24252d;
modified src/components/Button.svelte
@@ -153,7 +153,7 @@


  .outline {

    background-color: transparent;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-foreground-contrast);

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

  }

  .outline[disabled] {
@@ -196,27 +196,25 @@
  }



  .secondary-toggle-off {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-contrast);
- 
    border: 1px solid var(--color-border-hint);
+ 
    background-color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-match-background);

  }

  .secondary-toggle-off[disabled] {
- 
    background-color: transparent;
- 
    color: var(--color-fill-gray);
+ 
    background-color: var(--color-fill-ghost);
+ 
    color: var(--color-foreground-disabled);

  }

  .secondary-toggle-off:not([disabled]):hover {
- 
    background-color: transparent;
- 
    border: 1px solid var(--color-fill-secondary);
+ 
    background-color: var(--color-fill-secondary-hover);

  }
- 


  .secondary-toggle-on {

    background-color: var(--color-fill-selected);

    color: var(--color-foreground-emphasized);

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

  }

  .secondary-toggle-on[disabled] {
- 
    background-color: var(--color-fill-selected);
+ 
    background-color: var(--color-fill-ghost);

    color: var(--color-fill-gray);
+ 
    border: none;

  }

  .secondary-toggle-on:not([disabled]):hover {

    background-color: var(--color-fill-selected);
modified src/views/projects/Header/CloneButton.svelte
@@ -35,7 +35,7 @@
</style>



<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
- 
  <Button slot="toggle" let:toggle on:click={toggle} variant="secondary">
+ 
  <Button slot="toggle" let:toggle on:click={toggle} variant="outline">

    Clone

    <Icon name="download" />

  </Button>
modified src/views/projects/Header/SeedButton.svelte
@@ -33,14 +33,19 @@
  .counter {

    font-weight: var(--font-weight-regular);

    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    background-color: var(--color-fill-secondary-counter);
+ 
    border: 1px solid var(--color-border-secondary-counter);
+ 
    color: var(--color-foreground-match-background);

    padding: 0 0.25rem;

  }

  .seeding {

    background-color: var(--color-fill-counter-emphasized);

    color: var(--color-foreground-emphasized);

  }
+ 
  .disabled {
+ 
    background-color: var(--color-fill-ghost-hover);
+ 
    color: var(--color-foreground-dim);
+ 
  }

</style>



<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
@@ -62,6 +67,7 @@
      <span

        class="counter"

        class:seeding
+ 
        class:disabled

        style:font-weight="var(--font-weight-regular)">

        {seedCount}

      </span>
modified src/views/projects/Issue.svelte
@@ -30,7 +30,7 @@
  import Embeds from "@app/views/projects/Cob/Embeds.svelte";

  import ErrorModal from "@app/modals/ErrorModal.svelte";

  import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
- 
  import IconButton from "@app/components/IconButton.svelte";
+ 
  import Button from "@app/components/Button.svelte";

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

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

  import LabelInput from "./Cob/LabelInput.svelte";
@@ -495,15 +495,17 @@
                  content={issue.title} />

              </div>

            {/if}
+ 
          </div>
+ 
          <div style="display: flex; gap: 0.5rem;">

            {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id) && issueState === "read"}
- 
              <IconButton
+ 
              <Button
+ 
                variant="outline"

                title="edit issue"

                on:click={() => (issueState = "edit")}>

                <IconSmall name={"edit"} />
- 
              </IconButton>
+ 
                Edit
+ 
              </Button>

            {/if}
- 
          </div>
- 
          <div style="display: flex; gap: 1rem;">

            <Share {preferredSeeds} {publicExplorer} {baseUrl} />

            {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}

              <CobStateButton
modified src/views/projects/Patch.svelte
@@ -65,7 +65,6 @@
  import Embeds from "@app/views/projects/Cob/Embeds.svelte";

  import ErrorModal from "@app/modals/ErrorModal.svelte";

  import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
- 
  import IconButton from "@app/components/IconButton.svelte";

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

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

  import LabelInput from "@app/views/projects/Cob/LabelInput.svelte";
@@ -717,7 +716,8 @@
    <div class="main">

      <CobHeader>

        <svelte:fragment slot="title">
- 
          <div style="display: flex; gap: 1rem; width: 100%;">
+ 
          <div
+ 
            style="display: flex; align-items: center; gap: 1rem; width: 100%;">

            {#if patchState !== "read"}

              <TextInput

                placeholder="Title"
@@ -733,14 +733,16 @@
                  content={patch.title} />

              </div>

            {/if}
- 
            {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id) && patchState === "read"}
- 
              <IconButton
- 
                title="edit patch"
- 
                on:click={() => (patchState = "edit")}>
- 
                <IconSmall name={"edit"} />
- 
              </IconButton>
- 
            {/if}

          </div>
+ 
          {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id) && patchState === "read"}
+ 
            <Button
+ 
              variant="outline"
+ 
              title="edit patch"
+ 
              on:click={() => (patchState = "edit")}>
+ 
              <IconSmall name={"edit"} />
+ 
              Edit
+ 
            </Button>
+ 
          {/if}

          <Share {preferredSeeds} {publicExplorer} {baseUrl} />

          {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}

            <CobStateButton
modified src/views/projects/Source/ProjectNameHeader.svelte
@@ -128,13 +128,13 @@
      class="global-hide-on-mobile"

      style="margin-left: auto; display: flex; gap: 0.5rem;">

      <Share {preferredSeeds} {publicExplorer} {baseUrl} />
+ 
      <CloneButton {baseUrl} id={project.id} name={project.name} />

      <SeedButton

        {seeding}

        disabled={editSeedingInProgress}

        editSeeding={canEditSeeding ? editSeeding : undefined}

        seedCount={project.seeding}

        projectId={project.id} />
- 
      <CloneButton {baseUrl} id={project.id} name={project.name} />

    </div>

  </div>

  <div class="id">
modified tests/e2e/project/issue.spec.ts
@@ -74,7 +74,7 @@ test("edit issue", async ({ page, authenticatedPeer }) => {
  ).toBeVisible();

  await expect(page.getByPlaceholder("Leave a description")).toBeHidden();
- 
  await page.getByRole("button", { name: "edit issue" }).click();
+ 
  await page.getByRole("button", { name: "Edit" }).click();

  await page

    .getByPlaceholder("Title")

    .fill("This is a modified issue title to be dismissed");
@@ -89,7 +89,7 @@ test("edit issue", async ({ page, authenticatedPeer }) => {
    page.getByText("We'll give it a description and edit it."),

  ).toBeVisible();
- 
  await page.getByRole("button", { name: "edit issue" }).click();
+ 
  await page.getByRole("button", { name: "Edit" }).click();

  await page.getByPlaceholder("Title").fill("This is a modified issue title");

  await page

    .getByPlaceholder("Leave a description")
@@ -180,7 +180,7 @@ test("handling embeds", async ({ page, authenticatedPeer }) => {
    page.locator(".badge").filter({ hasText: "radicle-228x228.png" }),

  ).toBeVisible();
- 
  await page.getByRole("button", { name: "edit issue" }).click();
+ 
  await page.getByRole("button", { name: "Edit" }).click();

  await page

    .getByPlaceholder("Leave a description")

    .fill(
modified tests/e2e/project/patch.spec.ts
@@ -198,7 +198,7 @@ test("edit patch", async ({ page, authenticatedPeer }) => {
  await expect(page.getByPlaceholder("Title")).toBeHidden();

  await expect(page.getByPlaceholder("Leave a description")).toBeHidden();
- 
  await page.getByRole("button", { name: "edit patch" }).click();
+ 
  await page.getByRole("button", { name: "Edit", exact: true }).click();

  await page

    .getByPlaceholder("Title")

    .fill("This is a modified patch title to be dismissed");
@@ -209,7 +209,7 @@ test("edit patch", async ({ page, authenticatedPeer }) => {
  await expect(titleLocator).toBeVisible();

  await expect(descriptionLocator).toBeVisible();
- 
  await page.getByRole("button", { name: "edit patch" }).click();
+ 
  await page.getByRole("button", { name: "Edit", exact: true }).click();

  await page.getByPlaceholder("Title").fill("This is a modified patch title");

  await page

    .getByPlaceholder("Leave a description")