diff --git a/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx b/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx new file mode 100644 index 000000000..6c6f5e9b5 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx @@ -0,0 +1,43 @@ +import styled from '@emotion/styled'; +import { useRecoilState } from 'recoil'; + +import { Activity } from '@/activities/types/Activity'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; + +const StyledCreationDisplay = styled.span` + color: ${({ theme }) => theme.font.color.light}; + display: flex; + font-size: ${({ theme }) => theme.font.size.md}; + user-select: none; + width: 100%; +`; + +type ActivityCreationDateProps = { + activityId: string; +}; + +export const ActivityCreationDate = ({ + activityId, +}: ActivityCreationDateProps) => { + const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId)); + const activity = activityInStore as Activity; + + const beautifiedDate = activity.createdAt + ? beautifyPastDateRelativeToNow(activity.createdAt) + : null; + + const authorName = activity.author?.name + ? `${activity.author.name.firstName} ${activity.author.name.lastName}` + : null; + + if (!activity.createdAt || !authorName) { + return <>; + } + + return ( + + Created {beautifiedDate} by {authorName} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx index cad9c66e2..b560a76f3 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor'; import { ActivityBodyEffect } from '@/activities/components/ActivityBodyEffect'; import { ActivityComments } from '@/activities/components/ActivityComments'; +import { ActivityCreationDate } from '@/activities/components/ActivityCreationDate'; import { ActivityEditorFields } from '@/activities/components/ActivityEditorFields'; import { ActivityTitleEffect } from '@/activities/components/ActivityTitleEffect'; import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown'; @@ -31,6 +32,13 @@ const StyledUpperPartContainer = styled.div` justify-content: flex-start; `; +const StyledTitleContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: ${({ theme }) => theme.spacing(3)}; +`; + const StyledTopContainer = styled.div` align-items: flex-start; align-self: stretch; @@ -62,7 +70,10 @@ export const ActivityEditor = ({ - + + + + diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx index eaa50a218..8e0a12c73 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx +++ b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx @@ -21,7 +21,7 @@ type RightDrawerActivityProps = { export const RightDrawerActivity = ({ activityId, - showComment = true, + showComment = false, fillTitleFromBody = false, }: RightDrawerActivityProps) => { return ( diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index 0067d6cef..51885dd18 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -1,6 +1,6 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { IconCheckbox, IconInbox, IconSearch, IconSettings } from 'twenty-ui'; +import { IconCheckbox, IconSearch, IconSettings } from 'twenty-ui'; import { CurrentUserDueTaskCountEffect } from '@/activities/tasks/components/CurrentUserDueTaskCountEffect'; import { currentUserDueTaskCountState } from '@/activities/tasks/states/currentUserTaskCountState'; @@ -36,12 +36,6 @@ export const MainNavigationDrawerItems = () => { onClick={toggleCommandMenu} keyboard={['⌘', 'K']} /> - { diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx index fc5138359..97a737a40 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx @@ -30,6 +30,16 @@ const StyledEditor = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; font-style: normal !important; } + & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before { + font-style: normal; + } + & .mantine-ActionIcon-icon { + width: 20px; + } + & .bn-container .bn-drag-handle { + width: 20px; + height: 20px; + } `; export const BlockEditor = ({