Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › bbb78f3d
Add styling for patch diff stats
Open rudolfs opened 1 year ago

check

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +35 -1
2 files changed +35 -1 395c4695 → 25c80429
added src/components/DiffStatBadge.svelte
@@ -0,0 +1,33 @@
+ 
<script lang="ts">
+ 
  import type { Stats } from "@bindings/Stats";
+
+ 
  export let stats: Stats;
+ 
</script>
+
+ 
<style>
+ 
  .diff-stat-badge {
+ 
    display: flex;
+ 
    clip-path: var(--1px-corner-fill);
+ 
    height: 1.5rem;
+ 
  }
+
+ 
  .insertions {
+ 
    display: flex;
+ 
    padding: 0 0.5rem;
+ 
    align-items: center;
+ 
    color: var(--color-foreground-success);
+ 
    background-color: var(--color-fill-diff-green-light);
+ 
  }
+ 
  .deletions {
+ 
    display: flex;
+ 
    padding: 0 0.5rem;
+ 
    align-items: center;
+ 
    color: var(--color-foreground-red);
+ 
    background-color: var(--color-fill-diff-red-light);
+ 
  }
+ 
</style>
+
+ 
<div class="diff-stat-badge txt-mono txt-semibold txt-small">
+ 
  <div class="insertions">+{stats.insertions}</div>
+ 
  <div class="deletions">-{stats.deletions}</div>
+ 
</div>
modified src/components/PatchTeaser.svelte
@@ -5,6 +5,7 @@
  import { formatOid, formatTimestamp } from "@app/lib/utils";

  import { invoke } from "@tauri-apps/api/core";
+ 
  import DiffStatBadge from "./DiffStatBadge.svelte";

  import Icon from "./Icon.svelte";

  import InlineTitle from "./InlineTitle.svelte";

  import NodeId from "./NodeId.svelte";
@@ -82,7 +83,7 @@
  </div>

  <div class="global-flex">

    {#await invoke<Stats>( "diff", { rid, base: patch.base, head: patch.head }, ) then stats}
- 
      <div>{stats.insertions} / {stats.deletions}</div>
+ 
      <DiffStatBadge {stats} />

    {/await}

    {#each patch.labels as label}

      <div class="global-counter txt-small">{label}</div>