On Company Show, I can select an existing person and add it to the company (#1201)

* On Company Show, I can select an existing person and add it to the company

Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add excludePersonIds

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add hotkey support

* Fix popin placement and fix company show mobile

* Fix popin placement and fix company show mobile

---------

Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-08-17 03:47:14 +08:00
committed by GitHub
parent 5969f1cdd4
commit cd1bf14925
12 changed files with 144 additions and 24 deletions

View File

@ -35,11 +35,11 @@ const StyledTimelineContainer = styled.div`
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: 4px;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-start;
overflow-y: auto;
overflow-y: ${() => (useIsMobile() ? 'none' : 'auto')};
padding: 12px 16px 12px 16px;
padding: ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(4)};
`;
const StyledTimelineEmptyContainer = styled.div`
@ -48,7 +48,7 @@ const StyledTimelineEmptyContainer = styled.div`
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: 8px;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
`;
@ -81,7 +81,7 @@ const StyledTopActionBar = styled.div`
flex-direction: column;
left: 0px;
padding: 12px 16px 12px 16px;
position: sticky;
position: ${() => (useIsMobile() ? 'relative' : 'sticky')};
top: 0px;
`;

View File

@ -5,6 +5,7 @@ import { useCompleteTask } from '@/activities/hooks/useCompleteTask';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { IconNotes } from '@/ui/icon';
import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { Activity, User } from '~/generated/graphql';
import {
beautifyExactDateTime,
@ -65,7 +66,9 @@ const StyledCardContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
max-width: 100%;
padding: 4px 0px 20px 0px;
width: ${() => (useIsMobile() ? '100%' : '400px')};
`;
const StyledCard = styled.div`
@ -76,9 +79,7 @@ const StyledCard = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
max-width: 100%;
position: relative;
width: 400px;
width: calc(100% - ${({ theme }) => theme.spacing(4)});
`;
const StyledCardContent = styled.div`
@ -105,14 +106,14 @@ const StyledTooltip = styled(Tooltip)`
const StyledCardDetailsContainer = styled.div`
padding: ${({ theme }) => theme.spacing(2)};
width: 100%;
width: calc(100% - ${({ theme }) => theme.spacing(4)});
`;
const StyledTimelineItemContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
gap: 16px;
gap: ${({ theme }) => theme.spacing(4)};
`;
type OwnProps = {