Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 6bf52779
Fix superfluous outer border on all lists
Open rudolfs opened 1 year ago

This also resets the fuzzy filter input when switching states in list views.

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +134 -101
6 files changed +134 -101 0702896e → 70ea2bc4
modified src/components/IssueSecondColumn.svelte
@@ -72,6 +72,12 @@
    align-items: center;

    min-height: 2.5rem;

    margin-bottom: 1rem;
+ 
    min-width: 450px;
+ 
  }
+ 
  .list {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 2px;

  }

</style>
@@ -212,30 +218,28 @@
  </div>

{/if}
- 
<Border
- 
  variant={searchResults.length === 1 && searchInput !== ""
- 
    ? "secondary"
- 
    : "float"}
- 
  styleFlexDirection="column"
- 
  styleOverflow="hidden"
- 
  styleGap="2px"
- 
  styleAlignItems="center"
- 
  styleJustifyContent="center">
- 
  {#each searchResults as result}
- 
    <IssueTeaser
- 
      compact
- 
      issue={result.obj.issue}
- 
      {status}
- 
      rid={repo.rid}
- 
      selected={result.obj.issue.id === selectedIssueId} />
- 
  {/each}
-
- 
  {#if searchResults.length === 0}
- 
    <div
- 
      class="global-flex"
- 
      style:height="74px"
- 
      style:justify-content="center"
- 
      style:min-width="405px">
+ 
{#if searchResults.length > 0}
+ 
  <div class="list">
+ 
    {#each searchResults as result}
+ 
      <IssueTeaser
+ 
        selected={result.obj.issue.id === selectedIssueId}
+ 
        focussed={searchResults.length === 1 && searchInput !== ""}
+ 
        compact
+ 
        issue={result.obj.issue}
+ 
        {status}
+ 
        rid={repo.rid} />
+ 
    {/each}
+ 
  </div>
+ 
{/if}
+
+ 
{#if searchResults.length === 0}
+ 
  <Border
+ 
    variant="ghost"
+ 
    styleFlexDirection="column"
+ 
    styleOverflow="hidden"
+ 
    styleAlignItems="center"
+ 
    styleJustifyContent="center">
+ 
    <div class="global-flex" style:height="84px" style:justify-content="center">

      <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

        <Icon name="none" />

        {#if issues.length > 0 && searchResults.length === 0}
@@ -245,5 +249,5 @@
        {/if}

      </div>

    </div>
- 
  {/if}
- 
</Border>
+ 
  </Border>
+ 
{/if}
modified src/components/IssueTeaser.svelte
@@ -42,7 +42,6 @@
    align-items: center;

    gap: 0.25rem;

    min-height: 5rem;
- 
    min-width: 405px;

    background-color: var(--color-background-float);

    padding: 1rem;

    cursor: pointer;
@@ -61,13 +60,13 @@
    margin-right: 1rem;

  }

  .issue-teaser:first-of-type {
- 
    clip-path: var(--1px-top-corner-fill);
+ 
    clip-path: var(--2px-top-corner-fill);

  }

  .issue-teaser:last-of-type {
- 
    clip-path: var(--1px-bottom-corner-fill);
+ 
    clip-path: var(--2px-bottom-corner-fill);

  }

  .issue-teaser:only-of-type {
- 
    clip-path: var(--1px-corner-fill);
+ 
    clip-path: var(--2px-corner-fill);

  }

</style>
@@ -80,6 +79,7 @@
    class:selected

    style:align-items="flex-start"

    style:clip-path={focussed ? "none" : undefined}
+ 
    style:padding={focussed ? "1rem" : "20px"}

    onclick={() => {

      void push({ resource: "repo.issue", rid, issue: issue.id, status });

    }}>
modified src/components/PatchTeaser.svelte
@@ -47,7 +47,6 @@
    justify-content: space-between;

    gap: 0.25rem;

    min-height: 5rem;
- 
    min-width: 440px;

    background-color: var(--color-background-float);

    padding: 1rem;

    cursor: pointer;
@@ -66,13 +65,13 @@
    margin-right: 1rem;

  }

  .patch-teaser:first-of-type {
- 
    clip-path: var(--1px-top-corner-fill);
+ 
    clip-path: var(--2px-top-corner-fill);

  }

  .patch-teaser:last-of-type {
- 
    clip-path: var(--1px-bottom-corner-fill);
+ 
    clip-path: var(--2px-bottom-corner-fill);

  }

  .patch-teaser:only-of-type {
- 
    clip-path: var(--1px-corner-fill);
+ 
    clip-path: var(--2px-corner-fill);

  }

</style>
@@ -85,6 +84,7 @@
    class="patch-teaser"

    style:align-items="flex-start"

    style:clip-path={focussed ? "none" : undefined}
+ 
    style:padding={focussed ? "1rem" : "20px"}

    onclick={async () => {

      if (loadPatch) {

        await loadPatch(patch.id);
modified src/views/repo/Issues.svelte
@@ -33,6 +33,13 @@


  let searchInput = $state("");
+ 
  $effect(() => {
+ 
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ 
    status;
+
+ 
    searchInput = "";
+ 
  });
+ 


  const searchableIssues = $derived(

    issues

      .flatMap(i => {
@@ -62,6 +69,11 @@
  .container {

    padding: 1rem 1rem 1rem 0;

  }
+ 
  .list {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 2px;
+ 
  }

  .header {

    font-weight: var(--font-weight-medium);

    font-size: var(--font-size-medium);
@@ -136,34 +148,36 @@
      </div>

    </div>
- 
    <Border
- 
      variant={searchResults.length === 1 && searchInput !== ""
- 
        ? "secondary"
- 
        : "float"}
- 
      styleFlexDirection="column"
- 
      styleOverflow="hidden"
- 
      styleGap="2px"
- 
      styleAlignItems="center"
- 
      styleJustifyContent="center">
+ 
    <div class="list">

      {#each searchResults as result}
- 
        <IssueTeaser issue={result.obj.issue} rid={repo.rid} {status} />
+ 
        <IssueTeaser
+ 
          focussed={searchResults.length === 1 && searchInput !== ""}
+ 
          issue={result.obj.issue}
+ 
          rid={repo.rid}
+ 
          {status} />

      {/each}



      {#if searchResults.length === 0}
- 
        <div
- 
          class="global-flex"
- 
          style:height="74px"
- 
          style:justify-content="center">
- 
          <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
- 
            <Icon name="none" />
- 
            {#if issues.length > 0 && searchResults.length === 0}
- 
              No matching issues.
- 
            {:else}
- 
              No {status === "all" ? "" : status} issues.
- 
            {/if}
+ 
        <Border
+ 
          variant="ghost"
+ 
          styleFlexDirection="column"
+ 
          styleAlignItems="center"
+ 
          styleJustifyContent="center">
+ 
          <div
+ 
            class="global-flex"
+ 
            style:height="84px"
+ 
            style:justify-content="center">
+ 
            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
+ 
              <Icon name="none" />
+ 
              {#if issues.length > 0 && searchResults.length === 0}
+ 
                No matching issues.
+ 
              {:else}
+ 
                No {status === "all" ? "" : status} issues.
+ 
              {/if}
+ 
            </div>

          </div>
- 
        </div>
+ 
        </Border>

      {/if}
- 
    </Border>
+ 
    </div>

  </div>

</Layout>
modified src/views/repo/Patch.svelte
@@ -355,6 +355,11 @@
    margin-bottom: 0.5rem;

    color: var(--color-foreground-dim);

  }
+ 
  .list {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 2px;
+ 
  }

</style>



{#snippet icons(status: PatchStatus | undefined)}
@@ -390,6 +395,7 @@


  {#snippet secondColumn()}

    <div
+ 
      style:min-width="450px"

      class="txt-regular txt-semibold global-flex"

      style:min-height="2.5rem"

      style:margin-bottom="1rem">
@@ -505,33 +511,35 @@
        {/if}

      </div>

    {/if}
- 
    <Border
- 
      variant={searchResults.length === 1 && searchInput !== ""
- 
        ? "secondary"
- 
        : "float"}
- 
      styleFlexDirection="column"
- 
      styleOverflow="hidden"
- 
      styleGap="2px"
- 
      styleAlignItems="center"
- 
      styleJustifyContent="center">
- 
      {#each searchResults as teaser}
- 
        <PatchTeaser
- 
          compact
- 
          loadPatch={async (id: string) => {
- 
            review = undefined;
- 
            await loadPatch(id);
- 
          }}
- 
          patch={teaser.obj.patch}
- 
          rid={repo.rid}
- 
          {status}
- 
          selected={teaser.obj.patch.id === patch.id} />
- 
      {/each}
-
- 
      {#if searchResults.length === 0}
+
+ 
    {#if searchResults.length > 0}
+ 
      <div class="list">
+ 
        {#each searchResults as teaser}
+ 
          <PatchTeaser
+ 
            selected={teaser.obj.patch.id === patch.id}
+ 
            focussed={searchResults.length === 1 && searchInput !== ""}
+ 
            compact
+ 
            loadPatch={async (id: string) => {
+ 
              review = undefined;
+ 
              await loadPatch(id);
+ 
            }}
+ 
            patch={teaser.obj.patch}
+ 
            rid={repo.rid}
+ 
            {status} />
+ 
        {/each}
+ 
      </div>
+ 
    {/if}
+
+ 
    {#if searchResults.length === 0}
+ 
      <Border
+ 
        variant="ghost"
+ 
        styleFlexDirection="column"
+ 
        styleOverflow="hidden"
+ 
        styleAlignItems="center"
+ 
        styleJustifyContent="center">

        <div

          class="global-flex"
- 
          style:height="74px"
- 
          style:min-width="440px"
+ 
          style:height="84px"

          style:justify-content="center">

          <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

            <Icon name="none" />
@@ -542,8 +550,8 @@
            {/if}

          </div>

        </div>
- 
      {/if}
- 
    </Border>
+ 
      </Border>
+ 
    {/if}

  {/snippet}



  {#if review}
modified src/views/repo/Patches.svelte
@@ -40,6 +40,13 @@
    more = patches.more;

  });
+ 
  $effect(() => {
+ 
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ 
    status;
+
+ 
    searchInput = "";
+ 
  });
+ 


  async function loadMoreContent(all: boolean = false) {

    if (more) {

      const p = await invoke<PaginatedQuery<Patch[]>>("list_patches", {
@@ -174,23 +181,23 @@
    </div>



    <div class="list">
- 
      <Border
- 
        variant={searchResults.length === 1 && searchInput !== ""
- 
          ? "secondary"
- 
          : "float"}
- 
        styleFlexDirection="column"
- 
        styleOverflow="hidden"
- 
        styleGap="2px"
- 
        styleAlignItems="center"
- 
        styleJustifyContent="center">
- 
        {#each searchResults as result}
- 
          <PatchTeaser patch={result.obj.patch} rid={repo.rid} {status} />
- 
        {/each}
-
- 
        {#if searchResults.length === 0}
+ 
      {#each searchResults as result}
+ 
        <PatchTeaser
+ 
          focussed={searchResults.length === 1 && searchInput !== ""}
+ 
          patch={result.obj.patch}
+ 
          rid={repo.rid}
+ 
          {status} />
+ 
      {/each}
+
+ 
      {#if searchResults.length === 0}
+ 
        <Border
+ 
          variant="ghost"
+ 
          styleFlexDirection="column"
+ 
          styleAlignItems="center"
+ 
          styleJustifyContent="center">

          <div

            class="global-flex"
- 
            style:height="74px"
+ 
            style:height="84px"

            style:justify-content="center">

            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">

              <Icon name="none" />
@@ -201,8 +208,8 @@
              {/if}

            </div>

          </div>
- 
        {/if}
- 
      </Border>
+ 
        </Border>
+ 
      {/if}

    </div>

  </div>

</Layout>