From fcdb77c6422df74a8734e8b075a8ebb4a9c6a782 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 19 Dec 2024 13:24:34 +0530 Subject: [PATCH 1/7] fix --- .../components/MainNavigationDrawerItems.tsx | 14 +++++++---- .../components/NavigationDrawer.tsx | 2 +- .../components/NavigationDrawerSection.tsx | 24 ++++++++++++++++++- .../scroll/components/ScrollWrapper.tsx | 13 +++------- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index da9d151313bb..514a193c834d 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -19,6 +19,9 @@ import styled from '@emotion/styled'; const StyledMainSection = styled(NavigationDrawerSection)` min-height: fit-content; `; +const StyledInnerContainer = styled.div` + height: 100%; +`; export const MainNavigationDrawerItems = () => { const isMobile = useIsMobile(); @@ -60,12 +63,13 @@ export const MainNavigationDrawerItems = () => { contextProviderName="navigationDrawer" componentInstanceId={`scroll-wrapper-navigation-drawer`} defaultEnableXScroll={false} - scrollHide={true} > - - - - + + + + + + ); diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index eed58ea01fda..823fc3d4a007 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -43,7 +43,7 @@ const StyledContainer = styled.div<{ ? theme.spacing(3, 8) : theme.spacing(3, 8, 4, 0) : theme.spacing(3, 2, 4)}; - + padding-right: 0px; @media (max-width: ${MOBILE_VIEWPORT}px) { width: 100%; padding-left: 20px; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx index 9de5b7004fe7..4e3711716a6c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { useIsMobile } from 'twenty-ui'; const StyledSection = styled.div` display: flex; @@ -9,4 +10,25 @@ const StyledSection = styled.div` flex-shrink: 1; `; -export { StyledSection as NavigationDrawerSection }; +const StyledSectionInnerContainerMinusScrollPadding = styled.div<{ + isMobile: boolean; +}>` + width: calc( + 100% - ${({ isMobile, theme }) => (isMobile ? 0 : theme.spacing(2))} + ); +`; + +export const NavigationDrawerSection = ({ + children, +}: { + children: React.ReactNode; +}) => { + const isMobile = useIsMobile(); + return ( + + + {children} + + + ); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index 597ea6fcd662..fd27680f8f6e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -15,14 +15,13 @@ import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/stat import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import 'overlayscrollbars/overlayscrollbars.css'; -const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>` +const StyledScrollWrapper = styled.div` display: flex; height: 100%; width: 100%; .os-scrollbar-handle { - background-color: ${({ theme, scrollHide }) => - scrollHide ? 'transparent' : theme.border.color.medium}; + background-color: ${({ theme }) => theme.border.color.medium}; } `; @@ -36,7 +35,6 @@ export type ScrollWrapperProps = { defaultEnableXScroll?: boolean; defaultEnableYScroll?: boolean; contextProviderName: ContextProviderName; - scrollHide?: boolean; componentInstanceId: string; }; @@ -47,7 +45,6 @@ export const ScrollWrapper = ({ defaultEnableXScroll = true, defaultEnableYScroll = true, contextProviderName, - scrollHide = false, }: ScrollWrapperProps) => { const scrollableRef = useRef(null); const Context = getContextByProviderName(contextProviderName); @@ -106,11 +103,7 @@ export const ScrollWrapper = ({ id: contextProviderName, }} > - + {children} From bd4ea4da1de1364ac9c46845267a1b7604fe7385 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 19 Dec 2024 16:36:05 +0530 Subject: [PATCH 2/7] scroll paddings -- thomas's request --- .../ui/utilities/scroll/components/ScrollWrapper.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index fd27680f8f6e..4b424ca6a7a6 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -23,6 +23,14 @@ const StyledScrollWrapper = styled.div` .os-scrollbar-handle { background-color: ${({ theme }) => theme.border.color.medium}; } + .os-scrollbar-vertical { + padding: 0px; + --os-size: 6px; + } + .os-scrollbar-horizontal { + padding: 0px; + --os-size: 6px; + } `; const StyledInnerContainer = styled.div` From 96406ceb323d395cb8feef74838eeede5978d6bc Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 19 Dec 2024 16:50:09 +0530 Subject: [PATCH 3/7] width fixes --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 1d924f55c413..ba63c87bd3b8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -89,8 +89,8 @@ const StyledItem = styled('button', { width: ${(props) => !props.isNavigationDrawerExpanded - ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(6)})` - : `calc(100% - ${props.theme.spacing(2)})`}; + ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(5.5)})` + : `calc(100% - ${props.theme.spacing(1.5)})`}; ${({ isDragging }) => isDragging && From 3053c12795331e4649a0623f8a528ff70d16b9be Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 19 Dec 2024 16:57:43 +0530 Subject: [PATCH 4/7] right options only visible on hover --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index ba63c87bd3b8..f63c29027e6f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -208,7 +208,6 @@ const visibleStateStyles = css` const StyledRightOptionsVisbility = styled.div<{ isMobile: boolean; - active: boolean; }>` display: block; opacity: 0; @@ -221,7 +220,7 @@ const StyledRightOptionsVisbility = styled.div<{ height: 1px; width: 1px; - ${({ isMobile, active }) => (isMobile || active) && visibleStateStyles} + ${({ isMobile }) => isMobile && visibleStateStyles} .navigation-drawer-item:hover & { ${visibleStateStyles} @@ -343,10 +342,7 @@ export const NavigationDrawerItem = ({ e.preventDefault(); }} > - + {rightOptions} From 9eaaa062d36f57f4583c00f53f40cec5023a5371 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 19 Dec 2024 17:45:48 +0530 Subject: [PATCH 5/7] remove redundant code --- .../ui/utilities/scroll/components/ScrollWrapper.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index 4b424ca6a7a6..f612449d2967 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -23,11 +23,7 @@ const StyledScrollWrapper = styled.div` .os-scrollbar-handle { background-color: ${({ theme }) => theme.border.color.medium}; } - .os-scrollbar-vertical { - padding: 0px; - --os-size: 6px; - } - .os-scrollbar-horizontal { + .os-scrollbar { padding: 0px; --os-size: 6px; } From 48c06df900c9bc391fdffb04704d58e4dcd4159d Mon Sep 17 00:00:00 2001 From: ehconitin Date: Sat, 21 Dec 2024 15:42:10 +0530 Subject: [PATCH 6/7] no padding scroll handle for drawer, autohideDelay --- .../components/MainNavigationDrawerItems.tsx | 1 + .../scroll/components/ScrollWrapper.tsx | 40 ++++++++++++++----- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index 514a193c834d..e42e647a034c 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -63,6 +63,7 @@ export const MainNavigationDrawerItems = () => { contextProviderName="navigationDrawer" componentInstanceId={`scroll-wrapper-navigation-drawer`} defaultEnableXScroll={false} + scrollbarVariant="no-padding" > diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index f612449d2967..76cb05b95f13 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -13,20 +13,36 @@ import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/state import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState'; import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; +import { css } from '@emotion/react'; import 'overlayscrollbars/overlayscrollbars.css'; -const StyledScrollWrapper = styled.div` +const StyledScrollWrapper = styled.div<{ + scrollbarVariant: 'with-padding' | 'no-padding'; +}>` display: flex; height: 100%; width: 100%; - - .os-scrollbar-handle { - background-color: ${({ theme }) => theme.border.color.medium}; - } .os-scrollbar { - padding: 0px; - --os-size: 6px; + transition: + opacity 300ms, + visibility 300ms, + top 300ms, + right 300ms, + bottom 300ms, + left 300ms; } + .os-scrollbar-handle { + background-color: ${({ theme }) => theme.border.color.strong}; + } + + ${({ scrollbarVariant }) => + scrollbarVariant === 'no-padding' && + css` + .os-scrollbar { + --os-size: 6px; + padding: 0px; + } + `} `; const StyledInnerContainer = styled.div` @@ -40,6 +56,7 @@ export type ScrollWrapperProps = { defaultEnableYScroll?: boolean; contextProviderName: ContextProviderName; componentInstanceId: string; + scrollbarVariant?: 'with-padding' | 'no-padding'; }; export const ScrollWrapper = ({ @@ -49,6 +66,7 @@ export const ScrollWrapper = ({ defaultEnableXScroll = true, defaultEnableYScroll = true, contextProviderName, + scrollbarVariant = 'with-padding', }: ScrollWrapperProps) => { const scrollableRef = useRef(null); const Context = getContextByProviderName(contextProviderName); @@ -76,7 +94,7 @@ export const ScrollWrapper = ({ const [initialize, instance] = useOverlayScrollbars({ options: { - scrollbars: { autoHide: 'scroll' }, + scrollbars: { autoHide: 'scroll', autoHideDelay: 500 }, overflow: { x: defaultEnableXScroll ? undefined : 'hidden', y: defaultEnableYScroll ? undefined : 'hidden', @@ -107,7 +125,11 @@ export const ScrollWrapper = ({ id: contextProviderName, }} > - + {children} From 585c555abb82da401e29cde447b5ed3d492ca604 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Sat, 21 Dec 2024 16:03:29 +0530 Subject: [PATCH 7/7] footer fix --- .../navigation-drawer/components/NavigationDrawer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index 20aba86a6f8e..6572b66cf662 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -10,6 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths'; import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; +import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded'; import { NavigationDrawerBackButton } from './NavigationDrawerBackButton'; import { NavigationDrawerHeader } from './NavigationDrawerHeader'; @@ -123,7 +124,7 @@ export const NavigationDrawer = ({ {children} - {footer} + {footer} );