fix: global scroll with top panel and aside header (#159)

* fix: global scroll with top panel and aside header * fix: top margin aside * fix: hook missing set func * fix: scroll aside sticky correct
gravity-ui · Nov 24, 2023 · cfe44e0 · cfe44e0
1 parent d1d68a4
commit cfe44e0
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 29 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -37,7 +37,7 @@ $block: '.#{variables.$ns}aside-header';
 
     &__aside {
         position: sticky;
-        top: 0;
+        top: var(--gn-aside-top-panel-height);
         left: 0;
         height: 100vh;
         width: inherit;
@@ -46,6 +46,7 @@ $block: '.#{variables.$ns}aside-header';
         background-color: var(--g-color-base-background);
         z-index: 100;
         max-height: calc(100vh - var(--gn-aside-top-panel-height));
+        margin-top: var(--gn-aside-top-panel-height);
 
         box-sizing: border-box;
 
@@ -198,10 +199,18 @@ $block: '.#{variables.$ns}aside-header';
 
     &__pane-top-divider {
         height: 1px;
-        background-color: var(--gn-aside-header-collapse-button-divider-line-color);
+        background-color: var(--gn-aside-header-divider-line-color);
         margin-top: -1px;
     }
 
+    &__pane-top {
+        position: fixed;
+        z-index: 98;
+        top: 0;
+        background: var(--g-color-base-background);
+        width: 100%;
+    }
+
     &__pane-top-alert {
         &_centered {
             display: flex;
@@ -221,6 +230,7 @@ $block: '.#{variables.$ns}aside-header';
     &__content {
         width: calc(100% - var(--gn-aside-header-size));
         z-index: 95;
+        margin-top: var(--gn-aside-top-panel-height);
     }
 
     &__collapse-button {

diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -24,10 +24,7 @@ export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(
         return (
             <PageLayout compact={compact} className={className} topAlert={topAlert}>
                 <PageLayoutAside ref={ref} {...props} />
-                <PageLayout.Content
-                    renderContent={props.renderContent}
-                    withTop={Boolean(topAlert)}
-                />
+                <PageLayout.Content renderContent={props.renderContent} />
             </PageLayout>
         );
     },

diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx
@@ -65,7 +65,8 @@ HeaderAlert.args = {
     topAlert: {
         title: 'Maintenance',
         view: 'filled',
-        message: 'Scheduled maintenance is being performed',
+        message:
+            'Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled maintenance is being performed  Scheduled maintenance is being performed Scheduled maintenance is being performed Scheduled mainten',
         closable: true,
     },
 };
@@ -76,5 +77,6 @@ HeaderAlertCentered.args = {
         view: 'filled',
         message: 'Scheduled maintenance is being performed',
         centered: true,
+        dense: true,
     },
 };
diff --git a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx
@@ -31,18 +31,14 @@ const Layout = ({compact, reverse, className, children, topAlert}: PageLayoutPro
     );
 };
 
-const ConnectedContent: React.FC<
-    PropsWithChildren<Pick<ContentProps, 'renderContent' | 'withTop'>>
-> = ({children, withTop, renderContent}) => {
+const ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({
+    children,
+    renderContent,
+}) => {
     const {size} = useAsideHeaderContext();
 
     return (
-        <Content
-            withTop={withTop}
-            size={size}
-            className={b('content')}
-            renderContent={renderContent}
-        >
+        <Content size={size} className={b('content')} renderContent={renderContent}>
             {children}
         </Content>
     );

diff --git a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
@@ -53,7 +53,7 @@ export const useAsideHeaderTopPanel = ({
             window.removeEventListener('resize', updateTopSizeDebounce);
             setAsideTopPanelHeight(0);
         };
-    }, [topAlert, topHeight, topRef, updateTopSize]);
+    }, [topAlert, topHeight, topRef, updateTopSize, setAsideTopPanelHeight]);
 
     return {
         topRef,

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
@@ -8,7 +8,6 @@ export interface ContentProps {
     size: number;
     className?: string;
     cssSizeVariableName?: string;
-    withTop?: boolean;
     renderContent?: RenderContentType;
 }
 
@@ -27,21 +26,14 @@ export const Content: React.FC<ContentProps> = ({
     size, // TODO: move to context when MobileHeader will support it
     className,
     cssSizeVariableName = '--gn-aside-header-size',
-    withTop,
     renderContent,
     children,
 }) => {
-    const style: React.CSSProperties = {
-        [cssSizeVariableName]: `${size}px`,
-    };
-
-    if (withTop) {
-        style.maxHeight = 'calc(100vh - var(--gn-aside-top-panel-height))';
-        style.overflowY = 'auto';
-    }
-
     return (
-        <div className={className} style={style}>
+        <div
+            className={className}
+            style={{...({[cssSizeVariableName]: `${size}px`} as React.CSSProperties)}}
+        >
             {typeof renderContent === 'function' ? (
                 <RenderContent size={size} renderContent={renderContent} />
             ) : (