twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 09:02:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move trash icon to the top bar of right drawer (#1014)

Browse Source 
* Move trash icon to the top bar of right drawer

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

* Fix background

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

* Refactor the code

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

---------

Co-authored-by: Matheus <matheus_benini@hotmail.com>
This commit is contained in:
gitstart-twenty 2023-08-02 13:10:02 +08:00 committed by GitHub
parent 55f1e2a5bb
commit 991cadbe48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/modules/activities/components/ActivityEditor.tsx
View File

@ -21,7 +21,6 @@ import { debounce } from '~/utils/debounce';
import { ActivityAssigneeEditableField } from '../editable-fields/components/ActivityAssigneeEditableField';
import { ActivityRelationEditableField } from '../editable-fields/components/ActivityRelationEditableField';
import { ActivityActionBar } from '../right-drawer/components/ActivityActionBar';
import { CommentForDrawer } from '../types/CommentForDrawer';
import { ActivityTitle } from './ActivityTitle';
@ -59,14 +58,6 @@ const StyledTopContainer = styled.div`
padding: 24px 24px 24px 48px;
`;
const StyledTopActionsContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
`;
type OwnProps = {
activity: Pick<
Activity,
@ -155,10 +146,7 @@ export function ActivityEditor({
<StyledContainer>
<StyledUpperPartContainer>
<StyledTopContainer>
<StyledTopActionsContainer>
<ActivityTypeDropdown activity={activity} />
<ActivityActionBar activityId={activity?.id ?? ''} />
</StyledTopActionsContainer>
<ActivityTitle
title={title ?? ''}
completed={!!completedAt}

9
front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
View File

@ -6,14 +6,14 @@ import { useRecoilState } from 'recoil';
import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
import { GET_COMPANIES } from '@/companies/queries';
import { GET_PEOPLE } from '@/people/queries';
import { Button, ButtonVariant } from '@/ui/button/components/Button';
import { IconButton } from '@/ui/button/components/IconButton';
import { IconTrash } from '@/ui/icon';
import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
import { useDeleteActivityMutation } from '~/generated/graphql';
const StyledContainer = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
`;
type OwnProps = {
@ -39,12 +39,11 @@ export function ActivityActionBar({ activityId }: OwnProps) {
return (
<StyledContainer>
<Button
<IconButton
icon={
<IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
}
onClick={deleteActivity}
variant={ButtonVariant.Tertiary}
/>
</StyledContainer>
);

13
front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx
View File

@ -1,5 +1,8 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
@ -15,19 +18,27 @@ const StyledRightDrawerTopBar = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(1)};
height: 56px;
justify-content: flex-start;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const TopBarWrapper = styled.div`
display: flex;
`;
export function RightDrawerTopBar() {
const isMobile = useIsMobile();
const activityId = useRecoilValue(viewableActivityIdState);
return (
<StyledRightDrawerTopBar>
<TopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</TopBarWrapper>
<ActivityActionBar activityId={activityId ?? ''} />
</StyledRightDrawerTopBar>
);
}