chore(ui): fix ActionBar jumping when scrolling (#5462)

* chore(condo): fix ui affix jumping * chore(condo): fix ui affix component jump * chore(condo): make it beautiful on small screens and small tablets * chore(ui): make affix look better on smartphones * fix(ui): remove 40px mandatory padding * fix(ui): fix linter errors * fix(ui): fix linter errors
open-condo-software · Nov 20, 2024 · ad85c6c · ad85c6c
1 parent 55844fa
commit ad85c6c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/packages/ui/src/components/ActionBar/actionBar.tsx b/packages/ui/src/components/ActionBar/actionBar.tsx
@@ -1,11 +1,13 @@
 import { Affix } from 'antd'
 import React, { ReactElement } from 'react'
 
+import { useBreakpoints } from '../../hooks'
 import { Space, SpaceProps } from '../Space'
 import { Typography } from '../Typography'
 
 const ACTION_BAR_CLASS_PREFIX = 'condo-affix'
 const AFFIX_CONTENT_WRAPPER_CLASS = `${ACTION_BAR_CLASS_PREFIX}-content-wrapper`
+const ACTION_BAR_PLACEHOLDER_CLASS = `${ACTION_BAR_CLASS_PREFIX}-placeholder`
 
 const SPACE_SIZE: SpaceProps['size'] = [16, 16]
 
@@ -18,12 +20,17 @@ export type ActionBarProps = {
 export const ActionBar: React.FC<ActionBarProps> = (props) => {
     const { actions, message, wrap = true } = props
 
+    const { TABLET_SMALL } = useBreakpoints()
+
     return (
-        <Affix offsetBottom={0} prefixCls={ACTION_BAR_CLASS_PREFIX}>
-            <Space wrap={wrap} size={SPACE_SIZE} className={AFFIX_CONTENT_WRAPPER_CLASS}>
-                {message && <Typography.Text strong>{message}</Typography.Text>}
-                {actions}
-            </Space>
-        </Affix>
+        <>
+            <Affix offsetBottom={TABLET_SMALL ? 23 : 0} prefixCls={ACTION_BAR_CLASS_PREFIX}>
+                <Space wrap={wrap} size={SPACE_SIZE} className={AFFIX_CONTENT_WRAPPER_CLASS}>
+                    {message && <Typography.Text strong>{message}</Typography.Text>}
+                    {actions}
+                </Space>
+            </Affix>
+            <div className={ACTION_BAR_PLACEHOLDER_CLASS} />
+        </>
     )
 }
diff --git a/packages/ui/src/components/ActionBar/style.less b/packages/ui/src/components/ActionBar/style.less
@@ -7,15 +7,20 @@
 @condo-action-bar-overflow-width: @condo-global-spacing-16;
 @condo-action-bar-width: calc(100% + @condo-action-bar-overflow-width * 2);
 @condo-action-bar-large-screen-bottom-indent: @condo-global-spacing-24;
+@condo-action-bar-container-padding: @condo-global-spacing-40;
+
+.condo-affix-placeholder {
+  height: @condo-action-bar-large-screen-bottom-indent;
+}
 
 .condo-affix-content-wrapper {
   box-sizing: border-box;
   height: fit-content !important;
   padding: @condo-action-bar-overflow-width;
-  transition: box-shadow @condo-global-transition-duration-default ease-out;
 
   @media @from-mobile-small and @to-tablet-small {
     width: 100%;
+    padding-bottom: @condo-action-bar-large-screen-bottom-indent;
 
     & > .condo-space-item {
       width: 100%;
@@ -26,11 +31,15 @@
     }
   }
 
-  @media @from-tablet-large {
+  @media @from-mobile-small {
     position: relative;
     right: @condo-action-bar-overflow-width;
     width: @condo-action-bar-width;
   }
+
+  @media @from-tablet-large {
+    transition: box-shadow @condo-global-transition-duration-default ease-out;
+  }
 }
 
 .condo-affix {
@@ -50,7 +59,7 @@
     width: auto !important;
 
     & .condo-affix-content-wrapper {
-      padding-bottom: @condo-global-spacing-32;
+      padding-bottom: @condo-action-bar-large-screen-bottom-indent;
 
       & > .condo-space-item {
         padding: 0  @condo-global-spacing-16;
@@ -61,4 +70,4 @@
   @media @from-tablet-large {
     bottom: @condo-action-bar-large-screen-bottom-indent !important;
   }
-}
+}