admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Object Alternative view (#5356)

Browse Source 
Current state:

<img width="704" alt="Bildschirmfoto 2024-05-11 um 17 57 33"
src="https://github.com/twentyhq/twenty/assets/48770548/c979f6fd-083e-40d3-8dbb-c572229e0da3">



I have some things im not really happy with right now:

* If I have different connections it would be weird to display a one_one
or many_one connection differently
* The edges overlay always at one hand at the source/target (also being
a problem with the 3 dots vs 1 dot)
* I would have to do 4 versions of the 3 dot marker variant as an svg
with exactly the same width as the edges wich is not as easy as it seems
:)
* The initial layout is not really great - I know dagre or elkjs could
solve this but maybe there is a better solution ...


If someone has a good idea for one or more of the problems im happy to
integrate them ;)

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
brendanlaschke
2024-05-25 10:38:27 +02:00
committed by GitHub
parent 9080981990
commit 1c867d49a1
13 changed files with 1166 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
View File

@ -1,12 +1,8 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconX } from 'twenty-ui';
import { IconEye } from 'twenty-ui';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Button } from '@/ui/input/button/components/Button';
import { Card } from '@/ui/layout/card/components/Card';
import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut';
import { cookieStorage } from '~/utils/cookie-storage';
import DarkCoverImage from '../assets/cover-dark.png';
import LightCoverImage from '../assets/cover-light.png';
@ -24,45 +20,23 @@ const StyledCoverImageContainer = styled(Card)`
height: 153px;
justify-content: center;
position: relative;
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const StyledTitle = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
const StyledButtonContainer = styled.div`
padding-top: ${({ theme }) => theme.spacing(5)};
`;
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 (
<AnimatedFadeOut
isOpen={cookieState !== 'closed'}
marginBottom={theme.spacing(8)}
>
<StyledCoverImageContainer>
<StyledTitle>Build your business logic</StyledTitle>
<StyledLighIconButton
Icon={IconX}
accent="tertiary"
<StyledCoverImageContainer>
<StyledButtonContainer>
<Button
Icon={IconEye}
title="Visualize"
size="small"
onClick={() => {
cookieStorage.setItem('settings-object-cover-image', 'closed');
setCookieState('closed');
}}
/>
</StyledCoverImageContainer>
</AnimatedFadeOut>
to="/settings/objects/overview"
></Button>
</StyledButtonContainer>
</StyledCoverImageContainer>
);
};