antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-08 05:31:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 • committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/renderer/features/lyrics/lyrics-actions.tsx
View file

@ -1,9 +1,6 @@
import { Box, Center, Group, Select, SelectItem } from '@mantine/core';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
import { Button, NumberInput, Tooltip } from '/@/renderer/components';
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
import {
useCurrentSong,
@ -11,11 +8,18 @@ import {
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Center } from '/@/shared/components/center/center';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Select } from '/@/shared/components/select/select';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
import { LyricsOverride } from '/@/shared/types/domain-types';
interface LyricsActionsProps {
index: number;
languages: SelectItem[];
languages: { label: string; value: string }[];
onRemoveLyric: () => void;
onResetLyric: () => void;
@ -38,7 +42,7 @@ export const LyricsActions = ({
const { setSettings } = useSettingsStoreActions();
const { delayMs, sources } = useLyricsSettings();
const handleLyricOffset = (e: number) => {
const handleLyricOffset = (e: number | string) => {
setSettings({
lyrics: {
...useSettingsStore.getState().lyrics,
@ -51,7 +55,7 @@ export const LyricsActions = ({
const isDesktop = isElectron();
return (
<Box style={{ position: 'relative', width: '100%' }}>
<div style={{ position: 'relative', width: '100%' }}>
{languages.length > 1 && (
<Center>
<Select
@ -64,7 +68,7 @@ export const LyricsActions = ({
</Center>
)}
<Group position="center">
<Group justify="center">
{isDesktop && sources.length ? (
<Button
disabled={isActionsDisabled}
@ -81,13 +85,12 @@ export const LyricsActions = ({
{t('common.search', { postProcess: 'titleCase' })}
</Button>
) : null}
<Button
<ActionIcon
aria-label="Decrease lyric offset"
icon="minus"
onClick={() => handleLyricOffset(delayMs - 50)}
variant="subtle"
>
<RiSubtractFill />
</Button>
/>
<Tooltip
label={t('setting.lyricOffset', { postProcess: 'sentenceCase' })}
openDelay={500}
@ -100,13 +103,12 @@ export const LyricsActions = ({
width={55}
/>
</Tooltip>
<Button
<ActionIcon
aria-label="Increase lyric offset"
icon="plus"
onClick={() => handleLyricOffset(delayMs + 50)}
variant="subtle"
>
<RiAddFill />
</Button>
/>
{isDesktop && sources.length ? (
<Button
disabled={isActionsDisabled}
@ -119,7 +121,7 @@ export const LyricsActions = ({
) : null}
</Group>
<Box style={{ position: 'absolute', right: 0, top: 0 }}>
<div style={{ position: 'absolute', right: 0, top: 0 }}>
{isDesktop && sources.length ? (
<Button
disabled={isActionsDisabled}
@ -130,9 +132,9 @@ export const LyricsActions = ({
{t('common.clear', { postProcess: 'sentenceCase' })}
</Button>
) : null}
</Box>
</div>
<Box style={{ position: 'absolute', right: 0, top: -50 }}>
<div style={{ position: 'absolute', right: 0, top: -50 }}>
{isDesktop && sources.length ? (
<Button
disabled={isActionsDisabled}
@ -143,7 +145,7 @@ export const LyricsActions = ({
{t('common.translation', { postProcess: 'sentenceCase' })}
</Button>
) : null}
</Box>
</Box>
</div>
</div>
);
};