From a75eb0a5692f0f31b0b78ce4fbc2907f700ce520 Mon Sep 17 00:00:00 2001 From: Fabio Nettis Date: Thu, 16 May 2024 17:09:46 +0200 Subject: [PATCH] feat: add creation date to notes panel (#5432) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Adds a view for creation date and author to notes and tasks panel. Here is a preview of the new `ActivityCreationDate` component: ![image](https://github.com/twentyhq/twenty/assets/36916632/8adfa584-5f0c-464a-9d69-753f89c19c28) Closes #5424 ### Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Félix Malfait --- .../components/ActivityCreationDate.tsx | 43 +++++++++++++++++++ .../activities/components/ActivityEditor.tsx | 13 +++++- .../components/RightDrawerActivity.tsx | 2 +- .../components/MainNavigationDrawerItems.tsx | 8 +--- .../input/editor/components/BlockEditor.tsx | 10 +++++ 5 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx 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 0000000000..6c6f5e9b59 --- /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 cad9c66e2d..b560a76f3d 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 eaa50a218a..8e0a12c731 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 0067d6ceff..51885dd181 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 fc51383597..97a737a403 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 = ({