From 8408cf6d19d56a9d59c8fff7809c4ff38dac88ae Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Wed, 7 Aug 2024 20:26:55 +0530 Subject: [PATCH] Added Side Panel compact header (#6560) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes issue #6487 Added a new prop, `isInRightDrawer` to both the `ShowPageSummaryCard` and `ShowPageRightContainer` components. This prop allows for different styles to be applied based on the specific needs of the drawer.. Rather than creating a new component, I opted to add this prop to avoid code duplication. However, if you would prefer a separate component for this functionality, I'm happy to make that adjustment—please just let me know! Also added `box-sizing: border-box` to `ShowPageSummaryCard` to make sure it aligns with figma designs. https://github.com/user-attachments/assets/38e8d85e-55d5-471e-884a-11c67467f56f --- .../files/components/Attachments.tsx | 3 +- .../components/RecordShowContainer.tsx | 3 +- .../ui/layout/page/ShowPageContainer.tsx | 3 +- .../components/ShowPageRightContainer.tsx | 25 +++++++++-- .../components/ShowPageSummaryCard.tsx | 41 +++++++++++-------- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx index 482b8e18f88f..c0bf6908e207 100644 --- a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx @@ -1,5 +1,5 @@ -import { ChangeEvent, useRef, useState } from 'react'; import styled from '@emotion/styled'; +import { ChangeEvent, useRef, useState } from 'react'; import { IconPlus } from 'twenty-ui'; import { SkeletonLoader } from '@/activities/components/SkeletonLoader'; @@ -33,7 +33,6 @@ const StyledFileInput = styled.input` const StyledDropZoneContainer = styled.div` height: 100%; - padding: ${({ theme }) => theme.spacing(6)}; `; export const Attachments = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index 602ea0caf01d..ae6a92be30c0 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -155,6 +155,7 @@ export const RecordShowContainer = ({ const summaryCard = isDefined(recordFromStore) ? ( - + {!isMobile && summaryCard} {!isMobile && fieldsBox} diff --git a/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx index ab9f308c5cd7..c241c44c0183 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx @@ -1,5 +1,5 @@ -import { ReactElement } from 'react'; import styled from '@emotion/styled'; +import { ReactElement } from 'react'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; @@ -16,6 +16,7 @@ const StyledInnerContainer = styled.div` display: flex; flex-direction: ${() => (useIsMobile() ? 'column' : 'row')}; width: 100%; + height: 100%; `; const StyledScrollWrapper = styled(ScrollWrapper)` diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index f35d34d0e617..96a129c122e5 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -29,6 +29,7 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>` flex-direction: column; justify-content: start; width: 100%; + height: 100%; `; const StyledTabListContainer = styled.div` @@ -40,6 +41,19 @@ const StyledTabListContainer = styled.div` height: 40px; `; +const StyledGreyBox = styled.div<{ isInRightDrawer: boolean }>` + background: ${({ theme, isInRightDrawer }) => + isInRightDrawer ? theme.background.secondary : ''}; + border: ${({ isInRightDrawer, theme }) => + isInRightDrawer ? `1px solid ${theme.border.color.medium}` : ''}; + border-radius: ${({ isInRightDrawer, theme }) => + isInRightDrawer ? theme.border.radius.md : ''}; + height: ${({ isInRightDrawer }) => (isInRightDrawer ? 'auto' : '100%')}; + + margin: ${({ isInRightDrawer, theme }) => + isInRightDrawer ? theme.spacing(4) : ''}; +`; + export const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list'; type ShowPageRightContainerProps = { @@ -151,7 +165,6 @@ export const ShowPageRightContainer = ({ hide: !shouldDisplayCalendarTab, }, ]; - const renderActiveTabContent = () => { switch (activeTabId) { case 'timeline': @@ -173,7 +186,12 @@ export const ShowPageRightContainer = ({ ) ); case 'fields': - return fieldsBox; + return ( + + {fieldsBox} + + ); + case 'tasks': return ; case 'notes': @@ -188,10 +206,8 @@ export const ShowPageRightContainer = ({ return <>; } }; - return ( - {summaryCard} + {summaryCard} {renderActiveTabContent()} ); diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 6210bee93365..3d228d5bd792 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -20,40 +20,45 @@ type ShowPageSummaryCardProps = { onUploadPicture?: (file: File) => void; title: ReactNode; loading: boolean; + isMobile?: boolean; }; -export const StyledShowPageSummaryCard = styled.div` +export const StyledShowPageSummaryCard = styled.div<{ + isMobile: boolean; +}>` align-items: center; display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing(3)}; - justify-content: center; + flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')}; + gap: ${({ theme, isMobile }) => + isMobile ? theme.spacing(2) : theme.spacing(3)}; + justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')}; padding: ${({ theme }) => theme.spacing(4)}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; - height: 127px; + height: ${({ isMobile }) => (isMobile ? '77px' : '127px')}; + box-sizing: border-box; `; -const StyledInfoContainer = styled.div` - align-items: center; +const StyledInfoContainer = styled.div<{ isMobile: boolean }>` + align-items: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')}; display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(1)}; width: 100%; `; -const StyledDate = styled.div` +const StyledDate = styled.div<{ isMobile: boolean }>` color: ${({ theme }) => theme.font.color.tertiary}; cursor: pointer; + padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)}; `; -const StyledTitle = styled.div` +const StyledTitle = styled.div<{ isMobile: boolean }>` color: ${({ theme }) => theme.font.color.primary}; display: flex; font-size: ${({ theme }) => theme.font.size.xl}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; - justify-content: center; - - width: 100%; + justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')}; + width: ${({ isMobile }) => (isMobile ? '' : '100%')}; `; const StyledAvatarWrapper = styled.div` @@ -97,13 +102,13 @@ export const ShowPageSummaryCard = ({ onUploadPicture, title, loading, + isMobile = false, }: ShowPageSummaryCardProps) => { const beautifiedCreatedAt = date !== '' ? beautifyPastDateRelativeToNow(date) : ''; const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : ''; const dateElementId = `date-id-${uuidV4()}`; const inputFileRef = useRef(null); - const onFileChange = (e: ChangeEvent) => { if (isDefined(e.target.files)) onUploadPicture?.(e.target.files[0]); }; @@ -114,13 +119,13 @@ export const ShowPageSummaryCard = ({ if (loading) return ( - + ); return ( - + - - {title} + + {title} {beautifiedCreatedAt && ( - + Added {beautifiedCreatedAt} )}