From 9618639744fa50949fd9790bc31e091f262c32c2 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Thu, 25 Jul 2024 17:29:46 +0530 Subject: [PATCH] Align Workspace Switcher with Breadcrumb by Adjusting Height (#6384) @Bonapara Issue #6375 This change makes sure the container height is 32px instead of 28px. should the container inside it should also be 32px, please refer video below for context https://github.com/user-attachments/assets/fe97f0de-e1fd-4fda-a9a7-e9585469c530 Also skeleton height is 20px (refer video below), the black component in the video is the skeleton for this particular component. What should be skeletons height? https://github.com/user-attachments/assets/0956c8d9-8e4e-4c20-bb71-7fb1e2cba4fd --------- Co-authored-by: Charles Bochet --- .../components/LeftPanelSkeletonLoader.tsx | 42 +++++++++++-------- ...ainNavigationDrawerItemsSkeletonLoader.tsx | 8 ++-- .../components/RightPanelSkeletonLoader.tsx | 9 ++-- .../components/UserOrMetadataLoader.tsx | 2 +- .../components/__stories__/perf/mock.ts | 1 + .../components/NavigationDrawerHeader.tsx | 2 +- .../constants/DesktopNavDrawerWidths.ts | 2 +- 7 files changed, 40 insertions(+), 26 deletions(-) diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index a6caf8861..9a94373ce 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -8,22 +8,25 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader'; const StyledAnimatedContainer = styled(motion.div)` + align-items: center; display: flex; justify-content: end; `; const StyledItemsContainer = styled.div` + align-items: center; display: flex; flex-direction: column; - gap: 32px; - margin-bottom: auto; - overflow-y: auto; + gap: 12px; height: calc(100dvh - 32px); - min-width: 216px; - max-width: 216px; + margin-bottom: auto; + max-width: 204px; + min-width: 204px; + overflow-y: auto; `; const StyledSkeletonContainer = styled.div` + align-items: center; display: flex; flex-direction: column; gap: 32px; @@ -32,9 +35,13 @@ const StyledSkeletonContainer = styled.div` const StyledSkeletonTitleContainer = styled.div` display: flex; flex-direction: column; - gap: 6px; - margin-left: 12px; - margin-top: 8px; + justify-content: center; + align-items: flex-start; + gap: 10px; + height: 32px; + + max-width: 196px; + min-width: 196px; `; export const LeftPanelSkeletonLoader = () => { @@ -54,17 +61,18 @@ export const LeftPanelSkeletonLoader = () => { }} > + + + + + - - - - - + diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx index b13b1bb88..2d660dfda 100644 --- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx @@ -1,13 +1,15 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui'; const StyledSkeletonContainer = styled.div` + align-items: flex-start; + display: flex; flex-direction: column; gap: 6px; - margin-left: 12px; - margin-top: 8px; + min-width: 196px; + max-width: 196px; `; export const MainNavigationDrawerItemsSkeletonLoader = ({ diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx index e42dc5fec..1c47a6cdc 100644 --- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx @@ -1,5 +1,5 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { BACKGROUND_LIGHT, BORDER_COMMON, @@ -45,8 +45,11 @@ const StyledRightPanelContainer = styled.div` const StyledRightPanelFlexContainer = styled.div` display: flex; - margin-top: 12px; - margin-bottom: 14px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + height: 32px; + margin-bottom: 12px; `; const StyledSkeletonHeaderLoader = () => { diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx index da129175e..20eedb836 100644 --- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx +++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx @@ -14,7 +14,7 @@ const StyledContainer = styled.div` height: 100dvh; min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px; width: 100%; - padding: 12px 8px 12px; + padding: 12px 8px 12px 8px; overflow: hidden; @media (max-width: ${MOBILE_VIEWPORT}px) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts index cc882ea44..6ed909220 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts @@ -861,6 +861,7 @@ export const mockPerformance = { fieldDefinition: { fieldMetadataId: '4e79f0b7-d100-4e89-a07b-315a710b8059', primaryLinkLabel: 'Company', + label: 'Company', metadata: { fieldName: 'company', placeHolder: 'Company', diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 9ba91a1c5..ddea26d1a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx @@ -16,7 +16,7 @@ const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>` !isMultiWorkspace ? theme.spacing(2) : null}; padding: ${({ theme, isMultiWorkspace }) => !isMultiWorkspace ? theme.spacing(1) : null}; - height: ${({ theme }) => theme.spacing(7)}; + height: ${({ theme }) => theme.spacing(8)}; user-select: none; `; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts index dae34ed19..fe5462310 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts @@ -1,3 +1,3 @@ export const DESKTOP_NAV_DRAWER_WIDTHS = { - menu: 236, + menu: 220, };