mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23:33 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
Jeff
GitHub
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -1,10 +1,10 @@
|
|||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
|
||||
import { Box, Flex } from '@mantine/core';
|
||||
import { useRef } from 'react';
|
||||
|
||||
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
|
||||
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
|
||||
import { Flex } from '/@/shared/components/flex/flex';
|
||||
import { Song } from '/@/shared/types/domain-types';
|
||||
|
||||
export const DrawerPlayQueue = () => {
|
||||
|
|
@ -15,17 +15,19 @@ export const DrawerPlayQueue = () => {
|
|||
direction="column"
|
||||
h="100%"
|
||||
>
|
||||
<Box
|
||||
bg="var(--main-bg)"
|
||||
sx={{ borderRadius: '10px' }}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'var(--theme-colors-background)',
|
||||
borderRadius: '10px',
|
||||
}}
|
||||
>
|
||||
<PlayQueueListControls
|
||||
tableRef={queueRef}
|
||||
type="sideQueue"
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
<Flex
|
||||
bg="var(--main-bg)"
|
||||
bg="var(--theme-colors-background)"
|
||||
h="100%"
|
||||
mb="0.6rem"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PageHeader } from '/@/renderer/components';
|
||||
import { PageHeader } from '/@/renderer/components/page-header/page-header';
|
||||
import { LibraryHeaderBar } from '/@/renderer/features/shared';
|
||||
|
||||
export const NowPlayingHeader = () => {
|
||||
|
|
@ -6,7 +6,7 @@ export const NowPlayingHeader = () => {
|
|||
// const theme = useTheme();
|
||||
|
||||
return (
|
||||
<PageHeader backgroundColor="var(--titlebar-bg)">
|
||||
<PageHeader>
|
||||
<LibraryHeaderBar>
|
||||
<LibraryHeaderBar.Title>Queue</LibraryHeaderBar.Title>
|
||||
</LibraryHeaderBar>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,18 @@
|
|||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import type { MutableRefObject } from 'react';
|
||||
|
||||
import { Group } from '@mantine/core';
|
||||
import isElectron from 'is-electron';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
RiArrowDownLine,
|
||||
RiArrowGoForwardLine,
|
||||
RiArrowUpLine,
|
||||
RiDeleteBinLine,
|
||||
RiEraserLine,
|
||||
RiListSettingsLine,
|
||||
RiShuffleLine,
|
||||
} from 'react-icons/ri';
|
||||
|
||||
import { Button, Popover } from '/@/renderer/components';
|
||||
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
|
||||
import { updateSong } from '/@/renderer/features/player/update-remote-song';
|
||||
import { usePlayerControls, useQueueControls } from '/@/renderer/store';
|
||||
import { usePlayerStore, useSetCurrentTime } from '/@/renderer/store/player.store';
|
||||
import { usePlaybackType } from '/@/renderer/store/settings.store';
|
||||
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Popover } from '/@/shared/components/popover/popover';
|
||||
import { Song } from '/@/shared/types/domain-types';
|
||||
import { PlaybackType, TableType } from '/@/shared/types/types';
|
||||
|
||||
|
|
@ -129,69 +121,57 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
|
|||
|
||||
return (
|
||||
<Group
|
||||
position="apart"
|
||||
justify="space-between"
|
||||
px="1rem"
|
||||
py="1rem"
|
||||
sx={{ alignItems: 'center' }}
|
||||
style={{ alignItems: 'center' }}
|
||||
w="100%"
|
||||
>
|
||||
<Group spacing="sm">
|
||||
<Button
|
||||
compact
|
||||
<Group gap="sm">
|
||||
<ActionIcon
|
||||
icon="mediaShuffle"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleShuffleQueue}
|
||||
size="md"
|
||||
tooltip={{ label: t('player.shuffle', { postProcess: 'sentenceCase' }) }}
|
||||
variant="default"
|
||||
>
|
||||
<RiShuffleLine size="1.1rem" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaPlayNext"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleMoveToNext}
|
||||
size="md"
|
||||
tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowGoForwardLine size="1.1rem" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="arrowDownToLine"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleMoveToBottom}
|
||||
size="md"
|
||||
tooltip={{ label: t('action.moveToBottom', { postProcess: 'sentenceCase' }) }}
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowDownLine size="1.1rem" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="arrowUpToLine"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleMoveToTop}
|
||||
size="md"
|
||||
tooltip={{ label: t('action.moveToTop', { postProcess: 'sentenceCase' }) }}
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowUpLine size="1.1rem" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="delete"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleRemoveSelected}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('action.removeFromQueue', { postProcess: 'sentenceCase' }),
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiEraserLine size="1.1rem" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="x"
|
||||
iconProps={{ size: 'lg' }}
|
||||
onClick={handleClearQueue}
|
||||
size="md"
|
||||
tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }}
|
||||
variant="default"
|
||||
>
|
||||
<RiDeleteBinLine size="1.1rem" />
|
||||
</Button>
|
||||
variant="subtle"
|
||||
/>
|
||||
</Group>
|
||||
<Group>
|
||||
<Popover
|
||||
|
|
@ -199,16 +179,14 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
|
|||
transitionProps={{ transition: 'fade' }}
|
||||
>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
compact
|
||||
size="md"
|
||||
<ActionIcon
|
||||
icon="settings"
|
||||
iconProps={{ size: 'lg' }}
|
||||
tooltip={{
|
||||
label: t('common.configure', { postProcess: 'sentenceCase' }),
|
||||
}}
|
||||
variant="subtle"
|
||||
>
|
||||
<RiListSettingsLine size="1.1rem" />
|
||||
</Button>
|
||||
/>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<TableConfigDropdown type={type} />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
|
||||
import { Stack } from '@mantine/core';
|
||||
import { useRef } from 'react';
|
||||
|
||||
import { PlayQueueListControls } from './play-queue-list-controls';
|
||||
|
||||
import { PageHeader, Paper } from '/@/renderer/components';
|
||||
import { PageHeader } from '/@/renderer/components/page-header/page-header';
|
||||
import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
|
||||
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
|
||||
import { useWindowSettings } from '/@/renderer/store/settings.store';
|
||||
import { Box } from '/@/shared/components/box/box';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Song } from '/@/shared/types/domain-types';
|
||||
import { Platform } from '/@/shared/types/types';
|
||||
|
||||
|
|
@ -21,10 +22,10 @@ export const SidebarPlayQueue = () => {
|
|||
<VirtualGridContainer>
|
||||
{isWeb && (
|
||||
<Stack mr={isWeb ? '130px' : undefined}>
|
||||
<PageHeader backgroundColor="var(--titlebar-bg)" />
|
||||
<PageHeader />
|
||||
</Stack>
|
||||
)}
|
||||
<Paper
|
||||
<Box
|
||||
display={!isWeb ? 'flex' : undefined}
|
||||
h={!isWeb ? '65px' : undefined}
|
||||
>
|
||||
|
|
@ -32,7 +33,7 @@ export const SidebarPlayQueue = () => {
|
|||
tableRef={queueRef}
|
||||
type="sideQueue"
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
<PlayQueue
|
||||
ref={queueRef}
|
||||
type="sideQueue"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue