twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-10-04 21:07:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add remote object integration preview (#4614)

Browse Source 
Closes #4548
This commit is contained in:
Thaïs 2024-03-26 10:02:25 +01:00 committed by GitHub
parent d4f6ffdf62
commit 17bf315a1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 111 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/settings/integrations/assets/preview-background.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 512 144">
<rect width="539" height="143" x="-13.5" y=".5" fill="url(#a)" fill-opacity=".05" rx="7.5"/>
<rect width="539" height="143" x="-13.5" y=".5" fill="url(#b)" rx="7.5"/>
<rect width="539" height="143" x="-13.5" y=".5" stroke="#EBEBEB" rx="7.5"/>
<defs>
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="matrix(270 0 0 487.572 256 72)" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCFCFC" stop-opacity="0"/>
<stop offset="1" stop-color="#F8F8F8" stop-opacity=".9"/>
</radialGradient>
<pattern id="a" width=".044" height=".167" patternContentUnits="objectBoundingBox">
<use xlink:href="#c" transform="scale(.00035 .0013)"/>
</pattern>
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7d2xDcAgDABBO/vvTETLCvfX0aKX5c47rvO8d0DfhFYAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBw92L2mbCaALgCwBUAbsf17j7kXzQBcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgD3A+UEA/3CEUcsAAAAAElFTkSuQmCC" id="c" width="128" height="128"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
packages/twenty-front/src/modules/settings/integrations/assets/sync.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 126 23">
<path stroke="#000" stroke-dasharray="4.71 4.71" stroke-linecap="round" stroke-width="1.768" d="M125 11H1"/>
<g filter="url(#a)">
<circle cx="63" cy="11" r="10.667" fill="#fff" style="mix-blend-mode:normal"/>
<circle cx="63" cy="11" r="10.203" stroke="#000" stroke-width=".928"/>
</g>
<path fill="#000" d="M60.38 8.425a3.758 3.758 0 0 1 5.223-.022l-.955.935a.54.54 0 0 0-.12.597c.085.205.29.337.514.337h2.968a.55.55 0 0 0 .557-.547V6.811a.546.546 0 0 0-.343-.506.565.565 0 0 0-.608.119l-.964.947c-2.032-1.97-5.304-1.963-7.323.023a5.06 5.06 0 0 0-1.225 1.908.725.725 0 0 0 .453.929.746.746 0 0 0 .946-.444 3.6 3.6 0 0 1 .876-1.362Zm-2.944 3.85v2.915c0 .221.135.422.344.506a.565.565 0 0 0 .607-.118l.965-.948c2.031 1.97 5.303 1.963 7.323-.023a5.077 5.077 0 0 0 1.227-1.905.725.725 0 0 0-.453-.93.746.746 0 0 0-.946.445 3.598 3.598 0 0 1-.876 1.361 3.758 3.758 0 0 1-5.225.023l.953-.938a.54.54 0 0 0 .12-.597.556.556 0 0 0-.514-.337h-2.968a.55.55 0 0 0-.556.547Z"/>
<defs>
<filter id="a" width="22.261" height="22.261" x="51.406" y=".333" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feOffset dx="-.93" dy=".928"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend in="SourceGraphic" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

77
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx Normal file
View File

@ -0,0 +1,77 @@
import styled from '@emotion/styled';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import PreviewBackgroundImage from '../assets/preview-background.svg';
import SyncImage from '../assets/sync.svg?react';
type SettingsIntegrationPreviewProps = {
integrationLogoUrl: string;
};
const StyledCard = styled(Card)`
border: 0;
`;
const StyledCardContent = styled(CardContent)`
background-image: url(${PreviewBackgroundImage});
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(28)};
`;
const StyledLogosContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
gap: ${({ theme }) => theme.spacing(4)};
`;
const StyledIntegrationLogoContainer = styled.div`
align-items: center;
display: flex;
height: ${({ theme }) => theme.spacing(16)};
justify-content: center;
width: ${({ theme }) => theme.spacing(16)};
`;
const StyledIntegrationLogo = styled.img`
height: 100%;
`;
const StyledTwentyLogo = styled.img`
height: ${({ theme }) => theme.spacing(12)};
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledSyncImage = styled(SyncImage)`
width: ${({ theme }) => theme.spacing(31)};
`;
const StyledLabel = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.spacing(6)};
`;
export const SettingsIntegrationPreview = ({
integrationLogoUrl,
}: SettingsIntegrationPreviewProps) => (
<StyledCard>
<StyledCardContent>
<StyledLogosContainer>
<StyledIntegrationLogoContainer>
<StyledIntegrationLogo alt="" src={integrationLogoUrl} />
</StyledIntegrationLogoContainer>
<StyledSyncImage />
<StyledTwentyLogo alt="" src="/images/integrations/twenty-logo.svg" />
</StyledLogosContainer>
<StyledLabel>Import your tables as remote objects</StyledLabel>
</StyledCardContent>
</StyledCard>
);

4
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
View File

@ -2,6 +2,7 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
@ -46,6 +47,9 @@ export const SettingsIntegrationDetail = () => {
{ children: integration.text },
]}
/>
<SettingsIntegrationPreview
integrationLogoUrl={integration.from.image}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);