Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation drawer scroll padding fix #9141

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Navigation drawer scroll padding fix #9141

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fcdb77c
fix
ehconitin Dec 19, 2024
bd4ea4d
scroll paddings -- thomas's request
ehconitin Dec 19, 2024
0bb4414
Merge remote-tracking branch 'upstream/main' into scroll-padding-navi…
ehconitin Dec 19, 2024
96406ce
width fixes
ehconitin Dec 19, 2024
3053c12
right options only visible on hover
ehconitin Dec 19, 2024
9eaaa06
remove redundant code
ehconitin Dec 19, 2024
c44b5aa
Merge remote-tracking branch 'upstream/main' into scroll-padding-navi…
ehconitin Dec 20, 2024
35d3fe9
Merge remote-tracking branch 'upstream/main' into scroll-padding-navi…
ehconitin Dec 20, 2024
48c06df
no padding scroll handle for drawer, autohideDelay
ehconitin Dec 21, 2024
972584a
Merge remote-tracking branch 'upstream/main' into scroll-padding-navi…
ehconitin Dec 21, 2024
585c555
footer fix
ehconitin Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -60,12 +63,13 @@ export const MainNavigationDrawerItems = () => {
contextProviderName="navigationDrawer"
componentInstanceId={`scroll-wrapper-navigation-drawer`}
defaultEnableXScroll={false}
scrollHide={true}
>
<NavigationDrawerOpenedSection />
<CurrentWorkspaceMemberFavoritesFolders />
<WorkspaceFavorites />
<RemoteNavigationDrawerSection />
<StyledInnerContainer>
<NavigationDrawerOpenedSection />
<CurrentWorkspaceMemberFavoritesFolders />
<WorkspaceFavorites />
<RemoteNavigationDrawerSection />
</StyledInnerContainer>
</ScrollWrapper>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion .../twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 4 additions & 8 deletions ...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand Down Expand Up @@ -208,7 +208,6 @@ const visibleStateStyles = css`

const StyledRightOptionsVisbility = styled.div<{
isMobile: boolean;
active: boolean;
}>`
display: block;
opacity: 0;
Expand All @@ -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}
Expand Down Expand Up @@ -343,10 +342,7 @@ export const NavigationDrawerItem = ({
e.preventDefault();
}}
>
<StyledRightOptionsVisbility
isMobile={isMobile}
active={active || false}
>
<StyledRightOptionsVisbility isMobile={isMobile}>
{rightOptions}
</StyledRightOptionsVisbility>
</StyledRightOptionsContainer>
Expand Down
24 changes: 23 additions & 1 deletion ...-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useIsMobile } from 'twenty-ui';

const StyledSection = styled.div`
display: flex;
Expand All @@ -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 = ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand all these changes? Looks big changes for a small fix, could you explain it a bit more?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't just remove scrollHide and use the ScrollWrapper in the drawer since it overlaps over the NavigationDrawerItems(for reference #9026), so the idea is to remove the right padding of the NavigationDrawers animated container. And since NavigationDrawerSection controls the width, have an internal wrapper that would minus the width required for the scroll.
Is this the right approach? also, ignore the scroll paddings and widths being changed in ScrollWrapper, I was just trying something out!

children,
}: {
children: React.ReactNode;
}) => {
const isMobile = useIsMobile();
return (
<StyledSection>
<StyledSectionInnerContainerMinusScrollPadding isMobile={isMobile}>
{children}
</StyledSectionInnerContainerMinusScrollPadding>
</StyledSection>
);
};
17 changes: 7 additions & 10 deletions packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,17 @@ 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};
}
.os-scrollbar {
padding: 0px;
--os-size: 6px;
}
`;

Expand All @@ -36,7 +39,6 @@ export type ScrollWrapperProps = {
defaultEnableXScroll?: boolean;
defaultEnableYScroll?: boolean;
contextProviderName: ContextProviderName;
scrollHide?: boolean;
componentInstanceId: string;
};

Expand All @@ -47,7 +49,6 @@ export const ScrollWrapper = ({
defaultEnableXScroll = true,
defaultEnableYScroll = true,
contextProviderName,
scrollHide = false,
}: ScrollWrapperProps) => {
const scrollableRef = useRef<HTMLDivElement>(null);
const Context = getContextByProviderName(contextProviderName);
Expand Down Expand Up @@ -106,11 +107,7 @@ export const ScrollWrapper = ({
id: contextProviderName,
}}
>
<StyledScrollWrapper
ref={scrollableRef}
className={className}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we removing the scrollHide?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use scrollHide specifically to hide NavigationDrawer's scroll, but we have new requirements :). We are to show the scroll but with clear paddings

scrollHide={scrollHide}
>
<StyledScrollWrapper ref={scrollableRef} className={className}>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledScrollWrapper>
</Context.Provider>
Expand Down
Loading