ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style:list and gridCard block style improve (#2087)

Browse Source 
* style: list block style improve

* style: gridCard block style improve
This commit is contained in:
katherinehhh 2023-06-26 11:21:46 +08:00 committed by GitHub
parent ffcf9d2211
commit 9241198da9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Card } from 'antd';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useField } from '@formily/react';
import { ObjectField } from '@formily/core'; import { ObjectField } from '@formily/core';
import { useField } from '@formily/react';
import { Card } from 'antd';
import React from 'react';
import { RecordSimpleProvider } from '../../../record-provider'; import { RecordSimpleProvider } from '../../../record-provider';
const itemCss = css` const itemCss = css`
@ -19,10 +19,14 @@ export const GridCardItem = (props) => {
return ( return (
<Card <Card
className={css` className={css`
&, height: 100%;
& .ant-card-body { > .ant-card-body {
padding: 24px 24px 0px;
height: 100%; height: 100%;
} }
.nb-action-bar button {
margin-bottom: 10px;
}
`} `}
> >
<div className={itemCss}> <div className={itemCss}>

6
packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
View File

@ -1,8 +1,8 @@
import { css, cx } from '@emotion/css';
import { FormLayout } from '@formily/antd';
import { createForm } from '@formily/core'; import { createForm } from '@formily/core';
import { FormContext, useField } from '@formily/react'; import { FormContext, useField } from '@formily/react';
import { css, cx } from '@emotion/css';
import React, { createContext, useContext, useEffect, useMemo } from 'react'; import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { FormLayout } from '@formily/antd';
import { BlockProvider, useBlockRequestContext } from '../../../block-provider'; import { BlockProvider, useBlockRequestContext } from '../../../block-provider';
export const ListBlockContext = createContext<any>({}); export const ListBlockContext = createContext<any>({});
@ -39,7 +39,7 @@ const InternalListBlockProvider = (props) => {
line-height: 34px; line-height: 34px;
} }
.ant-formily-item-feedback-layout-loose { .ant-formily-item-feedback-layout-loose {
margin-bottom: 12px; display: inline;
} }
`, `,
)} )}

6
packages/core/client/src/schema-component/antd/list/List.Item.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useField } from '@formily/react';
import { ObjectField } from '@formily/core'; import { ObjectField } from '@formily/core';
import { useField } from '@formily/react';
import React from 'react';
import { RecordSimpleProvider } from '../../../record-provider'; import { RecordSimpleProvider } from '../../../record-provider';
const itemCss = css` const itemCss = css`
@ -9,7 +9,7 @@ const itemCss = css`
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
// gap: 8px; // gap: 8px;
padding: 5px 0; padding: 4px 5px 0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
`; `;

15
packages/core/client/src/schema-component/antd/list/List.tsx
View File

@ -1,19 +1,22 @@
import { ListDesigner } from './List.Designer';
import { ListBlockProvider, useListBlockContext, useListItemProps } from './List.Decorator';
import React, { useCallback, useEffect, useState } from 'react';
import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { ArrayField } from '@formily/core';
import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { List as AntdList, PaginationProps } from 'antd'; import { List as AntdList, PaginationProps } from 'antd';
import { useListActionBarProps } from './hooks'; import React, { useCallback, useState } from 'react';
import { SortableItem } from '../../common'; import { SortableItem } from '../../common';
import { SchemaComponentOptions } from '../../core'; import { SchemaComponentOptions } from '../../core';
import { useDesigner } from '../../hooks'; import { useDesigner } from '../../hooks';
import { useListActionBarProps } from './hooks';
import { ListBlockProvider, useListBlockContext, useListItemProps } from './List.Decorator';
import { ListDesigner } from './List.Designer';
import { ListItem } from './List.Item'; import { ListItem } from './List.Item';
import { ArrayField } from '@formily/core';
const designerCss = css` const designerCss = css`
width: 100%; width: 100%;
margin-bottom: var(--nb-spacing); margin-bottom: var(--nb-spacing);
.nb-action-bar {
margin-top: 10px;
}
&:hover { &:hover {
> .general-schema-designer { > .general-schema-designer {
display: block; display: block;