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' : ''; const important = token.marginBlock === token.marginLG ? ' !important' : '';
return { return {
wrapper: css``,
container: css` container: css`
.ColDivider { .ColDivider {
flex-shrink: 0; flex-shrink: 0;
@ -54,6 +55,13 @@ const useStyles = createStyles(({ token, css, cx }: any) => {
.showDivider { .showDivider {
margin: 0 calc(-1 * ${token.marginBlock}px) ${important}; 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 ( return (
<FilterBlockProvider> <FilterBlockProvider>
<GridContext.Provider value={gridContextValue}> <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={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
<div className="nb-grid-warp"> <div className="nb-grid-warp">
<DndWrapper dndContext={props.dndContext}> <DndWrapper dndContext={props.dndContext}>
@ -400,11 +400,7 @@ export const Grid: any = observer(
); );
})} })}
</DndWrapper> </DndWrapper>
{render({ {render()}
style: {
marginBottom: token.marginLG,
},
})}
</div> </div>
</div> </div>
</div> </div>

View File

@ -9,6 +9,7 @@
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { PageHeader as AntdPageHeader } from '@ant-design/pro-layout'; import { PageHeader as AntdPageHeader } from '@ant-design/pro-layout';
import { css } from '@emotion/css';
import { FormLayout } from '@formily/antd-v5'; import { FormLayout } from '@formily/antd-v5';
import { Schema, SchemaOptionsContext, useFieldSchema } from '@formily/react'; import { Schema, SchemaOptionsContext, useFieldSchema } from '@formily/react';
import { Button, Tabs } from 'antd'; import { Button, Tabs } from 'antd';
@ -252,7 +253,18 @@ function PageContent(
}) })
) : ( ) : (
<FixedBlock height={`calc(${height}px + 46px + ${token.paddingPageVertical}px * 2)`}> <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 /> <SchemaComponent schema={fieldSchema} distributed />
</div> </div>
</FixedBlock> </FixedBlock>