diff --git a/front/src/modules/settings/data-model/assets/build-your-business-logic.jpg b/front/src/modules/settings/data-model/assets/build-your-business-logic.jpg new file mode 100644 index 000000000..d5b17783f Binary files /dev/null and b/front/src/modules/settings/data-model/assets/build-your-business-logic.jpg differ diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx new file mode 100644 index 000000000..d5c89c25e --- /dev/null +++ b/front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx @@ -0,0 +1,58 @@ +import { useState } from 'react'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { IconX } from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut'; +import { cookieStorage } from '~/utils/cookie-storage'; + +import CoverImage from '../assets/build-your-business-logic.jpg'; + +const StyledCoverImageContainer = styled.div` + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.md}; + overflow: hidden; + position: relative; + width: 100%; +`; + +const StyledCoverImage = styled.img` + height: 100%; + object-fit: cover; + width: 100%; +`; + +const StyledLighIconButton = styled(LightIconButton)` + position: absolute; + right: ${({ theme }) => theme.spacing(1)}; + top: ${({ theme }) => theme.spacing(1)}; +`; + +export const SettingsObjectCoverImage = () => { + const theme = useTheme(); + + const [cookieState, setCookieState] = useState( + cookieStorage.getItem('settings-object-cover-image'), + ); + + return ( + + + + { + cookieStorage.setItem('settings-object-cover-image', 'closed'); + setCookieState('closed'); + }} + /> + + + ); +}; diff --git a/front/src/modules/ui/theme/constants/animation.ts b/front/src/modules/ui/theme/constants/animation.ts index ac91187d1..04adcee2b 100644 --- a/front/src/modules/ui/theme/constants/animation.ts +++ b/front/src/modules/ui/theme/constants/animation.ts @@ -5,3 +5,5 @@ export const animation = { normal: 0.3, }, }; + +export type AnimationDuration = 'instant' | 'fast' | 'normal'; diff --git a/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx index 9078db812..3b6fb30a8 100644 --- a/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx +++ b/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx @@ -1,19 +1,26 @@ +import { useTheme } from '@emotion/react'; import { motion } from 'framer-motion'; +import { AnimationDuration } from '@/ui/theme/constants/animation'; + type AnimatedEaseInProps = Omit< React.ComponentProps, 'initial' | 'animated' | 'transition' > & { - duration?: number; + duration?: AnimationDuration; }; export const AnimatedEaseIn = ({ children, - duration = 0.3, + duration = 'normal', }: AnimatedEaseInProps) => { + const theme = useTheme(); const initial = { opacity: 0 }; const animate = { opacity: 1 }; - const transition = { ease: 'linear', duration }; + const transition = { + ease: 'linear', + duration: theme.animation.duration[duration], + }; return ( diff --git a/front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx new file mode 100644 index 000000000..cb7512f85 --- /dev/null +++ b/front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx @@ -0,0 +1,42 @@ +import { useTheme } from '@emotion/react'; +import { AnimatePresence, motion } from 'framer-motion'; + +import { AnimationDuration } from '@/ui/theme/constants/animation'; + +type AnimatedFadeOutProps = { + isOpen: boolean; + children: React.ReactNode; + duration?: AnimationDuration; + marginBottom?: string; + marginTop?: string; +}; + +export const AnimatedFadeOut = ({ + isOpen, + children, + duration = 'normal', + marginBottom, + marginTop, +}: AnimatedFadeOutProps) => { + const theme = useTheme(); + return ( + + {isOpen && ( + + {children} + + )} + + ); +}; diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx index 352898657..e447861cd 100644 --- a/front/src/pages/settings/data-model/SettingsObjects.tsx +++ b/front/src/pages/settings/data-model/SettingsObjects.tsx @@ -8,6 +8,7 @@ import { activeObjectItems, disabledObjectItems, } from '@/settings/data-model/constants/mockObjects'; +import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage'; import { IconChevronRight, IconDotsVertical, @@ -76,52 +77,28 @@ export const SettingsObjects = () => { }} /> -
- - - - Name - Type - Fields - Instances - - - - {activeObjectItems.map((objectItem) => ( - - navigate( - `/settings/objects/${objectItem.name.toLowerCase()}`, - ) - } - > - - - {objectItem.name} - - - {objectItem.type === 'standard' ? ( - - ) : ( - - )} - - {objectItem.fields} - {objectItem.instances} - - - - - ))} - - {!!disabledObjectItems.length && ( - - {disabledObjectItems.map((objectItem) => ( - +
+ +
+ +
+ + Name + Type + Fields + Instances + + + + {activeObjectItems.map((objectItem) => ( + + navigate( + `/settings/objects/${objectItem.name.toLowerCase()}`, + ) + } + > {objectItem.name} @@ -136,7 +113,7 @@ export const SettingsObjects = () => { {objectItem.fields} {objectItem.instances} - @@ -144,9 +121,38 @@ export const SettingsObjects = () => { ))} - )} -
-
+ {!!disabledObjectItems.length && ( + + {disabledObjectItems.map((objectItem) => ( + + + + {objectItem.name} + + + {objectItem.type === 'standard' ? ( + + ) : ( + + )} + + {objectItem.fields} + + {objectItem.instances} + + + + + + ))} + + )} + + + );