Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add 16x16 icons to project header
Rūdolfs Ošiņš committed 2 years ago
commit ccc854dac1757e48679495c6916c1e437c64779a
parent 28ea7724d372472db4dedd00b49f8939f73fb946
4 files changed +23 -15
modified src/components/Icon.svelte
@@ -1,6 +1,7 @@
<script lang="ts">

  import { unreachable } from "@app/lib/utils";
+ 
  export let size: "small" | "regular" = "regular";

  export let name:

    | "browse"

    | "chat"
@@ -37,8 +38,8 @@
<svg

  role="img"

  on:click
- 
  height="24"
- 
  width="24"
+ 
  height={size === "regular" ? "24" : "16"}
+ 
  width={size === "regular" ? "24" : "16"}

  fill="currentColor"

  viewBox="0 0 24 24">

  {#if name === "browse"}
modified src/components/SquareButton.svelte
@@ -1,9 +1,10 @@
<script lang="ts" strictEvents>

  export let active: boolean = false;
- 
  export let hoverable: boolean = true;

  export let clickable: boolean = false;

  export let disabled: boolean = false;
+ 
  export let hoverable: boolean = true;

  export let size: "small" | "regular" = "regular";
+ 
  export let title: string | undefined = undefined;

</script>



<style>
@@ -19,6 +20,7 @@
    font-family: var(--font-family-monospace);

    font-size: var(--font-size-tiny);

    white-space: nowrap;
+ 
    gap: 0.5rem;

  }



  .small {
@@ -62,6 +64,7 @@


<!-- svelte-ignore a11y-click-events-have-key-events -->

<div
+ 
  {title}

  on:click

  class="square-button"

  class:active
@@ -69,7 +72,8 @@
  class:disabled

  class:small={size === "small"}

  class:clickable>
- 
  <span>
+ 
  <slot name="icon" />
+ 
  <div style:display="block">

    <slot />
- 
  </span>
+ 
  </div>

</div>
modified src/views/projects/Header.svelte
@@ -47,11 +47,6 @@
      margin-bottom: 1.5rem;

    }

  }
- 
  .trackings {
- 
    display: flex;
- 
    align-items: center;
- 
    gap: 0.2rem;
- 
  }

</style>



<div class="header">
@@ -84,6 +79,9 @@
    <SquareButton

      active={activeRoute.params.view.resource === "issues" ||

        activeRoute.params.view.resource === "issue"}>
+ 
      <svelte:fragment slot="icon">
+ 
        <Icon size="small" name="exclamation-circle" />
+ 
      </svelte:fragment>

      <span class="txt-bold">{openIssueCount}</span>

      {pluralize("issue", openIssueCount)}

    </SquareButton>
@@ -103,6 +101,9 @@
    <SquareButton

      active={activeRoute.params.view.resource === "patches" ||

        activeRoute.params.view.resource === "patch"}>
+ 
      <svelte:fragment slot="icon">
+ 
        <Icon size="small" name="patch" />
+ 
      </svelte:fragment>

      <span class="txt-bold">{openPatchCount}</span>

      {pluralize("patch", openPatchCount)}

    </SquareButton>
@@ -124,9 +125,11 @@
      {isLocal(baseUrl.hostname) ? "radicle.local" : baseUrl.hostname}

    </SquareButton>

  </Link>
- 
  <SquareButton hoverable={false}>
- 
    <span class="trackings" title="Tracked by {trackings} nodes">
- 
      <Icon name="network" />{trackings} nodes
- 
    </span>
+ 
  <SquareButton hoverable={false} title="Tracked by {trackings} nodes">
+ 
    <svelte:fragment slot="icon">
+ 
      <Icon size="small" name="network" />
+ 
    </svelte:fragment>
+ 
    <span class="txt-bold">{trackings}</span>
+ 
    nodes

  </SquareButton>

</div>
modified src/views/projects/PeerSelector.svelte
@@ -73,7 +73,7 @@
  <div slot="toggle" class="selector" title="Change peer">

    <div class="stat peer" class:selected={peer} class:not-allowed={!peers}>

      {#if !peer}
- 
        <Icon name="fork" />
+ 
        <Icon size="small" name="fork" />

      {/if}

      {#if meta}

        <span class="avatar-id">