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

Optimize current song image layout transition

Browse source
This commit is contained in:
jeffvli 2023-01-06 14:27:31 -08:00
parent cb823d94e5
commit 3cf7127f56
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/player/components/left-controls.tsx
View file

@ -137,7 +137,7 @@ export const LeftControls = () => {
</ImageWrapper> </ImageWrapper>
)} )}
</AnimatePresence> </AnimatePresence>
<MetadataStack layout> <MetadataStack layout="position">
<LineItem> <LineItem>
<Text <Text
$link $link

11
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -4,7 +4,7 @@ import { closeAllModals, openModal } from '@mantine/modals';
import { SpotlightProvider } from '@mantine/spotlight'; import { SpotlightProvider } from '@mantine/spotlight';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { BsCollection } from 'react-icons/bs'; import { BsCollection } from 'react-icons/bs';
import { Button, ScrollArea, TextInput } from '/@/renderer/components'; import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md'; import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
import { import {
RiAddFill, RiAddFill,
@ -124,7 +124,8 @@ export const Sidebar = () => {
justify="space-between" justify="space-between"
spacing={0} spacing={0}
> >
<Stack <MotionStack
layout="position"
spacing={0} spacing={0}
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }} sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
> >
@ -329,16 +330,16 @@ export const Sidebar = () => {
</Accordion> </Accordion>
</Stack> </Stack>
</ScrollArea> </ScrollArea>
</Stack> </MotionStack>
<AnimatePresence <AnimatePresence
initial={false} initial={false}
mode="wait" mode="popLayout"
> >
{showImage && ( {showImage && (
<ImageContainer <ImageContainer
key="sidebar-image" key="sidebar-image"
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }} exit={{ opacity: 0, y: 200 }}
height={sidebar.leftWidth} height={sidebar.leftWidth}
initial={{ opacity: 0, y: 200 }} initial={{ opacity: 0, y: 200 }}
to={AppRoute.NOW_PLAYING} to={AppRoute.NOW_PLAYING}