mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-27 03:33:21 +03:00
feat: Status tags can show loader to complement displayed text (#5137)
Resolves #5134 https://github.com/twentyhq/twenty/assets/16918891/48475f1b-a61f-4b87-8b9b-1271a183ac4b --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
parent
a283a3deed
commit
0ccbdacb5a
@ -17,6 +17,7 @@ export const SettingsAccountsSynchronizationStatus = ({
|
||||
return (
|
||||
<Status
|
||||
color={syncStatusOption?.color ?? 'gray'}
|
||||
isLoaderVisible={syncStatus === 'ONGOING' || syncStatus === 'PENDING'}
|
||||
text={syncStatusOption?.label ?? 'Not synced'}
|
||||
weight="medium"
|
||||
/>
|
||||
|
@ -1,11 +1,13 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Loader } from '@/ui/feedback/loader/components/Loader';
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
|
||||
|
||||
const StyledStatus = styled.h3<{
|
||||
color: ThemeColor;
|
||||
weight: 'regular' | 'medium';
|
||||
isLoaderVisible: boolean;
|
||||
}>`
|
||||
align-items: center;
|
||||
background: ${({ color, theme }) => theme.tag.background[color]};
|
||||
@ -19,7 +21,10 @@ const StyledStatus = styled.h3<{
|
||||
height: ${({ theme }) => theme.spacing(5)};
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 ${({ theme }) => theme.spacing(2)};
|
||||
padding: 0
|
||||
${({ theme, isLoaderVisible }) =>
|
||||
isLoaderVisible ? theme.spacing(1) : theme.spacing(2)}
|
||||
0 ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
&:before {
|
||||
background-color: ${({ color, theme }) => theme.tag.text[color]};
|
||||
@ -41,6 +46,7 @@ const StyledContent = styled.span`
|
||||
type StatusProps = {
|
||||
className?: string;
|
||||
color: ThemeColor;
|
||||
isLoaderVisible?: boolean;
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
weight?: 'regular' | 'medium';
|
||||
@ -49,6 +55,7 @@ type StatusProps = {
|
||||
export const Status = ({
|
||||
className,
|
||||
color,
|
||||
isLoaderVisible = false,
|
||||
text,
|
||||
onClick,
|
||||
weight = 'regular',
|
||||
@ -58,7 +65,9 @@ export const Status = ({
|
||||
color={themeColorSchema.catch('gray').parse(color)}
|
||||
onClick={onClick}
|
||||
weight={weight}
|
||||
isLoaderVisible={isLoaderVisible}
|
||||
>
|
||||
<StyledContent>{text}</StyledContent>
|
||||
{isLoaderVisible ? <Loader color={color} /> : null}
|
||||
</StyledStatus>
|
||||
);
|
||||
|
@ -1,7 +1,11 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const StyledLoaderContainer = styled.div`
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
|
||||
const StyledLoaderContainer = styled.div<{
|
||||
color?: ThemeColor;
|
||||
}>`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -9,20 +13,30 @@ const StyledLoaderContainer = styled.div`
|
||||
width: ${({ theme }) => theme.spacing(6)};
|
||||
height: ${({ theme }) => theme.spacing(3)};
|
||||
border-radius: ${({ theme }) => theme.border.radius.pill};
|
||||
border: 1px solid ${({ theme }) => theme.font.color.tertiary};
|
||||
border: 1px solid
|
||||
${({ color, theme }) =>
|
||||
color ? theme.tag.text[color] : theme.font.color.tertiary};
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const StyledLoader = styled(motion.div)`
|
||||
background-color: ${({ theme }) => theme.font.color.tertiary};
|
||||
const StyledLoader = styled(motion.div)<{
|
||||
color?: ThemeColor;
|
||||
}>`
|
||||
background-color: ${({ color, theme }) =>
|
||||
color ? theme.tag.text[color] : theme.font.color.tertiary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.pill};
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
`;
|
||||
|
||||
export const Loader = () => (
|
||||
<StyledLoaderContainer>
|
||||
type LoaderProps = {
|
||||
color?: ThemeColor;
|
||||
};
|
||||
|
||||
export const Loader = ({ color }: LoaderProps) => (
|
||||
<StyledLoaderContainer color={color}>
|
||||
<StyledLoader
|
||||
color={color}
|
||||
animate={{
|
||||
x: [-16, 0, 16],
|
||||
width: [8, 12, 8],
|
||||
|
Loading…
Reference in New Issue
Block a user