diff --git a/front/src/modules/comments/components/Timeline.tsx b/front/src/modules/comments/components/Timeline.tsx
index 9fbda44e6b3..2170efa89e0 100644
--- a/front/src/modules/comments/components/Timeline.tsx
+++ b/front/src/modules/comments/components/Timeline.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from 'react-tooltip';
import styled from '@emotion/styled';
import { TableActionBarButtonToggleComments } from '@/ui/components/table/action-bar/TableActionBarButtonOpenComments';
-import { IconNotes, IconPlus } from '@/ui/icons/index';
+import { IconCirclePlus, IconNotes } from '@/ui/icons/index';
import {
beautifyExactDate,
beautifyPastDateRelativeToNow,
@@ -18,6 +18,15 @@ import { useOpenCreateCommentThreadDrawer } from '../hooks/useOpenCreateCommentT
import { CommentableEntity } from '../types/CommentableEntity';
import { CommentThreadForDrawer } from '../types/CommentThreadForDrawer';
+const StyledMainContainer = styled.div`
+ align-items: flex-start;
+ align-self: stretch;
+ display: flex;
+ flex: 1 0 0;
+ flex-direction: column;
+ justify-content: center;
+`;
+
const StyledTimelineContainer = styled.div`
align-items: center;
align-self: stretch;
@@ -27,7 +36,7 @@ const StyledTimelineContainer = styled.div`
gap: 4px;
justify-content: flex-start;
overflow-y: auto;
- padding: 64px 16px 12px 16px;
+ padding: 12px 16px 12px 16px;
`;
const StyledTimelineEmptyContainer = styled.div`
@@ -64,6 +73,7 @@ const StyledTimelineItemContainer = styled.div`
const StyledIconContainer = styled.div`
align-items: center;
+ color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
height: 20px;
justify-content: center;
@@ -114,7 +124,7 @@ const StyledCardContainer = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
- padding: 20px 0px 4px 0px;
+ padding: 4px 0px 20px 0px;
`;
const StyledCard = styled.div`
@@ -163,12 +173,18 @@ const StyledTooltip = styled(Tooltip)`
`;
const StyledTopActionBar = styled.div`
+ //backdrop-filter: blur(5px);
align-items: flex-start;
align-self: stretch;
+ backdrop-filter: blur(5px);
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+ border-top-right-radius: 8px;
display: flex;
flex-direction: column;
- position: absolute;
- top: 12px;
+ left: 0px;
+ padding: 12px 16px 12px 16px;
+ position: sticky;
+ top: 0px;
`;
export function Timeline({ entity }: { entity: CommentableEntity }) {
@@ -203,11 +219,11 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
}
return (
-
+
-
+
+
+ {commentThreads.map((commentThread) => {
+ const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
+ commentThread.createdAt,
+ );
+ const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
- {commentThreads.map((commentThread) => {
- const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
- commentThread.createdAt,
- );
- const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
-
- return (
-
-
-
-
-
-
-
- {commentThread.author.firstName}{' '}
- {commentThread.author.lastName}
-
- created a note
-
-
-
-
-
-
-
-
-
- openCommentThreadRightDrawer(commentThread.id)}
- >
- {commentThread.title}
-
- {JSON.parse(commentThread.body ?? '')[0].content[0]?.text}
-
-
-
-
-
- );
- })}
-
+ const body = JSON.parse(commentThread.body ?? '')[0].content[0]?.text;
+ return (
+
+
+
+
+
+
+
+ {commentThread.author.firstName}{' '}
+ {commentThread.author.lastName}
+
+ created a note
+
+
+
+
+
+
+
+
+
+
+ openCommentThreadRightDrawer(commentThread.id)
+ }
+ >
+
+ {commentThread.title ? commentThread.title : '(No title)'}
+
+
+ {body ? body : '(No content)'}
+
+
+
+
+
+ );
+ })}
+
+
);
}
diff --git a/front/src/modules/ui/icons/index.ts b/front/src/modules/ui/icons/index.ts
index 033e5d53608..6440036015b 100644
--- a/front/src/modules/ui/icons/index.ts
+++ b/front/src/modules/ui/icons/index.ts
@@ -32,3 +32,4 @@ export { IconUpload } from '@tabler/icons-react';
export { IconFileUpload } from '@tabler/icons-react';
export { IconChevronsRight } from '@tabler/icons-react';
export { IconNotes } from '@tabler/icons-react';
+export { IconCirclePlus } from '@tabler/icons-react';
diff --git a/front/src/modules/ui/layout/containers/ContentContainer.tsx b/front/src/modules/ui/layout/containers/ContentContainer.tsx
index 304db8a6c10..ba58ca727a7 100644
--- a/front/src/modules/ui/layout/containers/ContentContainer.tsx
+++ b/front/src/modules/ui/layout/containers/ContentContainer.tsx
@@ -8,6 +8,7 @@ import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpen
type OwnProps = {
children: JSX.Element;
topMargin?: number;
+ withPanel?: boolean;
};
const MainContainer = styled.div<{ topMargin: number }>`
@@ -33,13 +34,17 @@ const LeftContainer = styled.div`
width: 100%;
`;
-export function ContentContainer({ children, topMargin }: OwnProps) {
+export function ContentContainer({
+ children,
+ topMargin,
+ withPanel = true,
+}: OwnProps) {
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
return (
- {children}
+ {withPanel ? {children} : children}
diff --git a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
index 02f106d72b0..b3fe1fb3b10 100644
--- a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
+++ b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
@@ -10,6 +10,7 @@ type OwnProps = {
title: string;
icon: ReactNode;
onAddButtonClick?: () => void;
+ withPanel?: boolean;
};
const StyledContainer = styled.div`
@@ -23,11 +24,15 @@ export function WithTopBarContainer({
title,
icon,
onAddButtonClick,
+ withPanel = true,
}: OwnProps) {
return (
-
+
{children}
diff --git a/front/src/modules/ui/layout/show-pages/ShowPageLayout.tsx b/front/src/modules/ui/layout/show-pages/ShowPageLayout.tsx
index fd65984fa25..d7960dc0bcd 100644
--- a/front/src/modules/ui/layout/show-pages/ShowPageLayout.tsx
+++ b/front/src/modules/ui/layout/show-pages/ShowPageLayout.tsx
@@ -58,6 +58,7 @@ export function ShowPageLayout({
}
+ withPanel={false}
>
{leftSide}