improved designable styling
This commit is contained in:
parent
4bcde0befe
commit
c2357d27a9
@ -81,3 +81,25 @@
|
|||||||
background: none !important;
|
background: none !important;
|
||||||
border: 2px solid rgba(241, 139, 98, 0.3) !important;
|
border: 2px solid rgba(241, 139, 98, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-bar-align-right,
|
||||||
|
.action-bar-align-left {
|
||||||
|
position: relative;
|
||||||
|
&.isOver {
|
||||||
|
background-color: transparent !important;
|
||||||
|
.ant-space {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
background-color: rgba(241, 139, 98, 0.1) !important;
|
||||||
|
position: absolute;
|
||||||
|
top: -3px;
|
||||||
|
left: -3px;
|
||||||
|
right: -3px;
|
||||||
|
bottom: -3px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -26,14 +26,16 @@ import constate from 'constate';
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { getSchemaPath } from '../../components/schema-renderer';
|
import { getSchemaPath } from '../../components/schema-renderer';
|
||||||
import { useCollection } from '../../constate';
|
import { useCollection, useCollectionContext } from '../../constate';
|
||||||
|
import { useTable } from '../table';
|
||||||
|
|
||||||
export const DesignableBar = observer((props) => {
|
export const DesignableBar = observer((props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { designable, schema, refresh, deepRemove } = useDesignable();
|
const { designable, schema, refresh, deepRemove } = useDesignable();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const { dragRef } = useContext(DraggableBlockContext);
|
const { dragRef } = useContext(DraggableBlockContext);
|
||||||
const collectionName = field.componentProps.collectionName;
|
const { props: tableProps } = useTable();
|
||||||
|
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
|
||||||
const { collection } = useCollection({ collectionName });
|
const { collection } = useCollection({ collectionName });
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
@ -44,7 +46,7 @@ export const DesignableBar = observer((props) => {
|
|||||||
}}
|
}}
|
||||||
className={cls('designable-bar-actions', { active: visible })}
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
>
|
>
|
||||||
<Space size={'small'}>
|
<Space size={2}>
|
||||||
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
|
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
|
||||||
{dragRef && <DragOutlined ref={dragRef} />}
|
{dragRef && <DragOutlined ref={dragRef} />}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
|
@ -148,7 +148,8 @@ export const FieldDesignableBar = observer((props) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const description = values.description || null;
|
const description = values.description || null;
|
||||||
realField.description = description || collectionField?.uiSchema?.description;
|
realField.description =
|
||||||
|
description || collectionField?.uiSchema?.description;
|
||||||
schema['description'] = description;
|
schema['description'] = description;
|
||||||
await updateSchema({
|
await updateSchema({
|
||||||
key: schema['key'],
|
key: schema['key'],
|
||||||
|
@ -1612,9 +1612,11 @@ Table.Operation.Cell = observer((props: any) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
Table.Operation.DesignableBar = (props) => {
|
Table.Operation.DesignableBar = (props) => {
|
||||||
const { schema, remove, refresh, appendChild } = useDesignable(props.path);
|
const { designable, schema, remove, refresh, appendChild } = useDesignable(
|
||||||
|
props.path,
|
||||||
|
);
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
if (!schema?.parent?.parent['x-designable-bar']) {
|
if (!designable || !schema?.parent?.parent['x-designable-bar']) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
console.log('Table.Operation.DesignableBar', schema?.parent?.parent);
|
console.log('Table.Operation.DesignableBar', schema?.parent?.parent);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { observer, connect, useField, RecursionField } from '@formily/react';
|
import { observer, connect, useField, RecursionField } from '@formily/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch } from 'antd';
|
import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch, Space } from 'antd';
|
||||||
import {
|
import {
|
||||||
findPropertyByPath,
|
findPropertyByPath,
|
||||||
getSchemaPath,
|
getSchemaPath,
|
||||||
@ -104,7 +104,8 @@ export const Tabs: any = observer((props: any) => {
|
|||||||
{...others}
|
{...others}
|
||||||
className={cls({ singleton })}
|
className={cls({ singleton })}
|
||||||
tabBarExtraContent={
|
tabBarExtraContent={
|
||||||
designable && schema['x-designable-bar'] && (
|
designable &&
|
||||||
|
schema['x-designable-bar'] && (
|
||||||
<Button
|
<Button
|
||||||
type={'dashed'}
|
type={'dashed'}
|
||||||
icon={<PlusOutlined />}
|
icon={<PlusOutlined />}
|
||||||
@ -218,6 +219,7 @@ Tabs.DesignableBar = () => {
|
|||||||
}}
|
}}
|
||||||
className={cls('designable-bar-actions', { active: visible })}
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
>
|
>
|
||||||
|
<Space>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
@ -248,6 +250,7 @@ Tabs.DesignableBar = () => {
|
|||||||
>
|
>
|
||||||
<MenuOutlined />
|
<MenuOutlined />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
</Space>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -265,6 +268,7 @@ Tabs.TabPane.DesignableBar = () => {
|
|||||||
}}
|
}}
|
||||||
className={cls('designable-bar-actions', { active: visible })}
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
>
|
>
|
||||||
|
<Space>
|
||||||
<DragHandle />{' '}
|
<DragHandle />{' '}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
@ -333,6 +337,7 @@ Tabs.TabPane.DesignableBar = () => {
|
|||||||
>
|
>
|
||||||
<MenuOutlined />
|
<MenuOutlined />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
</Space>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user