From 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sat, 8 Jul 2023 22:11:02 +0200 Subject: [PATCH] Improve styling --- .../modules/comments/components/Timeline.tsx | 132 ++++++++++-------- front/src/modules/ui/icons/index.ts | 1 + .../ui/layout/containers/ContentContainer.tsx | 9 +- .../layout/containers/WithTopBarContainer.tsx | 7 +- .../ui/layout/show-pages/ShowPageLayout.tsx | 1 + 5 files changed, 92 insertions(+), 58 deletions(-) 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 - - - {beautifiedCreatedAt} ago - - - - - - - - - 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 + + + {beautifiedCreatedAt} ago + + + + + + + + + + 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}