a75eb0a569
## Description Adds a view for creation date and author to notes and tasks panel. Here is a preview of the new `ActivityCreationDate` component:  Closes #5424 ### Type of change <!-- Please delete options that are not relevant. --> - [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 <felix.malfait@gmail.com>
94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import { useRef } from 'react';
|
|
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';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
|
|
import { ActivityTitle } from './ActivityTitle';
|
|
|
|
import '@blocknote/core/style.css';
|
|
|
|
const StyledContainer = styled.div`
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledUpperPartContainer = styled.div`
|
|
align-items: flex-start;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
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;
|
|
background: ${({ theme }) => theme.background.secondary};
|
|
border-bottom: ${({ theme }) =>
|
|
useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: ${({ theme }) => theme.spacing(6)};
|
|
`;
|
|
|
|
type ActivityEditorProps = {
|
|
activityId: string;
|
|
showComment?: boolean;
|
|
fillTitleFromBody?: boolean;
|
|
};
|
|
|
|
export const ActivityEditor = ({
|
|
activityId,
|
|
showComment = true,
|
|
fillTitleFromBody = false,
|
|
}: ActivityEditorProps) => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<StyledContainer ref={containerRef}>
|
|
<StyledUpperPartContainer>
|
|
<StyledTopContainer>
|
|
<ActivityTypeDropdown activityId={activityId} />
|
|
<ActivityTitleEffect activityId={activityId} />
|
|
<StyledTitleContainer>
|
|
<ActivityTitle activityId={activityId} />
|
|
<ActivityCreationDate activityId={activityId} />
|
|
</StyledTitleContainer>
|
|
<ActivityEditorFields activityId={activityId} />
|
|
</StyledTopContainer>
|
|
</StyledUpperPartContainer>
|
|
<ActivityBodyEffect activityId={activityId} />
|
|
<ActivityBodyEditor
|
|
activityId={activityId}
|
|
fillTitleFromBody={fillTitleFromBody}
|
|
/>
|
|
{showComment && (
|
|
<ActivityComments
|
|
activityId={activityId}
|
|
scrollableContainerRef={containerRef}
|
|
/>
|
|
)}
|
|
</StyledContainer>
|
|
);
|
|
};
|