Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Refactor project header widgets into own component
Sebastian Martinez committed 3 years ago
commit 178d6230cbc0b49c63c93d3327dc9514e6b39c18
parent b74d350569d5128e1a466cb8efcfcbd9a1132bac
2 files changed +72 -31
modified src/base/projects/Header.svelte
@@ -8,6 +8,7 @@
  import CloneButton from "@app/base/projects/CloneButton.svelte";

  import PeerSelector from "@app/base/projects/PeerSelector.svelte";

  import { closeFocused } from "@app/Floating.svelte";
+ 
  import Stat from "@app/base/projects/Stat.svelte";



  export let activeRoute: ProjectRoute;

  export let project: Project;
@@ -75,12 +76,6 @@
    border-radius: var(--border-radius-small);

    min-width: max-content;

  }
- 
  .clickable {
- 
    cursor: pointer;
- 
  }
- 
  .clickable:hover {
- 
    background-color: var(--color-foreground-2);
- 
  }

  .not-allowed {

    cursor: not-allowed;

  }
@@ -128,49 +123,43 @@
  {/if}

  <span>

    {#if seed.api.host}
- 
      <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
      <div
- 
        class="stat seed clickable widget"
+ 
      <Stat
+ 
        clickable

        title="Project data is fetched from this seed"

        on:click={goToSeed}>

        <span>{seed.api.host}</span>
- 
      </div>
+ 
      </Stat>

    {/if}

  </span>
- 
  <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
  <div
- 
    class="stat commit-count clickable widget"
- 
    class:active={activeRoute.params.view.resource === "history"}
+ 
  <Stat
+ 
    clickable
+ 
    active={activeRoute.params.view.resource === "history"}

    on:click={() => toggleContent("history", true)}>

    <span class="txt-bold">{tree.stats.commits}</span>

    commit(s)
- 
  </div>
+ 
  </Stat>

  {#if project.issues}
- 
    <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
    <div
- 
      class="stat issue-count clickable widget"
- 
      class:active={activeRoute.params.view.resource === "issues"}
- 
      class:not-allowed={project.issues === 0}
- 
      class:clickable={project.issues > 0}
+ 
    <Stat
+ 
      active={activeRoute.params.view.resource === "issues"}
+ 
      notAllowed={project.issues === 0}
+ 
      clickable={project.issues > 0}

      on:click={() => toggleContent("issues", false)}>

      <span class="txt-bold">{project.issues}</span>

      issue(s)
- 
    </div>
+ 
    </Stat>

  {/if}

  {#if project.patches}
- 
    <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
    <div
- 
      class="stat patch-count clickable widget"
- 
      class:active={activeRoute.params.view.resource === "patches"}
- 
      class:not-allowed={project.patches === 0}
- 
      class:clickable={project.patches > 0}
+ 
    <Stat
+ 
      clickable={project.patches > 0}
+ 
      active={activeRoute.params.view.resource === "patches"}
+ 
      disabled={project.patches === 0}

      on:click={() => toggleContent("patches", false)}>

      <span class="txt-bold">{project.patches}</span>

      patch(es)
- 
    </div>
+ 
    </Stat>

  {/if}
- 
  <div class="stat contributor-count widget">
+ 
  <Stat>

    <span class="txt-bold">{tree.stats.contributors}</span>

    contributor(s)
- 
  </div>
+ 
  </Stat>

</header>
added src/base/projects/Stat.svelte
@@ -0,0 +1,52 @@
+ 
<script lang="ts">
+ 
  import { createEventDispatcher } from "svelte";
+
+ 
  export let title: string | undefined = undefined;
+ 
  export let active = false;
+ 
  export let clickable = false;
+ 
  export let notAllowed = false;
+
+ 
  const dispatch = createEventDispatcher();
+ 
</script>
+
+ 
<style>
+ 
  .stat {
+ 
    font-family: var(--font-family-monospace);
+ 
    font-size: var(--font-size-tiny);
+ 
    padding: 0.5rem 0.75rem;
+ 
    padding-bottom: 1rem; /* moving the inner text a tad higher to match the previous span usage */
+ 
    height: 2rem;
+ 
    background: var(--color-foreground-1);
+ 
    border: none;
+ 
    color: var(--color-foreground);
+ 
    border-radius: var(--border-radius-small);
+ 
    min-width: max-content;
+ 
  }
+ 
  .active {
+ 
    color: var(--color-background);
+ 
    background: var(--color-foreground) !important;
+ 
    background-color: var(--color-foreground);
+ 
  }
+ 
  .clickable {
+ 
    cursor: pointer;
+ 
  }
+ 
  .clickable:hover {
+ 
    background-color: var(--color-foreground-2);
+ 
  }
+ 
  .not-allowed {
+ 
    cursor: not-allowed;
+ 
    color: var(--color-foreground-5);
+ 
  }
+ 
</style>
+
+ 
<button
+ 
  {title}
+ 
  class:active
+ 
  class:not-allowed={notAllowed}
+ 
  class:clickable
+ 
  class="stat clickable"
+ 
  on:click={() => {
+ 
    if (!notAllowed) dispatch("click");
+ 
  }}>
+ 
  <slot />
+ 
</button>