liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): make list filter modes keyboard accessible

Browse Source
This commit is contained in:
Draconizations 2022-05-30 10:48:51 +02:00
parent a2d500e536
commit 08ead3d549
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/src/lib/group/List.svelte
View File

@ -254,10 +254,10 @@
<Label>Filter groups by member</Label>
<Svelecte renderer="member-list" bind:value={selectedMembers} disableHighlight options={memberlist} multiple style="margin-bottom: 0.5rem">
</Svelecte>
<span style="cursor: pointer" id="g-include" on:click={() => memberSearchMode = "include"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<span style="cursor: pointer" id="g-include" on:click={() => memberSearchMode = "include"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "include" : ""} tabindex={0}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "exclude" : ""} tabindex={0}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "match" : ""} tabindex={0}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "none" : ""} tabindex={0}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<Tooltip placement="bottom" target="g-include">Includes every group with any of the members.</Tooltip>
<Tooltip placement="bottom" target="g-exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
<Tooltip placement="bottom" target="g-match">Only includes groups which have all the members selected.</Tooltip>

8
dashboard/src/lib/member/List.svelte
View File

@ -253,10 +253,10 @@
<Label>Filter members by group</Label>
<Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={grouplist} multiple style="margin-bottom: 0.5rem">
</Svelecte>
<span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
<Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
<Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>