feat: update custom filter button

This commit is contained in:
DecafDev 2024-09-09 23:24:31 -06:00
parent 98f50d7cc7
commit ca5bfb12da
2 changed files with 31 additions and 25 deletions

View file

@ -33,7 +33,7 @@
{/each}
{/if}
{#if groups.length === 0}
<span class="vault-explorer-empty-label">No groups</span>
<span class="vault-explorer-empty-label">No groups to display</span>
{/if}
</Stack>
</div>
@ -42,11 +42,11 @@
.vault-explorer-filter-group-list {
width: min(100%, 700px);
overflow-x: auto;
padding-bottom: 8px;
}
.vault-explorer-empty-label {
color: var(--text-faint);
font-size: var(--font-smaller);
font-size: var(--font-md);
margin-left: 4px;
}
</style>

View file

@ -929,29 +929,25 @@
<div class="vault-explorer" bind:this={ref}>
{#if shouldCollapseFilters === false}
<div class="vault-explorer-filters">
<Stack spacing="md" direction="column">
<Stack direction="column" spacing="sm">
<Flex justify="space-between">
{#if customFilter.isEnabled}
<FilterGroupList
groups={customFilter.groups}
on:groupClick={handleGroupClick}
on:groupContextMenu={handleGroupContextMenu}
on:groupDrop={handleGroupDrop}
on:groupDragOver={handleGroupDragOver}
on:groupDragStart={handleGroupDragStart}
/>
{/if}
</Flex>
<Flex justify="space-between">
<IconButton
ariaLabel="Change custom filter"
iconId="settings-2"
on:click={handleCustomFilterClick}
<Stack spacing="sm" direction="column">
<Flex justify="space-between">
{#if customFilter.isEnabled}
<FilterGroupList
groups={customFilter.groups}
on:groupClick={handleGroupClick}
on:groupContextMenu={handleGroupContextMenu}
on:groupDrop={handleGroupDrop}
on:groupDragOver={handleGroupDragOver}
on:groupDragStart={handleGroupDragStart}
/>
<Stack spacing="sm"></Stack>
</Flex>
</Stack>
{/if}
</Flex>
<div>
<button
class="vault-explorer-button"
on:click={handleCustomFilterClick}>Configure</button
>
</div>
</Stack>
<Spacer size="md" />
</div>
@ -1058,4 +1054,14 @@
.vault-explorer-view-select {
flex: 1;
}
.vault-explorer-button {
background: none;
text-decoration: underline;
color: var(--text-faint);
font-size: var(--font-small);
border: none;
box-shadow: none;
padding: 0;
}
</style>