Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract header from repo card
Rūdolfs Ošiņš committed 1 year ago
commit a5601e7661e592a34c9fb7ba8346213553c8ec17
parent 4f63f9e87f8faf4e8709c44ec0ba9f486ee2965d
5 files changed +63 -35
modified src/components/Border.svelte
@@ -7,6 +7,7 @@
  export let styleHeight: string | undefined = undefined;

  export let styleMinHeight: string | undefined = undefined;

  export let styleWidth: string | undefined = undefined;
+ 
  export let styleCursor: "default" | "pointer" = "default";



  $: style =

    `--local-button-color-1: var(--color-fill-${variant});` +
@@ -110,7 +111,6 @@
  }



  .container {
- 
    cursor: pointer;

    white-space: nowrap;



    -webkit-touch-callout: none;
@@ -150,6 +150,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->

<div

  style:width={styleWidth}
+ 
  style:cursor={styleCursor}

  class="container"

  {onclick}

  role="button"
modified src/components/Fill.svelte
@@ -9,6 +9,7 @@
  export let stylePadding: string | undefined = undefined;

  export let styleHeight: string | undefined = undefined;

  export let styleWidth: string | undefined = undefined;
+ 
  export let styleCursor: "inherit" | "pointer" = "inherit";

  export let onclick: (() => void) | undefined = undefined;



  $: style =
@@ -61,7 +62,6 @@
  }



  .container {
- 
    cursor: pointer;

    white-space: nowrap;



    -webkit-touch-callout: none;
@@ -88,6 +88,7 @@
  {onclick}

  {style}

  style:width={styleWidth}
+ 
  style:cursor={styleCursor}

  style:height={styleHeight}>

  <div class="pixel p1-1"></div>

  <div class="pixel p1-2"></div>
modified src/components/RepoCard.svelte
@@ -4,8 +4,8 @@
  import { formatRepositoryId, formatTimestamp } from "@app/lib/utils";



  import Border from "./Border.svelte";
- 
  import Fill from "./Fill.svelte";

  import Icon from "./Icon.svelte";
+ 
  import RepoHeader from "./RepoHeader.svelte";



  export let repo: RepoInfo;

  export let selfDid: string;
@@ -15,9 +15,6 @@
</script>



<style>
- 
  .header {
- 
    justify-content: space-between;
- 
  }

  .footer {

    margin-top: 1rem;

    justify-content: space-between;
@@ -34,40 +31,13 @@


<Border

  variant="ghost"
+ 
  styleCursor="pointer"

  styleWidth="100%"

  stylePadding="8px 12px"

  hoverable

  {onclick}>

  <div class="container txt-small">
- 
    <div class="global-flex header">
- 
      <div class="global-flex">
- 
        <Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
- 
          {project.data.name[0]}
- 
        </Fill>{project.data.name}
- 
      </div>
- 
      <div class="global-flex">
- 
        {#if repo.visibility.type === "private"}
- 
          <Fill variant="private" styleWidth="24px" styleHeight="24px">
- 
            <div style:color="var(--color-foreground-yellow)">
- 
              <Icon name="lock" />
- 
            </div>
- 
          </Fill>
- 
        {/if}
- 
        {#if repo.delegates.find(x => x.did === selfDid)}
- 
          <Fill variant="delegate" styleWidth="24px" styleHeight="24px">
- 
            <div style:color="var(--color-fill-primary)">
- 
              <Icon name="delegate" />
- 
            </div>
- 
          </Fill>
- 
        {/if}
- 
        <div class="global-flex">
- 
          <Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
- 
            <Icon name="seedling" />
- 
            {repo.seeding}
- 
          </Fill>
- 
        </div>
- 
      </div>
- 
    </div>
+ 
    <RepoHeader {repo} {selfDid} />



    <div class="title">

      {#if project.data.description}
added src/components/RepoHeader.svelte
@@ -0,0 +1,54 @@
+ 
<script lang="ts">
+ 
  import type { RepoInfo } from "@bindings/RepoInfo";
+
+ 
  import Fill from "./Fill.svelte";
+ 
  import Icon from "./Icon.svelte";
+
+ 
  export let repo: RepoInfo;
+ 
  export let selfDid: string;
+ 
  export let emphasizedTitle: boolean = true;
+
+ 
  $: project = repo.payloads["xyz.radicle.project"]!;
+ 
</script>
+
+ 
<style>
+ 
  .header {
+ 
    justify-content: space-between;
+ 
    width: 100%;
+ 
  }
+ 
</style>
+
+ 
<div class="global-flex header txt-small">
+ 
  <div class="global-flex">
+ 
    <Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
+ 
      {project.data.name[0]}
+ 
    </Fill>
+ 
    {#if emphasizedTitle}
+ 
      <span class="txt-regular txt-semibold">{project.data.name}</span>
+ 
    {:else}
+ 
      <span class="txt-small txt-semibold">{project.data.name}</span>
+ 
    {/if}
+ 
  </div>
+ 
  <div class="global-flex">
+ 
    {#if repo.visibility.type === "private"}
+ 
      <Fill variant="private" styleWidth="24px" styleHeight="24px">
+ 
        <div style:color="var(--color-foreground-yellow)">
+ 
          <Icon name="lock" />
+ 
        </div>
+ 
      </Fill>
+ 
    {/if}
+ 
    {#if repo.delegates.find(x => x.did === selfDid)}
+ 
      <Fill variant="delegate" styleWidth="24px" styleHeight="24px">
+ 
        <div style:color="var(--color-fill-primary)">
+ 
          <Icon name="delegate" />
+ 
        </div>
+ 
      </Fill>
+ 
    {/if}
+ 
    <div class="global-flex">
+ 
      <Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
+ 
        <Icon name="seedling" />
+ 
        <span style:line-height="16px">{repo.seeding}</span>
+ 
      </Fill>
+ 
    </div>
+ 
  </div>
+ 
</div>
modified src/components/ThemeSwitch.svelte
@@ -37,6 +37,7 @@
<div style="display: flex; gap: 1rem;">

  <Border variant="secondary">

    <Fill
+ 
      styleCursor="pointer"

      stylePadding="0 0.5rem"

      variant={$theme === "dark" ? "secondary" : "transparent"}

      onclick={() => {
@@ -47,6 +48,7 @@
    </Fill>



    <Fill
+ 
      styleCursor="pointer"

      stylePadding="0 0.5rem"

      variant={$theme === "light" ? "secondary" : "transparent"}

      onclick={() => {