mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 12:56:13 +00:00
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:
parent
4b2ac3eeb0
commit
e461189974
@ -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;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user