mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-08 13:00:13 +02:00
add grid item card size presets
This commit is contained in:
@@ -115,6 +115,7 @@ export const AlbumListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -126,6 +127,7 @@ export const AlbumListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ export const AlbumListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: AlbumListInfiniteGridProps) => {
|
||||
const listCountQuery = albumQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -65,6 +66,7 @@ export const AlbumListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,6 +29,7 @@ export const AlbumListPaginatedGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: AlbumListPaginatedGridProps) => {
|
||||
const listCountQuery = albumQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -77,6 +78,7 @@ export const AlbumListPaginatedGrid = ({
|
||||
itemType={LibraryItem.ALBUM}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -94,6 +94,7 @@ export const AlbumArtistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -105,6 +106,7 @@ export const AlbumArtistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ export const AlbumArtistListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: AlbumArtistListInfiniteGridProps) => {
|
||||
const listCountQuery = artistsQueries.albumArtistListCount({
|
||||
query: { ...query },
|
||||
@@ -65,6 +66,7 @@ export const AlbumArtistListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,6 +30,7 @@ export const AlbumArtistListPaginatedGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: AlbumArtistListPaginatedGridProps) => {
|
||||
const listCountQuery = artistsQueries.albumArtistListCount({
|
||||
query: { ...query },
|
||||
@@ -77,6 +78,7 @@ export const AlbumArtistListPaginatedGrid = ({
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -86,6 +86,7 @@ export const ArtistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -97,6 +98,7 @@ export const ArtistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ export const ArtistListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: ArtistListInfiniteGridProps) => {
|
||||
const listCountQuery = artistsQueries.artistListCount({
|
||||
query: { ...query },
|
||||
@@ -64,6 +65,7 @@ export const ArtistListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,6 +29,7 @@ export const ArtistListPaginatedGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: ArtistListPaginatedGridProps) => {
|
||||
const listCountQuery = artistsQueries.artistListCount({
|
||||
query: { ...query },
|
||||
@@ -76,6 +77,7 @@ export const ArtistListPaginatedGrid = ({
|
||||
itemType={LibraryItem.ARTIST}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -82,6 +82,7 @@ export const GenreListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -93,6 +94,7 @@ export const GenreListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ export const GenreListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: GenreListInfiniteGridProps) => {
|
||||
const listCountQuery = genresQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -64,6 +65,7 @@ export const GenreListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,6 +29,7 @@ export const GenreListPaginatedGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: GenreListPaginatedGridProps) => {
|
||||
const listCountQuery = genresQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -76,6 +77,7 @@ export const GenreListPaginatedGrid = ({
|
||||
itemType={LibraryItem.GENRE}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -92,6 +92,7 @@ export const PlaylistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -103,6 +104,7 @@ export const PlaylistListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ export const PlaylistListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: PlaylistListInfiniteGridProps) => {
|
||||
const listCountQuery = playlistsQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -64,6 +65,7 @@ export const PlaylistListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,6 +29,7 @@ export const PlaylistListPaginatedGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: PlaylistListPaginatedGridProps) => {
|
||||
const listCountQuery = playlistsQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -76,6 +77,7 @@ export const PlaylistListPaginatedGrid = ({
|
||||
itemType={LibraryItem.PLAYLIST}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
@@ -223,6 +223,43 @@ export const GridConfig = ({
|
||||
</Group>
|
||||
),
|
||||
},
|
||||
{
|
||||
component: (
|
||||
<SegmentedControl
|
||||
data={[
|
||||
{
|
||||
label: t('table.config.general.size_compact', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
value: 'compact',
|
||||
},
|
||||
{
|
||||
label: t('table.config.general.size_default', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
value: 'default',
|
||||
},
|
||||
{
|
||||
label: t('table.config.general.size_large', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
value: 'large',
|
||||
},
|
||||
]}
|
||||
onChange={(value) =>
|
||||
setList(listKey, {
|
||||
grid: { size: value as 'compact' | 'default' | 'large' },
|
||||
})
|
||||
}
|
||||
size="sm"
|
||||
value={grid.size || 'default'}
|
||||
w="100%"
|
||||
/>
|
||||
),
|
||||
id: 'size',
|
||||
label: t('table.config.general.size', { postProcess: 'sentenceCase' }),
|
||||
size: 'sm',
|
||||
},
|
||||
|
||||
...(extraOptions || []),
|
||||
];
|
||||
|
||||
@@ -112,6 +112,7 @@ export const SongListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
case ListPaginationType.PAGINATED:
|
||||
@@ -122,6 +123,7 @@ export const SongListView = ({
|
||||
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
|
||||
query={mergedQuery}
|
||||
serverId={server.id}
|
||||
size={grid.size}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
|
||||
@@ -22,6 +22,7 @@ export const SongListInfiniteGrid = ({
|
||||
},
|
||||
saveScrollOffset = true,
|
||||
serverId,
|
||||
size,
|
||||
}: SongListInfiniteGridProps) => {
|
||||
const listCountQuery = songsQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -59,6 +60,7 @@ export const SongListInfiniteGrid = ({
|
||||
onRangeChanged={onRangeChanged}
|
||||
onScrollEnd={handleOnScrollEnd}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -22,6 +22,7 @@ export const SongListPaginatedGrid = ({
|
||||
sortOrder: SortOrder.ASC,
|
||||
},
|
||||
serverId,
|
||||
size,
|
||||
}: SongListPaginatedGridProps) => {
|
||||
const listCountQuery = songsQueries.listCount({
|
||||
query: { ...query },
|
||||
@@ -60,6 +61,7 @@ export const SongListPaginatedGrid = ({
|
||||
itemsPerRow={itemsPerRow}
|
||||
itemType={LibraryItem.SONG}
|
||||
rows={rows}
|
||||
size={size}
|
||||
/>
|
||||
</ItemListWithPagination>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user