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

Adjust playqueue styles

Browse source
This commit is contained in:
jeffvli 2022-12-28 01:29:37 -08:00
parent 7500046ac6
commit e5ad41b9da
3 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
View file

@ -88,6 +88,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
px="1rem" px="1rem"
py="1rem" py="1rem"
sx={{ alignItems: 'center' }} sx={{ alignItems: 'center' }}
w="100%"
> >
<Group> <Group>
<Button <Button
@ -137,7 +138,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
</Button> </Button>
</Group> </Group>
<Group> <Group>
<Popover> <Popover transition="fade">
<Popover.Target> <Popover.Target>
<Button <Button
compact compact

9
src/renderer/features/now-playing/components/play-queue.tsx
View file

@ -29,6 +29,7 @@ import {
} from '/@/renderer/store/settings.store'; } from '/@/renderer/store/settings.store';
import { useMergedRef } from '@mantine/hooks'; import { useMergedRef } from '@mantine/hooks';
import isElectron from 'is-electron'; import isElectron from 'is-electron';
import debounce from 'lodash/debounce';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { VirtualTable } from '/@/renderer/components/virtual-table'; import { VirtualTable } from '/@/renderer/components/virtual-table';
import { ErrorFallback } from '/@/renderer/features/action-required'; import { ErrorFallback } from '/@/renderer/features/action-required';
@ -131,13 +132,13 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
const updatedColumns = []; const updatedColumns = [];
for (const column of columnsOrder) { for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.colId); const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
if (columnInSettings) { if (columnInSettings) {
updatedColumns.push({ updatedColumns.push({
...columnInSettings, ...columnInSettings,
...(!useSettingsStore.getState().tables[type].autoFit && { ...(!useSettingsStore.getState().tables[type].autoFit && {
width: column.actualWidth, width: column.getActualWidth(),
}), }),
}); });
} }
@ -154,6 +155,8 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
}); });
}; };
const debouncedColumnChange = debounce(handleColumnChange, 250);
const handleGridSizeChange = () => { const handleGridSizeChange = () => {
if (tableConfig.autoFit) { if (tableConfig.autoFit) {
tableRef?.current?.api.sizeColumnsToFit(); tableRef?.current?.api.sizeColumnsToFit();
@ -233,7 +236,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
rowSelection="multiple" rowSelection="multiple"
onCellDoubleClicked={handleDoubleClick} onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange} onColumnMoved={handleColumnChange}
onColumnResized={handleColumnChange} onColumnResized={debouncedColumnChange}
onDragStarted={handleDragStart} onDragStarted={handleDragStart}
onGridReady={handleGridReady} onGridReady={handleGridReady}
onGridSizeChanged={handleGridSizeChange} onGridSizeChanged={handleGridSizeChange}

16
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
View file

@ -1,6 +1,6 @@
import { useRef } from 'react'; import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Stack } from '@mantine/core'; import { Box, Stack } from '@mantine/core';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue'; import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from './play-queue-list-controls'; import { PlayQueueListControls } from './play-queue-list-controls';
import { Song } from '/@/renderer/api/types'; import { Song } from '/@/renderer/api/types';
@ -10,10 +10,18 @@ export const SidebarPlayQueue = () => {
return ( return (
<Stack <Stack
pb="1rem" h="100%"
pt="2.5rem" spacing={0}
sx={{ height: '100%' }} sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
> >
<Box
h="50px"
mr="160px"
sx={{
'-webkit-app-region': 'drag',
zIndex: -1,
}}
/>
<PlayQueue <PlayQueue
ref={queueRef} ref={queueRef}
type="sideQueue" type="sideQueue"