Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Style issue and patch list views
Rūdolfs Ošiņš committed 1 year ago
commit 7f567e354a01bf6154954e045ce3e06756b41706
parent e103fa21fb0404a1f735c1a037c0ad93e4c20151
9 files changed +211 -71
modified public/index.css
@@ -126,4 +126,42 @@ body {
    2px calc(100% - 6px),

    0 calc(100% - 6px)

  );
+
+ 
  --3px-top-corner-fill: polygon(
+ 
    0 6px,
+ 
    2px 6px,
+ 
    2px 4px,
+ 
    4px 4px,
+ 
    4px 2px,
+ 
    6px 2px,
+ 
    6px 0,
+ 
    calc(100% - 6px) 0,
+ 
    calc(100% - 6px) 2px,
+ 
    calc(100% - 4px) 2px,
+ 
    calc(100% - 4px) 4px,
+ 
    calc(100% - 2px) 4px,
+ 
    calc(100% - 2px) 6px,
+ 
    100% 6px,
+ 
    100% 100%,
+ 
    0 100%
+ 
  );
+
+ 
  --3px-bottom-corner-fill: polygon(
+ 
    0 0,
+ 
    100% 0,
+ 
    100% calc(100% - 6px),
+ 
    calc(100% - 2px) calc(100% - 6px),
+ 
    calc(100% - 2px) calc(100% - 4px),
+ 
    calc(100% - 4px) calc(100% - 4px),
+ 
    calc(100% - 4px) calc(100% - 2px),
+ 
    calc(100% - 6px) calc(100% - 2px),
+ 
    calc(100% - 6px) 100%,
+ 
    6px 100%,
+ 
    6px calc(100% - 2px),
+ 
    4px calc(100% - 2px),
+ 
    4px calc(100% - 4px),
+ 
    2px calc(100% - 4px),
+ 
    2px calc(100% - 6px),
+ 
    0 calc(100% - 6px)
+ 
  );

}
modified public/typography.css
@@ -91,7 +91,8 @@ html {
   * otherwise Safari breaks. */

  font-size: 16px;

  font-weight: var(--font-weight-regular);
- 
  line-height: 1.5;
+ 
  /* On Safari this aligns text with different font-faces properly vertically. */
+ 
  line-height: 22px;

}



p {
modified src/components/Header.svelte
@@ -31,24 +31,7 @@
    z-index: -1;



    background-color: var(--color-background-float);
- 
    clip-path: polygon(
- 
      0 0,
- 
      100% 0,
- 
      100% calc(100% - 6px),
- 
      calc(100% - 2px) calc(100% - 6px),
- 
      calc(100% - 2px) calc(100% - 4px),
- 
      calc(100% - 4px) calc(100% - 4px),
- 
      calc(100% - 4px) calc(100% - 2px),
- 
      calc(100% - 6px) calc(100% - 2px),
- 
      calc(100% - 6px) 100%,
- 
      6px 100%,
- 
      6px calc(100% - 2px),
- 
      4px calc(100% - 2px),
- 
      4px calc(100% - 4px),
- 
      2px calc(100% - 4px),
- 
      2px calc(100% - 6px),
- 
      0 calc(100% - 6px)
- 
    );
+ 
    clip-path: var(--3px-bottom-corner-fill);

  }

  .breadcrumbs {

    gap: 0.5rem;
added src/components/IssueTeaser.svelte
@@ -0,0 +1,78 @@
+ 
<script lang="ts">
+ 
  import type { Issue } from "@bindings/Issue";
+
+ 
  import { formatOid } from "@app/lib/utils";
+
+ 
  import Icon from "./Icon.svelte";
+ 
  import NodeId from "./NodeId.svelte";
+
+ 
  export let issue: Issue;
+
+ 
  const statusColor: Record<Issue["state"]["status"], string> = {
+ 
    open: "var(--color-fill-success)",
+ 
    closed: "var(--color-foreground-red)",
+ 
  };
+ 
  const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
+ 
    open: "var(--color-fill-diff-green)",
+ 
    closed: "var(--color-fill-diff-red)",
+ 
  };
+ 
</script>
+
+ 
<style>
+ 
  .issue-teaser {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: space-between;
+ 
    gap: 0.25rem;
+ 
    height: 5rem;
+ 
    background-color: var(--color-background-float);
+ 
    padding: 1rem;
+ 
    cursor: pointer;
+ 
    font-size: var(--font-size-regular);
+ 
  }
+ 
  .issue-teaser:hover {
+ 
    background-color: var(--color-fill-float-hover);
+ 
  }
+ 
  .status {
+ 
    padding: 0;
+ 
    margin-right: 1rem;
+ 
  }
+ 
  .issue-teaser:first-of-type {
+ 
    clip-path: var(--3px-top-corner-fill);
+ 
  }
+ 
  .issue-teaser:last-of-type {
+ 
    clip-path: var(--3px-bottom-corner-fill);
+ 
  }
+ 
  .issue-teaser:only-of-type {
+ 
    clip-path: var(--3px-corner-fill);
+ 
  }
+ 
</style>
+
+ 
<div class="issue-teaser">
+ 
  <div class="global-flex">
+ 
    <div
+ 
      class="global-counter status"
+ 
      style:color={statusColor[issue.state.status]}
+ 
      style:background-color={statusBackgroundColor[issue.state.status]}>
+ 
      <Icon name="issue" />
+ 
    </div>
+ 
    <div
+ 
      class="global-flex"
+ 
      style:flex-direction="column"
+ 
      style:align-items="flex-start">
+ 
      {issue.title}
+ 
      <div class="global-flex txt-small">
+ 
        <NodeId
+ 
          nodeId={issue.author.did.replace("did:key:", "")}
+ 
          alias={issue.author.alias} />
+ 
        opened
+ 
        <div class="global-oid">{formatOid(issue.id)}</div>
+ 
      </div>
+ 
    </div>
+ 
  </div>
+ 
  <div class="global-flex">
+ 
    {#each issue.labels as label}
+ 
      <div class="global-counter txt-small">{label}</div>
+ 
    {/each}
+ 
  </div>
+ 
</div>
modified src/components/NodeId.svelte
@@ -15,7 +15,6 @@
    display: flex;

    align-items: center;

    gap: 0.375rem;
- 
    height: 1rem;

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

  }

  .no-alias {
added src/components/PatchTeaser.svelte
@@ -0,0 +1,83 @@
+ 
<script lang="ts">
+ 
  import type { Patch } from "@bindings/Patch";
+
+ 
  import { formatOid } from "@app/lib/utils";
+
+ 
  import Icon from "./Icon.svelte";
+ 
  import NodeId from "./NodeId.svelte";
+
+ 
  export let patch: Patch;
+
+ 
  const statusColor: Record<Patch["state"]["status"], string> = {
+ 
    draft: "var(--color-fill-gray)",
+ 
    open: "var(--color-fill-success)",
+ 
    archived: "var(--color-foreground-yellow)",
+ 
    merged: "var(--color-fill-primary)",
+ 
  };
+
+ 
  const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
+ 
    draft: "var(--color-fill-ghost)",
+ 
    open: "var(--color-fill-diff-green)",
+ 
    archived: "var(--color-fill-private)",
+ 
    merged: "var(--color-fill-delegate)",
+ 
  };
+ 
</script>
+
+ 
<style>
+ 
  .patch-teaser {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: space-between;
+ 
    gap: 0.25rem;
+ 
    height: 5rem;
+ 
    background-color: var(--color-background-float);
+ 
    padding: 1rem;
+ 
    cursor: pointer;
+ 
    font-size: var(--font-size-regular);
+ 
  }
+ 
  .patch-teaser:hover {
+ 
    background-color: var(--color-fill-float-hover);
+ 
  }
+ 
  .status {
+ 
    padding: 0;
+ 
    margin-right: 1rem;
+ 
  }
+ 
  .patch-teaser:first-of-type {
+ 
    clip-path: var(--3px-top-corner-fill);
+ 
  }
+ 
  .patch-teaser:last-of-type {
+ 
    clip-path: var(--3px-bottom-corner-fill);
+ 
  }
+ 
  .patch-teaser:only-of-type {
+ 
    clip-path: var(--3px-corner-fill);
+ 
  }
+ 
</style>
+
+ 
<div class="patch-teaser">
+ 
  <div class="global-flex">
+ 
    <div
+ 
      class="global-counter status"
+ 
      style:color={statusColor[patch.state.status]}
+ 
      style:background-color={statusBackgroundColor[patch.state.status]}>
+ 
      <Icon name="patch" />
+ 
    </div>
+ 
    <div
+ 
      class="global-flex"
+ 
      style:flex-direction="column"
+ 
      style:align-items="flex-start">
+ 
      {patch.title}
+ 
      <div class="global-flex txt-small">
+ 
        <NodeId
+ 
          nodeId={patch.author.did.replace("did:key:", "")}
+ 
          alias={patch.author.alias} />
+ 
        opened
+ 
        <div class="global-oid">{formatOid(patch.id)}</div>
+ 
      </div>
+ 
    </div>
+ 
  </div>
+ 
  <div class="global-flex">
+ 
    {#each patch.labels as label}
+ 
      <div class="global-counter txt-small">{label}</div>
+ 
    {/each}
+ 
  </div>
+ 
</div>
modified src/views/repo/Issues.svelte
@@ -4,11 +4,10 @@
  import type { IssueStatus } from "./router";

  import type { RepoInfo } from "@bindings/RepoInfo";
- 
  import { formatOid } from "@app/lib/utils";
- 


  import Layout from "./Layout.svelte";



  import Icon from "@app/components/Icon.svelte";
+ 
  import IssueTeaser from "@app/components/IssueTeaser.svelte";

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

  import NodeId from "@app/components/NodeId.svelte";
@@ -17,14 +16,6 @@
  export let config: Config;

  export let status: IssueStatus;
- 
  const statusColor: Record<Issue["state"]["status"], string> = {
- 
    open: "var(--color-fill-success)",
- 
    closed: "var(--color-foreground-red)",
- 
  };
- 
  const statusBackgroundColor: Record<Issue["state"]["status"], string> = {
- 
    open: "var(--color-fill-diff-green)",
- 
    closed: "var(--color-fill-diff-red)",
- 
  };

  $: project = repo.payloads["xyz.radicle.project"]!;

</script>
@@ -32,7 +23,8 @@
  .list {

    display: flex;

    flex-direction: column;
- 
    gap: 0.5rem;
+ 
    gap: 2px;
+ 
    padding: 0 1rem 1rem 1rem;

  }

</style>
@@ -106,17 +98,7 @@


  <div class="list">

    {#each issues as issue}
- 
      <div class="global-flex">
- 
        <div
- 
          class="global-counter"
- 
          style:padding="0"
- 
          style:color={statusColor[issue.state.status]}
- 
          style:background-color={statusBackgroundColor[issue.state.status]}>
- 
          <Icon name="issue" />
- 
        </div>
- 
        <div class="global-oid">{formatOid(issue.id)}</div>
- 
        {issue.title}
- 
      </div>
+ 
      <IssueTeaser {issue} />

    {/each}



    {#if issues.length === 0}
modified src/views/repo/Layout.svelte
@@ -29,7 +29,7 @@
  .sidebar {

    grid-column: 1 / 2;

    margin-left: 1rem;
- 
    margin-right: 1.5rem;
+ 
    margin-right: 0.5rem;

    min-width: 14rem;

  }
modified src/views/repo/Patches.svelte
@@ -4,33 +4,18 @@
  import type { PatchStatus } from "./router";

  import type { RepoInfo } from "@bindings/RepoInfo";
- 
  import { formatOid } from "@app/lib/utils";
- 


  import Layout from "./Layout.svelte";



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

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

  import NodeId from "@app/components/NodeId.svelte";
+ 
  import PatchTeaser from "@app/components/PatchTeaser.svelte";



  export let repo: RepoInfo;

  export let patches: Patch[];

  export let config: Config;

  export let status: PatchStatus;
- 
  const statusColor: Record<Patch["state"]["status"], string> = {
- 
    draft: "var(--color-fill-gray)",
- 
    open: "var(--color-fill-success)",
- 
    archived: "var(--color-foreground-yellow)",
- 
    merged: "var(--color-fill-primary)",
- 
  };
-
- 
  const statusBackgroundColor: Record<Patch["state"]["status"], string> = {
- 
    draft: "var(--color-fill-ghost)",
- 
    open: "var(--color-fill-diff-green)",
- 
    archived: "var(--color-fill-private)",
- 
    merged: "var(--color-fill-delegate)",
- 
  };
- 


  $: project = repo.payloads["xyz.radicle.project"]!;

</script>
@@ -38,7 +23,8 @@
  .list {

    display: flex;

    flex-direction: column;
- 
    gap: 0.5rem;
+ 
    gap: 2px;
+ 
    padding: 0 1rem 1rem 1rem;

  }

</style>
@@ -131,17 +117,7 @@


  <div class="list">

    {#each patches as patch}
- 
      <div class="global-flex">
- 
        <div
- 
          class="global-counter"
- 
          style:padding="0"
- 
          style:color={statusColor[patch.state.status]}
- 
          style:background-color={statusBackgroundColor[patch.state.status]}>
- 
          <Icon name="patch" />
- 
        </div>
- 
        <div class="global-oid">{formatOid(patch.id)}</div>
- 
        {patch.title}
- 
      </div>
+ 
      <PatchTeaser {patch} />

    {/each}



    {#if patches.length === 0}