Various patch improvements

Signed-off-by: Alexis Sellier <self@cloudhead.io>
2026-10-30 16:50:47 +08:00 · 2022-08-01 15:51:12 +02:00
parent 78388e9fe2
commit 46176bd46b
11 changed files with 36 additions and 42 deletions
@@ -155,7 +155,7 @@ describe("Project view", () => {
    cy.get("header .summary .text-medium").should("have.text", "initial commit");
    cy.get("header pre.description").should("have.text", "this is the first commit of many");
    cy.get("header .committer").should("have.text", "dabit3");
-    cy.get("div.changeset-summary").should("have.text", "1 file(s) created, 1 file(s) deleted and 1 file(s) changed\n  with\n  0 addition(s)\n  and\n  0 deletion(s)");
+    cy.get("div.changeset-summary").should("have.text", "1 file(s) changed, 1 file(s) created, 1 file(s) deleted\n  with\n  0 addition(s)\n  and\n  0 deletion(s)");
    cy.get("header.file-header:nth-child(1) p.file-path")
      .first()
      .should("have.text", "test.md")
@@ -84,7 +84,11 @@
      <ReactionSelector on:select={selectReaction} />
    </div>
    <div class="card-body">
-      <Markdown content={comment.body} {getImage} />
+      {#if comment.body === ""}
+        <span class="subtle">No description.</span>
+      {:else}
+        <Markdown content={comment.body} {getImage} />
+      {/if}
      {#if comment.reactions.length > 0}
        <div class="reactions">
          <Reactions
@@ -26,21 +26,13 @@
    font-size: 0.875rem;
  }
  .issues-list {
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-medium);
    overflow: hidden;
  }
-
-  .teaser:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-  .teaser:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-  }
  .teaser:not(:last-child) {
    border-bottom: 1px dashed var(--color-background);
  }
+
  @media (max-width: 960px) {
    .issues {
      padding-left: 2rem;
@@ -87,10 +87,6 @@
  .flex {
    display: flex;
  }
-  main {
-    background-color: var(--color-foreground-background);
-    padding: 0 1rem;
-  }

  @media (max-width: 960px) {
    .patch {
@@ -122,12 +118,14 @@
      timestamp={patch.timestamp}
      caption="opened" />
  </header>
+
  <PatchTabBar
    {activeTab}
    {revisionNumber}
    revisions={patch.revisions}
    on:switchTab={onSwitch}
    on:revisionChanged={onRevisionChanged} />
+
  <main>
    {#if activeTab === PatchTab.Timeline}
      <div class="flex">
@@ -11,7 +11,6 @@
    border-radius: var(--border-radius-medium);
    font-size: 0.875rem;
    padding-left: 1rem;
-    margin: 1.5rem 0;
  }
  .metadata-section {
    margin-bottom: 1rem;
@@ -32,22 +32,27 @@

 <style>
  .bar {
-    background-color: var(--color-foreground-background);
-    padding: 1rem;
+    padding: 1rem 0;
    border-bottom: solid 1px var(--color-background);
  }
  .tabs {
    display: flex;
    flex-direction: row;
-    justify-content: space-between;
    align-items: center;
+  }
+  .tab {
    color: var(--color-foreground-80);
-    width: 21rem;
+    font-family: var(--font-family-monospace);
+    font-size: 0.75rem;
  }
  .tab:hover {
    color: var(--color-foreground);
    cursor: pointer;
  }
+  .separator {
+    color: var(--color-foreground-faded);
+    margin: 0 0.5rem;
+  }
  .active {
    color: var(--color-foreground);
    cursor: default !important;
@@ -72,13 +77,13 @@
      on:click={() => dispatch("switchTab", PatchTab.Timeline)}>
      Patch
    </div>
-    <div>|</div>
+    <span class="separator">&middot;</span>
    <div
      class="tab" class:active={activeTab === PatchTab.Diff}
      on:click={() => dispatch("switchTab", PatchTab.Diff)}>
      Changeset
    </div>
-    <div>|</div>
+    <span class="separator">&middot;</span>
    <div class="revision-toggle">
      <button
        class:tab={revisions.length > 1}
@@ -28,7 +28,6 @@
    display: flex;
    flex-direction: column;
    flex: 1;
-    margin: 1.5rem 0;
  }
  .replies {
    margin-left: 2rem;
@@ -48,7 +47,7 @@
            urn: element.inner.peer.person.urn,
            profile: element.inner.peer.person,
          }}
-          caption={`did merge to ${formatSeedId(element.inner.peer.id)}`}
+          caption={`merged to ${formatSeedId(element.inner.peer.id)}`}
          timestamp={element.timestamp}
          {config} />
      </div>
@@ -25,18 +25,14 @@
    padding: 0 2rem 0 8rem;
    font-size: 0.875rem;
  }
-
-  .teaser:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-  .teaser:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+  .patches-list {
+    border-radius: var(--border-radius-medium);
+    overflow: hidden;
  }
  .teaser:not(:last-child) {
    border-bottom: 1px dashed var(--color-background);
  }
+
  @media (max-width: 960px) {
    .patches {
      padding-left: 2rem;
@@ -16,6 +16,7 @@
      path: "/",
      revision: null,
      issue: null,
+      patch: null,
    });
  }
 </script>
@@ -7,17 +7,18 @@
  export let stats: DiffStats;

  const diffDescription = ({ modified, created, deleted }: Diff): string => {
-    let s = "";
+    let s = [];
+
+    if (modified.length) {
+      s.push(`${modified.length} file(s) changed`);
+    }
    if (created.length) {
-      s = s.concat(`${created.length} file(s) created`);
+      s.push(`${created.length} file(s) created`);
    }
    if (deleted.length) {
-      s = s.concat(`, ${deleted.length} file(s) deleted`);
+      s.push(`${deleted.length} file(s) deleted`);
    }
-    if (modified.length) {
-      s = s.concat(` and ${modified.length} file(s) changed`);
-    }
-    return s;
+    return s.join(", ");
  };
 </script>

@@ -35,7 +36,6 @@
  .diff-listing {
    /* This border forces to keep the FileDiff margin-bottom visible */
    border: 1px solid transparent;
-    margin: 0 1rem;
  }
 </style>

@@ -127,7 +127,7 @@
  }
  .file-header .diff-type {
    margin-left: 1rem;
-    padding: 0.25rem 0.5rem;
+    padding: 0rem 0.5rem;
    border-radius: var(--border-radius-medium);
  }
 </style>