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

feat: improve styling

Browse Source
This commit is contained in:
chenos 2021-09-03 15:52:58 +08:00
parent ebfabb4605
commit dde1bd4fc2
5 changed files with 79 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/client/src/schemas/action/ActionBar.tsx
View File

@ -86,7 +86,13 @@ export const ActionBar = observer((props: any) => {
}
}}
>
<DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
<DragOverlay
dropAnimation={{
duration: 10,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
>
{dragOverlayContent}
{/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
</DragOverlay>
@ -160,7 +166,7 @@ function generateActionSchema(type) {
'x-component-props': {
confirm: {
title: '删除数据',
content: '删除后无法恢复，确定要删除吗？'
content: '删除后无法恢复，确定要删除吗？',
},
useAction: '{{ Table.useTableDestroyAction }}',
},
@ -218,7 +224,12 @@ function AddActionButton() {
</Menu>
}
>
<Button className={'designable-btn designable-btn-dash'} style={{ marginLeft: 8 }} type={'dashed'} icon={<PlusOutlined />}>
<Button
className={'designable-btn designable-btn-dash'}
style={{ marginLeft: 8 }}
type={'dashed'}
icon={<PlusOutlined />}
>
配置操作
</Button>
</Dropdown>

13
packages/client/src/schemas/table/index.tsx
View File

@ -593,7 +593,10 @@ function AddColumn() {
const values = await FormDialog(`添加字段`, () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField scope={{ loadCollections }} schema={item} />
<SchemaField
scope={{ loadCollections }}
schema={item}
/>
</FormLayout>
);
}).open({
@ -1368,7 +1371,13 @@ Table.ActionBar = observer((props: any) => {
}
}}
>
<DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
<DragOverlay
dropAnimation={{
duration: 10,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
>
{dragOverlayContent}
{/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
</DragOverlay>

25
packages/client/src/schemas/table/style.less
View File

@ -265,3 +265,28 @@ td.nb-table-operation {
background-color: #f18b62;
}
}
.ant-space-item {
.droppable {
position: relative;
}
.droppable.isDragging::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-color: #f18b62;
opacity: .3;
}
.droppable:not(.isDragging).isOver::after {
content: '';
position: absolute;
top: 0;
right: -5px;
height: 100%;
width: 2px;
background-color: #f18b62;
}
}

8
packages/client/src/schemas/tabs/index.tsx
View File

@ -105,7 +105,13 @@ export const Tabs: any = observer((props: any) => {
await updateSchema(data);
}}
>
<DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
<DragOverlay
dropAnimation={{
duration: 10,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
>
{dragOverlayContent}
</DragOverlay>
<AntdTabs

22
packages/client/src/schemas/tabs/style.less
View File

@ -81,3 +81,25 @@
padding: 24px;
}
}
.ant-tabs-tab-btn {
.droppable.isDragging::after {
content: '';
position: absolute;
top: 0;
right: -16px;
height: 100%;
left: -16px;
background-color: #f18b62;
opacity: .3;
}
.droppable:not(.isDragging).isOver::after {
content: '';
position: absolute;
top: 0;
right: -16px;
height: 100%;
width: 2px;
background-color: #f18b62;
}
}