mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
fix playqueue flex sizing
This commit is contained in:
@@ -12,6 +12,7 @@ import {
|
|||||||
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
|
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
|
||||||
import { useListSettings, usePlayerQueue } from '/@/renderer/store';
|
import { useListSettings, usePlayerQueue } from '/@/renderer/store';
|
||||||
import { searchSongs } from '/@/renderer/utils/search-songs';
|
import { searchSongs } from '/@/renderer/utils/search-songs';
|
||||||
|
import { Box } from '/@/shared/components/box/box';
|
||||||
import { Flex } from '/@/shared/components/flex/flex';
|
import { Flex } from '/@/shared/components/flex/flex';
|
||||||
import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
|
import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
|
||||||
import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
|
import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
|
||||||
@@ -69,9 +70,10 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
|
|||||||
const isEmpty = data.length === 0;
|
const isEmpty = data.length === 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Box className="play-queue" pos="relative" style={{ flex: 1, minHeight: 0 }} w="100%">
|
||||||
<LoadingOverlay pos="absolute" visible={isFetching} />
|
<LoadingOverlay pos="absolute" visible={isFetching} />
|
||||||
<ItemTableList
|
<ItemTableList
|
||||||
|
autoFitColumns={table.autoFitColumns}
|
||||||
CellComponent={ItemTableListColumn}
|
CellComponent={ItemTableListColumn}
|
||||||
columns={table.columns}
|
columns={table.columns}
|
||||||
data={data || []}
|
data={data || []}
|
||||||
@@ -93,7 +95,7 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
|
|||||||
size={table.size}
|
size={table.size}
|
||||||
/>
|
/>
|
||||||
{isEmpty && <EmptyQueueDropZone />}
|
{isEmpty && <EmptyQueueDropZone />}
|
||||||
</>
|
</Box>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
|
|||||||
|
|
||||||
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
|
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
|
||||||
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
|
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
|
||||||
import { Flex } from '/@/shared/components/flex/flex';
|
import { Stack } from '/@/shared/components/stack/stack';
|
||||||
import { ItemListKey } from '/@/shared/types/types';
|
import { ItemListKey } from '/@/shared/types/types';
|
||||||
|
|
||||||
export const SidebarPlayQueue = () => {
|
export const SidebarPlayQueue = () => {
|
||||||
@@ -10,7 +10,7 @@ export const SidebarPlayQueue = () => {
|
|||||||
const [search, setSearch] = useState<string | undefined>(undefined);
|
const [search, setSearch] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex direction="column" h="100%" w="100%">
|
<Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
|
||||||
<PlayQueueListControls
|
<PlayQueueListControls
|
||||||
handleSearch={setSearch}
|
handleSearch={setSearch}
|
||||||
searchTerm={search}
|
searchTerm={search}
|
||||||
@@ -18,6 +18,6 @@ export const SidebarPlayQueue = () => {
|
|||||||
type={ItemListKey.SIDE_QUEUE}
|
type={ItemListKey.SIDE_QUEUE}
|
||||||
/>
|
/>
|
||||||
<PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} />
|
<PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} />
|
||||||
</Flex>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user