antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add dynamic grid sizing

Browse source
This commit is contained in:
jeffvli 2023-08-07 14:42:47 -07:00
parent 1ab75f7187
commit f09ad1da89
15 changed files with 127 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/features/albums/components/album-list-grid-view.tsx
View file

@ -224,8 +224,8 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
height={height}
initialScrollOffset={initialScrollOffset}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemGap={grid?.itemGap ?? 10}
itemSize={grid?.itemSize || 200}
itemType={LibraryItem.ALBUM}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}

29
src/renderer/features/albums/components/album-list-header-filters.tsx
View file

@ -207,12 +207,16 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
const handleItemSize = (e: number) => {
if (isGrid) {
setGrid({ data: { itemsPerRow: e }, key: pageKey });
setGrid({ data: { itemSize: e }, key: pageKey });
} else {
setTable({ data: { rowHeight: e }, key: pageKey });
}
};
const handleItemGap = (e: number) => {
setGrid({ data: { itemGap: e }, key: pageKey });
};
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
@ -449,17 +453,28 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
Table (paginated)
</DropdownMenu.Item> */}
<DropdownMenu.Divider />
<DropdownMenu.Label>
{isGrid ? 'Items per row' : 'Item size'}
</DropdownMenu.Label>
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={isGrid ? grid?.itemsPerRow || 0 : table.rowHeight}
max={isGrid ? 14 : 100}
min={isGrid ? 2 : 25}
defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
max={isGrid ? 300 : 100}
min={isGrid ? 150 : 25}
onChangeEnd={handleItemSize}
/>
</DropdownMenu.Item>
{isGrid && (
<>
<DropdownMenu.Label>Item gap</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={grid?.itemGap || 0}
max={30}
min={0}
onChangeEnd={handleItemGap}
/>
</DropdownMenu.Item>
</>
)}
{(display === ListDisplayType.TABLE ||
display === ListDisplayType.TABLE_PAGINATED) && (
<>