Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add icons for issues and patches
Rūdolfs Ošiņš committed 3 years ago
commit 2563438874462c316da4d3b14afc7715c2e4c82d
parent 2b21390540a91eb93f9d13d3e204c86952d45e2e
6 files changed +125 -31
modified src/components/Icon.svelte
@@ -3,6 +3,7 @@


  export let name:

    | "browse"
+ 
    | "chat"

    | "checkmark"

    | "checkmark-small"

    | "chevron-down"
@@ -12,11 +13,13 @@
    | "clipboard"

    | "clipboard-small"

    | "ellipsis"
+ 
    | "exclamation"
+ 
    | "exclamation-circle"

    | "fork"

    | "gear"
- 
    | "chat"

    | "magnifying-glass"

    | "moon"
+ 
    | "patch"

    | "sun"

    | "twitter";

</script>
@@ -101,6 +104,42 @@
      10.6716 11.1716 10 12 10C12.8284 10 13.5 10.6716 13.5 11.5ZM20 11.5C20

      12.3284 19.3284 13 18.5 13C17.6716 13 17 12.3284 17 11.5C17 10.6716

      17.6716 10 18.5 10C19.3284 10 20 10.6716 20 11.5Z" />
+ 
  {:else if name === "exclamation"}
+ 
    <path
+ 
      fill-rule="evenodd"
+ 
      clip-rule="evenodd"
+ 
      d="M11.9999 4.5C10.7161 4.5 9.72723 5.63282 9.9007 6.90493L10.9954
+ 
      14.9324C11.0327 15.2061 10.8411 15.4581 10.5675 15.4954C10.2939 15.5327
+ 
      10.0418 15.3412 10.0045 15.0676L8.90987 7.04005C8.65453 5.16751 10.1101
+ 
      3.5 11.9999 3.5C13.8898 3.5 15.3454 5.1675 15.09 7.04005L13.9954
+ 
      15.0676C13.9581 15.3412 13.706 15.5327 13.4324 15.4954C13.1588 15.4581
+ 
      12.9672 15.2061 13.0045 14.9324L14.0992 6.90493C14.2727 5.63282 13.2838
+ 
      4.5 11.9999 4.5Z" />
+ 
    <path
+ 
      d="M14 19.5C14 20.6046 13.1046 21.5 12 21.5C10.8954 21.5 10 20.6046 10
+ 
      19.5C10 18.3954 10.8954 17.5 12 17.5C13.1046 17.5 14 18.3954 14 19.5Z" />
+ 
  {:else if name === "exclamation-circle"}
+ 
    <path
+ 
      fill-rule="evenodd"
+ 
      clip-rule="evenodd"
+ 
      d="M10.7778 8.90923C10.7778 8.90924 10.7778 8.90921 10.7778
+ 
      8.90923L11.495 13.9293C11.5341 14.2027 11.3441 14.4559 11.0708
+ 
      14.495C10.7974 14.534 10.5441 14.3441 10.5051 14.0707L9.78787
+ 
      9.05062C9.59567 7.70447 10.6401 6.5 12 6.5C13.3599 6.5 14.4044 7.70443
+ 
      14.2122 9.05057L13.495 14.0707C13.456 14.3441 13.2027 14.534 12.9293
+ 
      14.495C12.656 14.4559 12.466 14.2027 12.5051 13.9293L13.2223
+ 
      8.90923C13.3285 8.16541 12.7513 7.5 12 7.5C11.2488 7.5 10.6717 8.16543
+ 
      10.7778 8.90923Z" />
+ 
    <path
+ 
      fill-rule="evenodd"
+ 
      clip-rule="evenodd"
+ 
      d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12
+ 
      20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12
+ 
      3.5ZM2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5
+ 
      12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12Z" />
+ 
    <path
+ 
      d="M12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477
+ 
      16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z" />

  {:else if name === "chevron-down"}

    <path

      fill-rule="evenodd"
@@ -238,6 +277,29 @@
      12C12 15.0376 14.4624 17.5 17.5 17.5C17.9285 17.5 18.2548 17.7758 18.3915

      18.0903C18.5345 18.4195 18.5001 18.8928 18.0768 19.1638C16.7554 20.0097

      15.1842 20.5 13.5 20.5C8.80558 20.5 5 16.6944 5 12Z" />
+ 
  {:else if name === "patch"}
+ 
    <path
+ 
      fill-rule="evenodd"
+ 
      clip-rule="evenodd"
+ 
      d="M7 4.5C6.17157 4.5 5.5 5.17157 5.5 6C5.5 6.82843 6.17157 7.5 7
+ 
      7.5C7.82843 7.5 8.5 6.82843 8.5 6C8.5 5.17157 7.82843 4.5 7 4.5ZM4.5
+ 
      6C4.5 4.61929 5.61929 3.5 7 3.5C8.38071 3.5 9.5 4.61929 9.5 6C9.5 7.20948
+ 
      8.64112 8.21836 7.5 8.44999V15.55C8.64112 15.7816 9.5 16.7905 9.5 18C9.5
+ 
      19.3807 8.38071 20.5 7 20.5C5.61929 20.5 4.5 19.3807 4.5 18C4.5 16.7905
+ 
      5.35888 15.7816 6.5 15.55V8.44999C5.35888 8.21836 4.5 7.20948 4.5
+ 
      6ZM13.6464 5.64645C13.8417 5.45118 14.1583 5.45118 14.3536
+ 
      5.64645C14.5488 5.84171 14.5488 6.15829 14.3536 6.35355L12.2071 8.5L17
+ 
      8.5C17.8284 8.5 18.5 9.17157 18.5 10V15.55C19.6411 15.7816 20.5 16.7905
+ 
      20.5 18C20.5 19.3807 19.3807 20.5 18 20.5C16.6193 20.5 15.5 19.3807 15.5
+ 
      18C15.5 16.7905 16.3589 15.7816 17.5 15.55V10C17.5 9.72386 17.2761 9.5 17
+ 
      9.5L12.2071 9.5L14.3536 11.6464C14.5488 11.8417 14.5488 12.1583 14.3536
+ 
      12.3536C14.1583 12.5488 13.8417 12.5488 13.6464 12.3536L10.6464
+ 
      9.35355C10.4512 9.15829 10.4512 8.84171 10.6464 8.64645L13.6464
+ 
      5.64645ZM7 16.5C6.17157 16.5 5.5 17.1716 5.5 18C5.5 18.8284 6.17157 19.5
+ 
      7 19.5C7.82843 19.5 8.5 18.8284 8.5 18C8.5 17.1716 7.82843 16.5 7
+ 
      16.5ZM18 16.5C17.1716 16.5 16.5 17.1716 16.5 18C16.5 18.8284 17.1716 19.5
+ 
      18 19.5C18.8284 19.5 19.5 18.8284 19.5 18C19.5 17.1716 18.8284 16.5 18
+ 
      16.5Z" />

  {:else if name === "checkmark"}

    <path

      fill-rule="evenodd"
modified src/views/projects/Cob/CobHeader.svelte
@@ -29,6 +29,9 @@
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;

  }

  .subtitle {

    display: flex;
@@ -62,6 +65,7 @@
      <TextInput variant="form" placeholder="Title" bind:value={title} />

    {:else if title}

      <div class="title">
+ 
        <div><slot name="icon" /></div>

        <InlineMarkdown fontSize="medium" content={title} />

      </div>

    {:else}
modified src/views/projects/Issue.svelte
@@ -14,6 +14,7 @@
  import Button from "@app/components/Button.svelte";

  import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";

  import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";

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

  import TagInput from "./Cob/TagInput.svelte";

  import Textarea from "@app/components/Textarea.svelte";
@@ -200,6 +201,12 @@
  .comments {

    margin: 1rem 0;

  }
+ 
  .open {
+ 
    color: var(--color-positive-6);
+ 
  }
+ 
  .closed {
+ 
    color: var(--color-negative);
+ 
  }



  @media (max-width: 960px) {

    .issue {
@@ -220,6 +227,14 @@
      id={issue.id}

      title={issue.title}

      on:editTitle={editTitle}>
+ 
      <svelte:fragment slot="icon">
+ 
        <div
+ 
          class="state"
+ 
          class:closed={issue.state.status === "closed"}
+ 
          class:open={issue.state.status === "open"}>
+ 
          <Icon name="exclamation-circle" />
+ 
        </div>
+ 
      </svelte:fragment>

      <svelte:fragment slot="state">

        {#if issue.state.status === "open"}

          <Badge variant="positive">
modified src/views/projects/Issue/IssueTeaser.svelte
@@ -82,18 +82,13 @@
  .state {

    justify-self: center;

    align-self: center;
- 
    margin: 0 1.25rem;
- 
  }
- 
  .state-icon {
- 
    width: 0.5rem;
- 
    height: 0.5rem;
- 
    border-radius: var(--border-radius-small);
+ 
    margin: 0 1rem 0 1.25rem;

  }

  .open {
- 
    background-color: var(--color-positive);
+ 
    color: var(--color-positive);

  }

  .closed {
- 
    background-color: var(--color-negative);
+ 
    color: var(--color-negative);

  }



  @media (max-width: 960px) {
@@ -104,11 +99,11 @@
</style>



<div class="issue-teaser">
- 
  <div class="state">
- 
    <div
- 
      class="state-icon"
- 
      class:closed={issue.state.status === "closed"}
- 
      class:open={issue.state.status === "open"} />
+ 
  <div
+ 
    class="state"
+ 
    class:closed={issue.state.status === "closed"}
+ 
    class:open={issue.state.status === "open"}>
+ 
    <Icon name="exclamation-circle" />

  </div>

  <div>

    <div class="summary">
modified src/views/projects/Patch.svelte
@@ -55,6 +55,7 @@
  import Dropdown from "@app/components/Dropdown.svelte";

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

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

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

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

  import ProjectLink from "@app/components/ProjectLink.svelte";
@@ -215,6 +216,18 @@
    flex-wrap: nowrap;

    gap: 0.5rem;

  }
+ 
  .draft {
+ 
    color: var(--color-foreground-4);
+ 
  }
+ 
  .open {
+ 
    color: var(--color-positive-6);
+ 
  }
+ 
  .archived {
+ 
    color: var(--color-caution);
+ 
  }
+ 
  .merged {
+ 
    color: var(--color-primary);
+ 
  }



  @media (max-width: 1092px) {

    .patch {
@@ -235,6 +248,16 @@
<div class="patch">

  <div>

    <CobHeader id={patch.id} title={patch.title}>
+ 
      <svelte:fragment slot="icon">
+ 
        <div
+ 
          class="state"
+ 
          class:draft={patch.state.status === "draft"}
+ 
          class:open={patch.state.status === "open"}
+ 
          class:merged={patch.state.status === "merged"}
+ 
          class:archived={patch.state.status === "archived"}>
+ 
          <Icon name="patch" />
+ 
        </div>
+ 
      </svelte:fragment>

      <svelte:fragment slot="state">

        <Badge variant={badgeColor(patch.state.status)}>

          {patch.state.status}
modified src/views/projects/Patch/PatchTeaser.svelte
@@ -75,7 +75,7 @@
  .state {

    justify-self: center;

    align-self: center;
- 
    margin: 0 1.25rem;
+ 
    margin: 0 1rem 0 1.25rem;

  }

  .tags {

    display: flex;
@@ -86,22 +86,17 @@
    overflow: hidden;

    text-overflow: ellipsis;

  }
- 
  .state-icon {
- 
    width: 0.5rem;
- 
    height: 0.5rem;
- 
    border-radius: var(--border-radius-small);
- 
  }

  .draft {
- 
    background-color: var(--color-foreground-4);
+ 
    color: var(--color-foreground-4);

  }

  .open {
- 
    background-color: var(--color-positive);
+ 
    color: var(--color-positive);

  }

  .archived {
- 
    background-color: var(--color-caution);
+ 
    color: var(--color-caution);

  }

  .merged {
- 
    background-color: var(--color-primary);
+ 
    color: var(--color-primary);

  }

  @media (max-width: 960px) {

    .tags {
@@ -111,13 +106,13 @@
</style>



<div class="patch-teaser">
- 
  <div class="state">
- 
    <div
- 
      class="state-icon"
- 
      class:draft={patch.state.status === "draft"}
- 
      class:open={patch.state.status === "open"}
- 
      class:merged={patch.state.status === "merged"}
- 
      class:archived={patch.state.status === "archived"} />
+ 
  <div
+ 
    class="state"
+ 
    class:draft={patch.state.status === "draft"}
+ 
    class:open={patch.state.status === "open"}
+ 
    class:merged={patch.state.status === "merged"}
+ 
    class:archived={patch.state.status === "archived"}>
+ 
    <Icon name="patch" />

  </div>

  <div>

    <div class="summary">