pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve grid size, language

Browse source
This commit is contained in:
Kendall Garner 2024-02-16 21:42:15 -08:00
parent ce9c03b0e1
commit 2f105956b9
No known key found for this signature in database
GPG key ID: 18D2767419676C87
6 changed files with 43 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/i18n/locales/en.json
View file

@ -612,6 +612,8 @@
"autoFitColumns": "auto fit columns", "autoFitColumns": "auto fit columns",
"displayType": "display type", "displayType": "display type",
"gap": "$t(common.gap)", "gap": "$t(common.gap)",
"itemGap": "item gap (px)",
"itemSize": "item size (px)",
"size": "$t(common.size)", "size": "$t(common.size)",
"tableColumns": "table columns" "tableColumns": "table columns"
}, },

4
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -72,7 +72,7 @@ export const VirtualInfiniteGrid = forwardRef(
const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []); const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []);
const { itemHeight, rowCount, columnCount } = useMemo(() => { const { itemHeight, rowCount, columnCount } = useMemo(() => {
const itemsPerRow = width ? Math.floor(width / itemSize) : 5; const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5;
const widthPerItem = Number(width) / itemsPerRow; const widthPerItem = Number(width) / itemsPerRow;
const itemHeight = widthPerItem + cardRows.length * 26; const itemHeight = widthPerItem + cardRows.length * 26;
@ -81,7 +81,7 @@ export const VirtualInfiniteGrid = forwardRef(
itemHeight, itemHeight,
rowCount: Math.ceil(itemCount / itemsPerRow), rowCount: Math.ceil(itemCount / itemsPerRow),
}; };
}, [cardRows.length, itemCount, itemSize, width]); }, [cardRows.length, itemCount, itemGap, itemSize, width]);
const isItemLoaded = useCallback( const isItemLoaded = useCallback(
(index: number) => { (index: number) => {

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

@ -538,7 +538,9 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
Table (paginated) Table (paginated)
</DropdownMenu.Item> */} </DropdownMenu.Item> */}
<DropdownMenu.Divider /> <DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemSize', { postProcess: 'sentenceCase' })}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight} defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
@ -549,7 +551,11 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
</DropdownMenu.Item> </DropdownMenu.Item>
{isGrid && ( {isGrid && (
<> <>
<DropdownMenu.Label>Item gap</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemGap', {
postProcess: 'sentenceCase',
})}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={grid?.itemGap || 0} defaultValue={grid?.itemGap || 0}

10
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View file

@ -472,7 +472,9 @@ export const AlbumArtistListHeaderFilters = ({
Table (paginated) Table (paginated)
</DropdownMenu.Item> */} </DropdownMenu.Item> */}
<DropdownMenu.Divider /> <DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemSize', { postProcess: 'sentenceCase' })}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
{display === ListDisplayType.CARD || {display === ListDisplayType.CARD ||
display === ListDisplayType.POSTER ? ( display === ListDisplayType.POSTER ? (
@ -493,7 +495,11 @@ export const AlbumArtistListHeaderFilters = ({
</DropdownMenu.Item> </DropdownMenu.Item>
{isGrid && ( {isGrid && (
<> <>
<DropdownMenu.Label>Item gap</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemGap', {
postProcess: 'sentenceCase',
})}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={grid?.itemGap || 0} defaultValue={grid?.itemGap || 0}

4
src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
View file

@ -523,7 +523,9 @@ export const PlaylistDetailSongListHeaderFilters = ({
Table (paginated) Table (paginated)
</DropdownMenu.Item> */} </DropdownMenu.Item> */}
<DropdownMenu.Divider /> <DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemSize', { postProcess: 'sentenceCase' })}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={page.table.rowHeight} defaultValue={page.table.rowHeight}

34
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
View file

@ -399,7 +399,9 @@ export const PlaylistListHeaderFilters = ({
Table (paginated) Table (paginated)
</DropdownMenu.Item> */} </DropdownMenu.Item> */}
<DropdownMenu.Divider /> <DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label> <DropdownMenu.Label>
{t('table.config.general.itemSize', { postProcess: 'sentenceCase' })}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight} defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
@ -407,20 +409,24 @@ export const PlaylistListHeaderFilters = ({
min={isGrid ? 150 : 25} min={isGrid ? 150 : 25}
onChangeEnd={handleItemSize} onChangeEnd={handleItemSize}
/> />
{isGrid && (
<>
<DropdownMenu.Label>Item gap</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={grid?.itemGap || 0}
max={30}
min={0}
onChangeEnd={handleItemGap}
/>
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Item> </DropdownMenu.Item>
{isGrid && (
<>
<DropdownMenu.Label>
{t('table.config.general.itemGap', {
postProcess: 'sentenceCase',
})}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={grid?.itemGap || 0}
max={30}
min={0}
onChangeEnd={handleItemGap}
/>
</DropdownMenu.Item>
</>
)}
{!isGrid && ( {!isGrid && (
<> <>
<DropdownMenu.Label> <DropdownMenu.Label>