Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix showing Authorship and CommentComponent for review
Sebastian Martinez committed 2 years ago
commit 3465c92a7e9805682ad805d82105c224d68e4e67
parent 227424dbeb1a9ff4903a984a33a3be37be781455
3 files changed +95 -71
modified src/components/Comment.svelte
@@ -20,13 +20,11 @@
</script>



<style>
- 
  .comment {
- 
    display: flex;
- 
  }

  .card {
- 
    flex: 1;
+ 
    display: flex;
+ 
    flex-direction: column;

    border-radius: var(--border-radius);
- 
    background-color: var(--color-foreground-1);
+ 
    background-color: inherit;

  }

  .card-header {

    display: flex;
@@ -49,36 +47,34 @@
  }

</style>
- 
<div class="comment" {id}>
- 
  <div class="card">
- 
    <div class="card-header">
- 
      <Authorship {caption} {authorId} {authorAlias} {timestamp} />
- 
      <div class="actions">
- 
        {#if showReplyIcon}
- 
          <Button
- 
            variant="text"
- 
            size="tiny"
- 
            on:click={() => dispatch("toggleReply")}>
- 
            <div class="action">
- 
              <Icon name="chat" />
- 
              <span>reply</span>
- 
            </div>
- 
          </Button>
- 
        {/if}
- 
      </div>
- 
    </div>
- 
    <div class="card-body">
- 
      {#if action === "create"}
- 
        <Textarea
- 
          resizable
- 
          bind:value={body}
- 
          on:submit
- 
          placeholder="Leave a comment" />
- 
      {:else if body.trim() === ""}
- 
        <span class="txt-missing">No description.</span>
- 
      {:else}
- 
        <Markdown {rawPath} content={body} />
+ 
<div class="card" {id}>
+ 
  <div class="card-header">
+ 
    <Authorship {caption} {authorId} {authorAlias} {timestamp} />
+ 
    <div class="actions">
+ 
      {#if showReplyIcon}
+ 
        <Button
+ 
          variant="text"
+ 
          size="tiny"
+ 
          on:click={() => dispatch("toggleReply")}>
+ 
          <div class="action">
+ 
            <Icon name="chat" />
+ 
            <span>reply</span>
+ 
          </div>
+ 
        </Button>

      {/if}

    </div>

  </div>
+ 
  <div class="card-body">
+ 
    {#if action === "create"}
+ 
      <Textarea
+ 
        resizable
+ 
        bind:value={body}
+ 
        on:submit
+ 
        placeholder="Leave a comment" />
+ 
    {:else if body.trim() === ""}
+ 
      <span class="txt-missing">No description.</span>
+ 
    {:else}
+ 
      <Markdown {rawPath} content={body} />
+ 
    {/if}
+ 
  </div>

</div>
modified src/components/Thread.svelte
@@ -50,6 +50,10 @@
</script>



<style>
+ 
  .comment {
+ 
    background-color: var(--color-foreground-1);
+ 
    border-radius: var(--border-radius);
+ 
  }

  .reply {

    margin-left: 3rem;

    margin-top: 1rem;
@@ -62,7 +66,7 @@
  }

</style>
- 
<div style:margin-top="1rem">
+ 
<div class="comment" style:margin-top="1rem">

  <CommentComponent

    {rawPath}

    id={root.id}
@@ -74,7 +78,7 @@
    on:toggleReply={toggleReply} />

</div>

{#each replies as reply}
- 
  <div class="reply">
+ 
  <div class="comment reply">

    <CommentComponent

      {rawPath}

      id={reply.id}
modified src/views/projects/Cob/Revision.svelte
@@ -64,10 +64,12 @@
</script>



<style>
- 
  .action {
+ 
  .action-padding {
+ 
    padding: 0.5rem 1rem;
+ 
  }
+ 
  .action-background {

    background-color: var(--color-foreground-1);

    border-radius: var(--border-radius);
- 
    padding: 0.5rem 1rem;

  }

  .action-content {

    display: flex;
@@ -78,9 +80,19 @@
    color: var(--color-primary-6);

    background-color: var(--color-primary-3);

  }
+ 
  .review {
+ 
    background-color: var(--color-foreground-1);
+ 
    border-radius: var(--border-radius);
+ 
  }

  .positive-review {

    color: var(--color-positive-6);

    background-color: var(--color-positive-3);
+ 
    border-radius: var(--border-radius);
+ 
  }
+ 
  .negative-review {
+ 
    color: var(--color-negative-6);
+ 
    background-color: var(--color-negative-3);
+ 
    border-radius: var(--border-radius);

  }

  .revision {

    border: 1px solid var(--color-foreground-3);
@@ -224,21 +236,23 @@
              ? "opened this patch"

              : `updated to ${utils.formatObjectId(element.inner.id)}`}

          {#if element.inner.description}
- 
            <CommentComponent
- 
              {caption}
- 
              {authorId}
- 
              timestamp={element.timestamp}
- 
              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
- 
              body={element.inner.description} />
+ 
            <div class="action-background">
+ 
              <CommentComponent
+ 
                {caption}
+ 
                {authorId}
+ 
                timestamp={element.timestamp}
+ 
                rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+ 
                body={element.inner.description} />
+ 
            </div>

          {:else}
- 
            <div class="action txt-tiny">
+ 
            <div class="action-padding action-background txt-tiny">

              <Authorship {authorId} timestamp={element.timestamp}>

                {caption}

              </Authorship>

            </div>

          {/if}

          {#if response?.commits}
- 
            <div class="action txt-tiny">
+ 
            <div class="action-padding action-background txt-tiny">

              {#each response.commits as commit}

                <div class="commit-event">

                  <span>
@@ -269,7 +283,8 @@
            </div>

          {/if}

        {:else if element.type === "merge"}
- 
          <div class="action merge layout-desktop txt-tiny">
+ 
          <div
+ 
            class="action-padding action-background merge layout-desktop txt-tiny">

            <div class="action-content">

              <Authorship

                authorId={element.inner.node}
@@ -279,7 +294,8 @@
              </Authorship>

            </div>

          </div>
- 
          <div class="action merge layout-mobile txt-tiny">
+ 
          <div
+ 
            class="action-padding action-background merge layout-mobile txt-tiny">

            <div class="action-content">

              <Authorship authorId={element.inner.node}>

                merged
@@ -289,31 +305,39 @@
          </div>

        {:else if element.type === "review"}

          {@const [revisionId, author, review] = element.inner}
- 
          <div
- 
            class="action layout-desktop txt-tiny"
- 
            class:positive-review={element.inner[2].verdict === "accept"}>
- 
            <div class="action-content">
- 
              <Authorship authorId={author} timestamp={element.timestamp}>
- 
                {formatVerdict(revisionId, review.verdict)}
- 
              </Authorship>
+ 
          {#if review.comment}
+ 
            <div
+ 
              class="review"
+ 
              class:positive-review={element.inner[2].verdict === "accept"}
+ 
              class:negative-review={element.inner[2].verdict === "reject"}>
+ 
              <CommentComponent
+ 
                caption={formatVerdict(revisionId, review.verdict)}
+ 
                authorId={author}
+ 
                timestamp={review.timestamp}
+ 
                rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
+ 
                body={review.comment} />

            </div>
- 
          </div>
- 
          <div
- 
            class="layout-mobile txt-tiny"
- 
            class:positive-review={element.inner[2].verdict === "accept"}>
- 
            <div class="action-content">
- 
              <Authorship authorId={author}>
- 
                {formatVerdict(revisionId, review.verdict)}
- 
              </Authorship>
+ 
          {:else}
+ 
            <div
+ 
              class="action-padding action-background layout-desktop txt-tiny"
+ 
              class:positive-review={element.inner[2].verdict === "accept"}
+ 
              class:negative-review={element.inner[2].verdict === "reject"}>
+ 
              <div class="action-content">
+ 
                <Authorship authorId={author} timestamp={element.timestamp}>
+ 
                  {formatVerdict(revisionId, review.verdict)}
+ 
                </Authorship>
+ 
              </div>
+ 
            </div>
+ 
            <div
+ 
              class="layout-mobile txt-tiny"
+ 
              class:positive-review={element.inner[2].verdict === "accept"}
+ 
              class:negative-review={element.inner[2].verdict === "reject"}>
+ 
              <div class="action-content">
+ 
                <Authorship authorId={author}>
+ 
                  {formatVerdict(revisionId, review.verdict)}
+ 
                </Authorship>
+ 
              </div>

            </div>
- 
          </div>
- 
          {#if review.comment}
- 
            <CommentComponent
- 
              caption="left a comment"
- 
              authorId={author}
- 
              timestamp={review.timestamp}
- 
              rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
- 
              body={review.comment} />

          {/if}

        {/if}

      {/each}