aeed1c9f15
Closes https://github.com/twentyhq/core-team-issues/issues/406 - Added animation on the Icon (The dots rotate and transform into an a cross) - Introduced a new component `AnimatedButton`. All the button styling could be extracted to another file so we don't duplicate the code, but since `AnimatedLightIconButton` duplicates the style from `LightIconButton`, I did the same here. - Added an animate presence component on the command menu to have a smooth transition from `open` to `close` state - Merged the open and close command menu button - For all the pages that are not an index page or a record page, we want the old behavior because there is no button in the page header to open the command menu # Before https://github.com/user-attachments/assets/5ec7d9eb-9d8b-4838-af1b-c04382694342 # After https://github.com/user-attachments/assets/f700deec-1c52-4afd-b294-f9ee7b9206e9
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
|
|
import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
|
|
import { COMMAND_MENU_PAGES_CONFIG } from '@/command-menu/constants/CommandMenuPagesConfig';
|
|
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { motion } from 'framer-motion';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared';
|
|
|
|
const StyledCommandMenuContent = styled.div`
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
`;
|
|
|
|
export const CommandMenuRouter = () => {
|
|
const commandMenuPage = useRecoilValue(commandMenuPageState);
|
|
|
|
const commandMenuPageComponent = isDefined(commandMenuPage) ? (
|
|
COMMAND_MENU_PAGES_CONFIG.get(commandMenuPage)
|
|
) : (
|
|
<></>
|
|
);
|
|
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<CommandMenuContainer>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{
|
|
duration: theme.animation.duration.instant,
|
|
delay: 0.1,
|
|
}}
|
|
>
|
|
<CommandMenuTopBar />
|
|
</motion.div>
|
|
<StyledCommandMenuContent>
|
|
{commandMenuPageComponent}
|
|
</StyledCommandMenuContent>
|
|
</CommandMenuContainer>
|
|
);
|
|
};
|