fix: adjust the margin of the Add block button in the grid layout (#4820)

* fix: improve grid style

* fix: style
This commit is contained in:
chenos 2024-07-07 08:34:12 +08:00 committed by GitHub
parent 4b2ac3eeb0
commit e461189974
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 7 deletions

View File

@ -14,6 +14,7 @@ const useStyles = createStyles(({ token, css, cx }: any) => {
const important = token.marginBlock === token.marginLG ? ' !important' : '';
return {
wrapper: css``,
container: css`
.ColDivider {
flex-shrink: 0;
@ -54,6 +55,13 @@ const useStyles = createStyles(({ token, css, cx }: any) => {
.showDivider {
margin: 0 calc(-1 * ${token.marginBlock}px) ${important};
}
.nb-grid-warp > button:last-child {
margin-bottom: ${token.marginBlock}px;
}
.nb-grid-warp .nb-grid-warp > button:last-child {
margin-bottom: ${token.margin}px;
}
`,
};
});

View File

@ -358,7 +358,7 @@ export const Grid: any = observer(
return (
<FilterBlockProvider>
<GridContext.Provider value={gridContextValue}>
<div className={cls('nb-grid-container')}>
<div className={cls('nb-grid-container', styles.wrapper)}>
<div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
<div className="nb-grid-warp">
<DndWrapper dndContext={props.dndContext}>
@ -400,11 +400,7 @@ export const Grid: any = observer(
);
})}
</DndWrapper>
{render({
style: {
marginBottom: token.marginLG,
},
})}
{render()}
</div>
</div>
</div>

View File

@ -9,6 +9,7 @@
import { PlusOutlined } from '@ant-design/icons';
import { PageHeader as AntdPageHeader } from '@ant-design/pro-layout';
import { css } from '@emotion/css';
import { FormLayout } from '@formily/antd-v5';
import { Schema, SchemaOptionsContext, useFieldSchema } from '@formily/react';
import { Button, Tabs } from 'antd';
@ -252,7 +253,18 @@ function PageContent(
})
) : (
<FixedBlock height={`calc(${height}px + 46px + ${token.paddingPageVertical}px * 2)`}>
<div className={`pageWithFixedBlockCss nb-page-content`}>
<div
className={classNames(
`pageWithFixedBlockCss nb-page-content`,
css`
> .nb-grid-container:not(:last-child) {
> .nb-grid > .nb-grid-warp > button:last-child {
display: none;
}
}
`,
)}
>
<SchemaComponent schema={fieldSchema} distributed />
</div>
</FixedBlock>