mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-14 22:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: optimize expand/collapse button styles (#5431)
Some checks are pending
Build docker image / build-and-push (push) Waiting to run
Details
Build pro image / build-and-push (push) Waiting to run
Details
E2E / Build (push) Waiting to run
Details
E2E / Core and plugins (push) Blocked by required conditions
Details
E2E / plugin-workflow (push) Blocked by required conditions
Details
E2E / plugin-workflow-approval (push) Blocked by required conditions
Details
E2E / plugin-data-source-main (push) Blocked by required conditions
Details
E2E / Comment on PR (push) Blocked by required conditions
Details
NocoBase frontEnd test / frontend-test (18) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Katherine 2024-10-16 10:56:38 +08:00 committed by GitHub
parent 96c3bf1a08
commit 52ad416140
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/client/src/schema-component/antd/action/Action.style.ts
View File

@ -52,7 +52,7 @@ const useStyles = genStyleHook('nb-action', (token) => {
marginInlineEnd: '0px !important',
},
'.nb-action-title': {
marginInlineStart: '8px',
marginInlineStart: `${token.controlPaddingHorizontalSM} px`,
},
},
};

25
packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx
View File

@ -9,7 +9,7 @@
import { css } from '@emotion/css';
import { useFieldSchema } from '@formily/react';
import { Button } from 'antd';
import { Button, theme } from 'antd';
import React, { forwardRef, createRef } from 'react';
import { composeRef } from 'rc-util/lib/ref';
import { useCompile } from '../../hooks';
@ -66,6 +66,9 @@ const InternalExpandAction = (props, ref) => {
const compile = useCompile();
const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
const buttonRef = composeRef(ref, internalRef);
const { token } = theme.useToken();
const actionTitle = ctx?.expandFlag ? compile(titleCollapse) : compile(titleExpand);
const icon = ctx?.expandFlag ? iconCollapse : iconExpand;
return (
//@ts-ignore
<div className={actionDesignerCss} ref={buttonRef as React.Ref<HTMLButtonElement>}>
@ -77,9 +80,27 @@ const InternalExpandAction = (props, ref) => {
icon={<Icon type={ctx?.expandFlag ? iconCollapse : iconExpand} />}
type={props.type}
style={props?.style}
className={css`
.ant-btn-icon {
margin-inline-end: 0px !important;
}
`}
>
{props.children?.[1]}
<span style={{ marginLeft: 10 }}>{ctx?.expandFlag ? compile(titleCollapse) : compile(titleExpand)}</span>
{actionTitle && (
<span
className={
icon
? css`
margin-inline-start: ${token.controlPaddingHorizontalSM}px;
`
: null
}
>
{actionTitle}
</span>
)}
</Button>
)}
</div>