Skip to content

Clean up wave filters #1804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brandonhaslegs wants to merge 15 commits into
base: wave
Choose a base branch
from
Open

Clean up wave filters #1804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
20b8fae
changed button filters to toggles
brandonhaslegs Jan 5, 2026
abce9d3
move repo selector down and make it full width
brandonhaslegs Jan 5, 2026
8200fe8
Adjust repo selector corner radius
brandonhaslegs Jan 5, 2026
e4da93f
Update spacing on filter list items
brandonhaslegs Jan 5, 2026
354717e
use segmented control for status, update text in repo selector
brandonhaslegs Jan 5, 2026
4c2ed5d
Fix filter config toggle typing
brandonhaslegs Jan 5, 2026
45f5b96
try to fix errors again
brandonhaslegs Jan 5, 2026
a1a6a14
Fix filter config typing for toggles and status segmented control
brandonhaslegs Jan 5, 2026
803ba12
update copy, fix assigned to me filter
brandonhaslegs Jan 6, 2026
f34ecf5
make default filters grey, and apply/reset buttons disabled, until fi…
brandonhaslegs Jan 6, 2026
7c141e8
fix linked pr filter in contributor filters. and move repo selector down
brandonhaslegs Jan 6, 2026
e6196b6
fix flash when filters unapplied. change repository to repo.
brandonhaslegs Jan 6, 2026
2b04f0c
fix issues with repo dropdown, clear button, and repo search closing …
brandonhaslegs Jan 6, 2026
8594b82
adjust styling of repo dropdown
brandonhaslegs Jan 6, 2026
f0a6aa4
fix dropdown list items
brandonhaslegs Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion src/lib/components/segmented-control/segmented-control.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
interface Props {
options: Option<keyof T>;
active: keyof T;
defaultValue?: keyof T | undefined;
disabled?: boolean;
containerRole?: string;
itemRole?: string;
Expand All @@ -19,6 +20,7 @@
let {
options,
active = $bindable(),
defaultValue = undefined,
disabled = false,
containerRole = 'radiogroup',
itemRole = 'radio',
Expand Down Expand Up @@ -67,7 +69,12 @@
}
</script>

<div class="segmented-control" class:disabled bind:this={containerElem}>
<div
class="segmented-control"
class:disabled
class:default-active={defaultValue !== undefined && active === defaultValue}
bind:this={containerElem}
>
<div class="options" role={containerRole} aria-label={ariaLabel}>
{#each options as option (option.value)}
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
Expand Down Expand Up @@ -196,4 +203,12 @@
opacity: 0.5;
pointer-events: none;
}

.segmented-control.default-active .selector {
background-color: var(--color-foreground-level-5);
}

.segmented-control.default-active .option.selected {
color: var(--color-background);
}
</style>
50 changes: 39 additions & 11 deletions ...mponents/wave/issues-page/components/filter-config/components/dropdown-filter-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,18 @@
const popoverEl = document.getElementById(`dropdown-${uid}`);

if (popoverEl) {
popoverEl.style.position = 'absolute';
popoverEl.style.top = `${rect.bottom + window.scrollY + 8}px`;
popoverEl.style.left = `${rect.left + window.scrollX}px`;
popoverEl.style.position = 'fixed';
popoverEl.style.left = `${rect.left}px`;
popoverEl.style.width = `${rect.width}px`;

const spaceBelow = window.innerHeight - rect.bottom - 16;
const maxHeight = Math.max(spaceBelow, 160);

popoverEl.style.maxHeight = `${maxHeight}px`;
popoverEl.style.bottom = '';

const top = Math.min(rect.bottom + 8, window.innerHeight - maxHeight - 8);
popoverEl.style.top = `${top}px`;
}
}

Expand Down Expand Up @@ -78,7 +86,7 @@
>
<span class="name">
{#if !selectedOption}
Any
In any repo
{:else}
{#await optionsPromise}
Loading...
Expand Down Expand Up @@ -124,7 +132,9 @@
</div>

<div class="options-list">
<button class:selected={!selectedOption} onclick={() => handleSelect(null)}> Any </button>
<button class:selected={!selectedOption} onclick={() => handleSelect(null)}>
In any repo
</button>

{#each options.filter((option) => option.label
.toLowerCase()
Expand All @@ -142,7 +152,8 @@
.dropdown-trigger {
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
min-height: 42px;
border-radius: 0.5rem 0 0.5rem 0.5rem;
border: 1px solid var(--color-foreground-level-3);
user-select: none;
display: flex;
Expand All @@ -157,15 +168,16 @@

.dropdown-trigger .name {
flex-grow: 1;
min-width: 0;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.dropdown-trigger.has-selection {
background-color: var(--color-primary-level-1);
border-color: var(--color-primary-level-3);
background-color: var(--color-background);
border-color: var(--color-foreground-level-3);
}

.spinner {
Expand All @@ -181,6 +193,9 @@
box-shadow: var(--shadow-elevation-4);
padding: 0;
z-index: 5;
overflow: hidden;
display: flex;
flex-direction: column;
transition:
opacity 0.2s ease-in-out,
transform 0.2s ease-in-out,
Expand All @@ -189,6 +204,7 @@

opacity: 0;
transform: translateY(0.25rem);
pointer-events: none;
}

.dropdown-content .search-bar {
Expand All @@ -212,6 +228,7 @@
.dropdown-content:popover-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

@starting-style {
Expand All @@ -222,21 +239,32 @@
}

.options-list {
max-height: 15rem;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
display: block;
min-width: 0;
}

.dropdown-options {
display: flex;
flex-direction: column;
min-width: 0;
max-height: 100%;
min-height: 0;
flex: 1;
}

.dropdown-options button {
width: 100%;
min-width: 0;
padding: 0.5rem 0.5rem;
padding: 0.3rem 0.7rem;
background: none;
border: none;
text-align: left;
cursor: pointer;
transition: background-color 0.2s;
box-sizing: border-box;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
Loading