Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › 783ac6b
Polish comment form footer
Brandon Oxendine committed 4 hours ago
commit 783ac6bf74c3f1ef20c9286b4e05a4150ea5c0d1
parent 8ef7b34
4 files changed +81 -69
modified src/components/Comment.svelte
@@ -221,6 +221,7 @@
        <div id={`edit-${id}`} style:width="100%">

          <ExtendedTextarea

            focus
+ 
            inline

            {body}

            {rid}

            {embeds}
modified src/components/ExtendedTextarea.svelte
@@ -284,14 +284,25 @@
    margin-left: auto;

    gap: 0.5rem;

  }
+ 
  .shortcut {
+ 
    opacity: 0.6;
+ 
    margin-left: 0.25rem;
+ 
  }



  .preview {

    width: 100%;

    font: var(--txt-body-m-regular);

    min-height: 109px;
- 
    margin-left: 1px;
- 
    margin-top: 1px;

    flex: 1;
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-canvas);
+ 
    padding: 0.75rem;
+ 
  }
+ 
  .inline .preview {
+ 
    border: 0;
+ 
    padding: 0;
+ 
    background-color: transparent;

  }

</style>
@@ -321,72 +332,72 @@
      {placeholder} />

  {/if}

  {@render belowTextarea?.()}
- 
  <div class="actions">
- 
    {#if !hideDiscard}
- 
      <Button
- 
        variant="outline"
- 
        disabled={submitInProgress}
- 
        onclick={() => {
- 
          preview = false;
- 
          close();
- 
        }}>
- 
        <Icon name="close" />
- 
        <span class="global-hide-on-small-desktop-down">Discard</span>
- 
      </Button>
- 
    {/if}
- 
    {#if !preview}
- 
      <div
- 
        style:display=""
- 
        class="txt-overflow txt-body-m-regular txt-missing"
- 
        title={`${attachEnabled ? "Drag and drop files to add them. " : ""}Markdown is supported. Press ${utils.modifierKey()}↵ to submit.`}>
- 
        {#if embedUploadError}
- 
          <span style:color="var(--color-feedback-error-text)">
- 
            <Icon
- 
              styleDisplay="inline"
- 
              styleVerticalAlign="text-top"
- 
              name="warning" />
- 
            {embedUploadError}
- 
          </span>
- 
        {:else if attachEnabled}
- 
          Drag and drop files to add them.
- 
        {/if}
- 
        <Icon
- 
          name="markdown"
- 
          styleDisplay="inline"
- 
          styleVerticalAlign="text-top" />
- 
        Markdown is supported. Press {utils.modifierKey()}↵ to submit.
- 
      </div>
- 
    {/if}
- 
    <div class="buttons">
- 
      {#if attachEnabled || attachDisabledReason}
+ 
  {#if !hideDiscard || body.trim() !== ""}
+ 
    <div class="actions">
+ 
      {#if !hideDiscard}

        <Button

          variant="outline"
- 
          onclick={selectFiles}
- 
          disabled={preview || attachDisabledReason !== undefined}
- 
          title={attachDisabledReason}>
- 
          <Icon name="attach" />
- 
          Attach
+ 
          disabled={submitInProgress}
+ 
          onclick={() => {
+ 
            preview = false;
+ 
            close();
+ 
          }}>
+ 
          <Icon name="close" />
+ 
          <span class="global-hide-on-small-desktop-down">Discard</span>

        </Button>

      {/if}
- 
      <Button variant="outline" onclick={() => (preview = !preview)}>
- 
        <Icon name={preview ? "edit" : "eye"} />
- 
        {preview ? "Edit" : "Preview"}
- 
      </Button>
- 
      <Button
- 
        variant={effectiveSubmitVariant}
- 
        title={emptyBodyTooltip}
- 
        disabled={!isValid() ||
- 
          submitInProgress ||
- 
          disableSubmit ||
- 
          (disallowEmptyBody && body.trim() === "")}
- 
        onclick={submitFn}>
- 
        <Icon name="checkmark" />
- 
        {#if submitInProgress}
- 
          Saving…
- 
        {:else}
- 
          {submitCaption}
+ 
      {#if !preview}
+ 
        <div
+ 
          style:display=""
+ 
          class="txt-overflow txt-body-m-regular txt-missing"
+ 
          title="Markdown is supported.">
+ 
          {#if embedUploadError}
+ 
            <span style:color="var(--color-feedback-error-text)">
+ 
              <Icon
+ 
                styleDisplay="inline"
+ 
                styleVerticalAlign="text-top"
+ 
                name="warning" />
+ 
              {embedUploadError}
+ 
            </span>
+ 
          {/if}
+ 
          <Icon
+ 
            name="markdown"
+ 
            styleDisplay="inline"
+ 
            styleVerticalAlign="text-top" />
+ 
          Markdown is supported.
+ 
        </div>
+ 
      {/if}
+ 
      <div class="buttons">
+ 
        {#if attachEnabled || attachDisabledReason}
+ 
          <Button
+ 
            variant="outline"
+ 
            onclick={selectFiles}
+ 
            disabled={preview || attachDisabledReason !== undefined}
+ 
            title={attachDisabledReason}>
+ 
            <Icon name="attach" />
+ 
            Attach
+ 
          </Button>

        {/if}
- 
      </Button>
+ 
        <Button variant="outline" onclick={() => (preview = !preview)}>
+ 
          <Icon name={preview ? "edit" : "eye"} />
+ 
          {preview ? "Edit" : "Preview"}
+ 
        </Button>
+ 
        <Button
+ 
          variant={effectiveSubmitVariant}
+ 
          title={emptyBodyTooltip}
+ 
          disabled={!isValid() ||
+ 
            submitInProgress ||
+ 
            disableSubmit ||
+ 
            (disallowEmptyBody && body.trim() === "")}
+ 
          onclick={submitFn}>
+ 
          {#if submitInProgress}
+ 
            Saving…
+ 
          {:else}
+ 
            {submitCaption}
+ 
            <span class="shortcut">{utils.modifierKey()}↵</span>
+ 
          {/if}
+ 
        </Button>
+ 
      </div>

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

</div>
modified src/components/Textarea.svelte
@@ -209,7 +209,7 @@
  </textarea>

  {#if draggingOver}

    <div class="txt-body-m-regular dragover">
- 
      Drop files to add them as embeds. Embeds are limited to 10Mb.
+ 
      Drop files to add them as embeds. Embeds are limited to 10MB.

    </div>

  {/if}

</div>
modified tests/e2e/repo/issue.spec.ts
@@ -41,7 +41,7 @@ test("creation of top level comments", async ({ page }) => {
    .fill(

      "It's important for us that the comment creation flow works as expected.",

    );
- 
  await page.getByRole("button", { name: "icon-checkmark" }).click();
+ 
  await page.getByRole("button", { name: /^Save/ }).click();

  await expect(

    page.getByText("Make sure that comment creation is working"),

  ).toBeVisible();
@@ -54,7 +54,7 @@ test("creation of top level comments", async ({ page }) => {
  await page

    .getByPlaceholder("Leave a comment")

    .fill("A top level comment by playwright");
- 
  await page.getByRole("button", { name: "icon-checkmark" }).click();
+ 
  await page.getByRole("button", { name: /^Comment/ }).click();

  await expect(

    page.getByText("A top level comment by playwright"),

  ).toBeVisible();
@@ -65,7 +65,7 @@ test("creation of top level comments", async ({ page }) => {
    .fill(

      "A top level comment by playwright created by replying to the issue body",

    );
- 
  await page.getByRole("button", { name: "icon-checkmark Reply" }).click();
+ 
  await page.getByRole("button", { name: /^Reply/ }).click();

  await expect(

    page.getByText(

      "A top level comment by playwright created by replying to the issue body",
@@ -76,7 +76,7 @@ test("creation of top level comments", async ({ page }) => {
  await page

    .getByPlaceholder("Reply to comment")

    .fill("A reply comment by playwright replying to the first comment");
- 
  await page.getByRole("button", { name: "icon-checkmark Reply" }).click();
+ 
  await page.getByRole("button", { name: /^Reply/ }).click();

  await expect(

    page.getByText(

      "A reply comment by playwright replying to the first comment",