mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-10-30 16:50:47 +08:00
Fix superfluous outer border on all lists
This also resets the fuzzy filter input when switching states in list views.
This commit is contained in:
Rūdolfs Ošiņš
committed by
Sebastian Martinez
Sebastian Martinez
parent
ae3258d7cb
commit
b11ada847f
@@ -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="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}
|
||||
<div
|
||||
class="global-flex"
|
||||
style:height="74px"
|
||||
style:justify-content="center"
|
||||
style:min-width="405px">
|
||||
{#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}
|
||||
|
||||
@@ -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 });
|
||||
}}>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
+34
-26
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
{#each searchResults as result}
|
||||
<PatchTeaser
|
||||
focussed={searchResults.length === 1 && searchInput !== ""}
|
||||
patch={result.obj.patch}
|
||||
rid={repo.rid}
|
||||
{status} />
|
||||
{/each}
|
||||
|
||||
{#if searchResults.length === 0}
|
||||
{#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>
|
||||
|
||||
Reference in New Issue
Block a user