Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › 1583a31
Make repos in home focusable and interactive
Thomas Scholtes committed 9 months ago
commit 1583a3103c83b21b4172ad3fa74be36e8f641157
parent ea395ee
4 files changed +74 -57
modified src/components/Border.svelte
@@ -232,7 +232,7 @@
  }

</style>
- 
<!-- svelte-ignore a11y_click_events_have_key_events -->
+ 
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->

<div

  style:width={styleWidth}

  style:max-width={styleMaxWidth}
@@ -242,8 +242,8 @@
  class:flat-top={flatTop}

  class:flat-bottom={flatBottom}

  {onclick}
- 
  role="button"
- 
  tabindex={onclick !== undefined ? 0 : -1}
+ 
  role={onclick !== undefined ? "button" : undefined}
+ 
  tabindex={onclick !== undefined ? 0 : undefined}

  {style}

  style:min-height={styleMinHeight}

  style:height={styleHeight}>
modified src/components/RepoCard.svelte
@@ -1,6 +1,7 @@
<script lang="ts">

  import type { RepoInfo } from "@bindings/repo/RepoInfo";
+ 
  import * as router from "@app/lib/router";

  import { formatRepositoryId, formatTimestamp } from "@app/lib/utils";



  import Border from "@app/components/Border.svelte";
@@ -11,11 +12,10 @@
  interface Props {

    repo: RepoInfo;

    selfDid: string;
- 
    onclick?: () => void;

    focussed?: boolean;

  }
- 
  const { repo, selfDid, onclick, focussed }: Props = $props();
+ 
  const { repo, selfDid, focussed }: Props = $props();



  const project = $derived(repo.payloads["xyz.radicle.project"]!);

</script>
@@ -29,20 +29,29 @@
    color: var(--color-fill-gray);

    margin-top: 0.25rem;

  }
- 
  .container {
+ 
  .content {

    width: 100%;
+ 
    padding: 0.5rem 0.75rem;
+ 
    cursor: pointer;

  }

</style>



<Border

  variant={focussed ? "secondary" : "ghost"}
- 
  styleCursor="pointer"

  styleWidth="100%"
- 
  stylePadding="0.5rem 0.75rem"

  styleOverflow="hidden"
- 
  hoverable
- 
  {onclick}>
- 
  <div class="container txt-small">
+ 
  hoverable>
+ 
  <!-- svelte-ignore a11y_click_events_have_key_events -->
+ 
  <!-- svelte-ignore a11y_no_static_element_interactions -->
+ 
  <div
+ 
    class="content txt-small"
+ 
    onclick={event => {
+ 
      if (!event.defaultPrevented)
+ 
        void router.push({
+ 
          resource: "repo.home",
+ 
          rid: repo.rid,
+ 
        });
+ 
    }}>

    <RepoHeader {repo} {selfDid} />



    <div class="description txt-overflow" title={project.data.description}>
modified src/components/RepoHeader.svelte
@@ -1,6 +1,8 @@
<script lang="ts">

  import type { RepoInfo } from "@bindings/repo/RepoInfo";
+ 
  import * as router from "@app/lib/router";
+ 


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



  interface Props {
@@ -17,55 +19,67 @@
  .header {

    display: flex;

    align-items: center;
- 
    justify-content: space-between;

    width: 100%;

    gap: 0.5rem;

  }

</style>



<div class="header txt-small">
- 
  <div class="global-flex txt-overflow">
- 
    <div
- 
      class="global-counter"
- 
      style:background-color="var(--color-fill-ghost)">
- 
      {project.data.name[0]}
- 
    </div>
- 
    <span
- 
      title={project.data.name}
- 
      class="txt-regular txt-overflow txt-semibold">
+ 
  <div class="global-counter" style:background-color="var(--color-fill-ghost)">
+ 
    {project.data.name[0]}
+ 
  </div>
+ 
  <div
+ 
    role="button"
+ 
    style:min-width="0"
+ 
    style:margin-right="auto"
+ 
    tabindex="0"
+ 
    onclick={event => {
+ 
      event.preventDefault();
+ 
      void router.push({
+ 
        resource: "repo.home",
+ 
        rid: repo.rid,
+ 
      });
+ 
    }}
+ 
    onkeypress={event => {
+ 
      if (event.key === "Enter" || event.key === " ") {
+ 
        event.preventDefault();
+ 
        void router.push({
+ 
          resource: "repo.home",
+ 
          rid: repo.rid,
+ 
        });
+ 
      }
+ 
    }}
+ 
    title={project.data.name}>
+ 
    <div class="txt-regular txt-overflow txt-semibold" style:max-width="100%">

      {project.data.name}
- 
    </span>
+ 
    </div>

  </div>
- 
  <div class="global-flex">
- 
    {#if repo.visibility.type === "private"}
- 
      <div
- 
        class="global-counter"
- 
        style:padding="0"
- 
        style:background-color="var(--color-fill-private)">
- 
        <div style:color="var(--color-foreground-yellow)">
- 
          <Icon name="lock" />
- 
        </div>
- 
      </div>
- 
    {/if}
- 
    {#if repo.delegates.find(x => x.did === selfDid)}
- 
      <div
- 
        class="global-counter"
- 
        style:padding="0"
- 
        style:background-color="var(--color-fill-delegate)">
- 
        <div style:color="var(--color-fill-primary)">
- 
          <Icon name="delegate" />
- 
        </div>
+ 
  {#if repo.visibility.type === "private"}
+ 
    <div
+ 
      class="global-counter"
+ 
      style:padding="0"
+ 
      style:background-color="var(--color-fill-private)">
+ 
      <div style:color="var(--color-foreground-yellow)">
+ 
        <Icon name="lock" />

      </div>
- 
    {/if}
- 
    <div class="global-flex">
- 
      <div
- 
        class="global-counter"
- 
        style:padding="0 0.375rem"
- 
        style:background-color="var(--color-fill-ghost)"
- 
        style:gap="0.25rem">
- 
        <Icon name="seedling-filled" />
- 
        {repo.seeding}
+ 
    </div>
+ 
  {/if}
+ 
  {#if repo.delegates.find(x => x.did === selfDid)}
+ 
    <div
+ 
      class="global-counter"
+ 
      style:padding="0"
+ 
      style:background-color="var(--color-fill-delegate)">
+ 
      <div style:color="var(--color-fill-primary)">
+ 
        <Icon name="delegate" />

      </div>

    </div>
+ 
  {/if}
+ 
  <div
+ 
    class="global-counter"
+ 
    style:padding="0 0.375rem"
+ 
    style:background-color="var(--color-fill-ghost)"
+ 
    style:gap="0.25rem">
+ 
    <Icon name="seedling-filled" />
+ 
    {repo.seeding}

  </div>

</div>
modified src/views/home/Repos.svelte
@@ -228,13 +228,7 @@
            <RepoCard

              focussed={searchResults.length === 1 && searchInput !== ""}

              repo={result.obj.repo}
- 
              selfDid={didFromPublicKey(config.publicKey)}
- 
              onclick={() => {
- 
                void router.push({
- 
                  resource: "repo.home",
- 
                  rid: result.obj.repo.rid,
- 
                });
- 
              }} />
+ 
              selfDid={didFromPublicKey(config.publicKey)} />

          {/each}

        </div>

      {:else}