obsidian-plugin/decaf-dev_obsidian-vault-explorer
1
0
Fork 0
mirror of https://github.com/decaf-dev/obsidian-vault-explorer.git synced 2026-07-22 10:10:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: set pagination indicator as status bar

Browse source
This commit is contained in:
DecafDev 2024-09-09 22:26:39 -06:00
parent 525fd3e276
commit 63772acbdb
2 changed files with 97 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/svelte/app/components/pagination-indicator.svelte
View file

@ -53,50 +53,67 @@
</script>
<div class="vault-explorer-pagination-indicator" bind:this={ref}>
<Stack
align="center"
direction={isWrapped ? "row-reverse" : "row"}
justify="flex-end"
spacing="md"
>
<Stack spacing="xs">
<div class="vault-explorer-pagination-indicator__container">
<Stack
align="center"
direction={isWrapped ? "row-reverse" : "row"}
justify="flex-end"
spacing="md"
>
<Flex>
<IconButton
iconId="chevrons-left"
ariaLabel="First page"
on:click={() => handlePageChange(1)}
/>
<IconButton
iconId="chevron-left"
ariaLabel="Previous page"
disabled={currentPage === 1}
on:click={() => handlePageChange(currentPage - 1)}
/>
<IconButton
iconId="chevron-right"
ariaLabel="Next page"
disabled={currentPage === totalPages}
on:click={() => handlePageChange(currentPage + 1)}
/>
<IconButton
iconId="chevrons-right"
ariaLabel="Last page"
on:click={() => handlePageChange(totalPages)}
/>
</Flex>
<Stack spacing="xs">
<span>{startIndex + 1}</span>
<span>-</span>
<span>{endIndex}</span>
<Stack spacing="xs">
<span>{startIndex + 1}</span>
<span>-</span>
<span>{endIndex}</span>
</Stack>
<span>of</span>
<span>{totalItems}</span>
</Stack>
<span>of</span>
<span>{totalItems}</span>
</Stack>
<Flex>
<IconButton
iconId="chevrons-left"
ariaLabel="First page"
on:click={() => handlePageChange(1)}
/>
<IconButton
iconId="chevron-left"
ariaLabel="Previous page"
disabled={currentPage === 1}
on:click={() => handlePageChange(currentPage - 1)}
/>
<IconButton
iconId="chevron-right"
ariaLabel="Next page"
disabled={currentPage === totalPages}
on:click={() => handlePageChange(currentPage + 1)}
/>
<IconButton
iconId="chevrons-right"
ariaLabel="Last page"
on:click={() => handlePageChange(totalPages)}
/>
</Flex>
</Stack>
</div>
</div>
<style>
.vault-explorer-pagination-indicator {
.vault-explorer-pagination-indicator__container {
flex: 1;
position: fixed;
bottom: 0px;
right: 0px;
display: flex;
border-style: solid;
border-width: var(--status-bar-border-width);
border-color: var(--status-bar-border-color);
background-color: var(--status-bar-background);
color: var(--status-bar-text-color);
font-size: var(--status-bar-font-size);
padding: var(--size-4-1);
}
.vault-explorer-pagination-indicator {
display: relative;
}
</style>

99
src/svelte/app/index.svelte
View file

@ -658,10 +658,6 @@
customFilter.groups = newGroups;
}
function handleListViewTagsToggle() {
showListViewTags = !showListViewTags;
}
function handleViewDragOver(e: CustomEvent) {
const { nativeEvent } = e.detail;
nativeEvent.preventDefault();
@ -962,44 +958,7 @@
{#if shouldCollapseFilters === false}
<div class="vault-explorer-filters">
<Stack spacing="md" direction="column">
{#if searchFilter.isEnabled}
<SearchFilter
value={searchFilter.value}
on:input={debounceSearchFilterChange}
on:clear={() => (searchFilter.value = "")}
/>
{/if}
<Stack direction="column" spacing="sm">
<Flex justify="space-between">
<Stack spacing="sm">
<Flex>
{#if timestampFilter.isEnabled}
<TimestampFilter
value={timestampFilter.value}
on:change={handleTimestampFilterChange}
/>
{/if}
{#if sortFilter.isEnabled}
<SortFilter
value={sortFilter.value}
on:change={handleSortChange}
/>
{/if}
{#if sortFilter.value == "random"}
<IconButton
iconId="shuffle"
ariaLabel="Reshuffle files"
on:click={handleReshuffleClick}
/>
{/if}
<IconButton
ariaLabel="Change custom filter"
iconId="list-filter"
on:click={handleCustomFilterClick}
/>
</Flex>
</Stack>
</Flex>
<Flex justify="space-between">
{#if customFilter.isEnabled}
<FilterGroupList
@ -1012,6 +971,14 @@
/>
{/if}
</Flex>
<Flex justify="space-between">
<IconButton
ariaLabel="Change custom filter"
iconId="list-filter"
on:click={handleCustomFilterClick}
/>
<Stack spacing="sm"></Stack>
</Flex>
</Stack>
</Stack>
<Spacer size="md" />
@ -1044,25 +1011,35 @@
/> -->
<!-- </Stack> -->
</div>
<Stack spacing="sm">
{#if currentView === "list"}
<IconButton
iconId="tags"
ariaLabel="Toggle tags"
on:click={handleListViewTagsToggle}
<Flex>
{#if timestampFilter.isEnabled}
<TimestampFilter
value={timestampFilter.value}
on:change={handleTimestampFilterChange}
/>
<Divider direction="vertical" />
{/if}
<PaginationIndicator
{startIndex}
{endIndex}
{currentPage}
{totalPages}
{totalItems}
on:change={handlePageChange}
/>
</Stack>
{#if sortFilter.isEnabled}
<SortFilter
value={sortFilter.value}
on:change={handleSortChange}
/>
{/if}
{#if sortFilter.value == "random"}
<IconButton
iconId="shuffle"
ariaLabel="Reshuffle files"
on:click={handleReshuffleClick}
/>
{/if}
</Flex>
</Wrap>
{#if searchFilter.isEnabled}
<SearchFilter
value={searchFilter.value}
on:input={debounceSearchFilterChange}
on:clear={() => (searchFilter.value = "")}
/>
{/if}
<Spacer size="md" />
{#if currentView === "grid"}
<GridView
@ -1096,6 +1073,14 @@
on:favoritePropertyChange={handleFavoritePropertyChange}
/>
{/if}
<PaginationIndicator
{startIndex}
{endIndex}
{currentPage}
{totalPages}
{totalItems}
on:change={handlePageChange}
/>
</div>
<style>