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

feat: improve kanban

Browse Source
This commit is contained in:
chenos 2021-08-19 23:37:02 +08:00
parent dfd4b821ff
commit 5299a2ece9
11 changed files with 790 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/schema-renderer/index.tsx
View File

@ -145,6 +145,7 @@ export const SchemaField = createSchemaField({
scope: {
Table,
Calendar,
Kanban,
useAsyncDataSource,
ChinaRegion: {
loadData: loadChinaRegionData,

6
packages/client/src/constate/Collections.ts
View File

@ -5,7 +5,11 @@ const [CollectionsProvider, useCollectionsContext] = constate(() => {
const result = useRequest('collections:findAll', {
formatResult: (result) => result?.data,
});
return { ...result, collections: result.data || [] };
return {
...result, collections: result.data || [], findCollection(name) {
return result?.data?.find((item) => item.name === name);
}
};
});
export { CollectionsProvider, useCollectionsContext };

4
packages/client/src/hooks/useResource.ts
View File

@ -1,9 +1,13 @@
import { useEffect } from 'react';
import { useCollectionContext } from '../constate';
import { Resource } from '../resource';
export const useResource = (options: any = {}) => {
const { collection } = useCollectionContext();
const resource = Resource.make(collection?.name);
useEffect(() => {
options.onSuccess && options.onSuccess({});
}, []);
return {
initialValues: {},
loading: false,

100
packages/client/src/schemas/add-new/index.tsx
View File

@ -410,40 +410,66 @@ function generateCardItemSchema(component) {
},
],
properties: {
create: {
type: 'void',
title: '添加卡片',
'x-designable-bar': 'Kanban.AddCardDesignableBar',
'x-component': 'Kanban.Card.AddNew',
// 'x-decorator': 'AddNew.Displayed',
'x-component-props': {
type: 'text',
icon: 'PlusOutlined',
},
properties: {
modal: {
type: 'void',
title: '新增数据',
'x-decorator': 'Form',
'x-component': 'Action.Drawer',
'x-component-props': {
useOkAction: '{{ Kanban.useCreateAction }}',
},
properties: {
[uid()]: {
type: 'void',
'x-component': 'Grid',
'x-component-props': {
addNewComponent: 'AddNew.FormItem',
},
},
},
},
},
},
card1: {
type: 'void',
name: uid(),
'x-decorator': 'Form',
'x-component': 'Kanban.Card',
properties: {
item1: {
type: 'void',
'x-component': 'Kanban.Item',
properties: {
title: {
type: 'string',
// title: '标题',
'x-designable-bar': 'Kanban.Card.DesignableBar',
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
'x-decorator-props': {
useResource: '{{ Kanban.useResource }}',
},
properties: {},
},
view1: {
type: 'void',
title: '修改数据',
'x-decorator': 'Form',
'x-component': 'Kanban.Card.View',
properties: {
item1: {
type: 'void',
'x-component': 'Kanban.Item',
properties: {
title: {
type: 'string',
title: '标题',
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
useOkAction: '{{ Kanban.useUpdateAction }}',
},
'x-decorator-props': {
useResource: '{{ Kanban.useResource }}',
},
properties: {
[uid()]: {
type: 'void',
'x-component': 'Grid',
'x-component-props': {
addNewComponent: 'AddNew.FormItem',
},
},
},
@ -1225,9 +1251,15 @@ AddNew.CardItem = observer((props: any) => {
title={item.title}
>
<Menu.ItemGroup title={'选择分组字段'}>
{item?.generalFields
?.filter((item) => {
return item?.uiSchema?.enum;
})
?.map((field) => {
return (
<Menu.Item
style={{ minWidth: 150 }}
key={`Kanban.collection.${item.name}.${view.key}`}
key={`Kanban.collection.${field.name}.${view.key}`}
onClick={async () => {
let data = generateCardItemSchema('Kanban');
const collectionName = item.name;
@ -1239,9 +1271,11 @@ AddNew.CardItem = observer((props: any) => {
data['x-component-props'] || {};
data['x-component-props']['resource'] =
collectionName;
data['x-component-props']['collectionName'] =
collectionName;
// data['x-component-props']['groupField'] = '';
data['x-component-props'][
'collectionName'
] = collectionName;
data['x-component-props']['groupName'] =
field.name;
}
if (isGridBlock(schema)) {
path.pop();
@ -1254,7 +1288,9 @@ AddNew.CardItem = observer((props: any) => {
let s;
if (isGrid(schema)) {
s = appendChild(data, [...path]);
} else if (defaultAction === 'insertAfter') {
} else if (
defaultAction === 'insertAfter'
) {
s = insertAfter(data, [...path]);
} else {
s = insertBefore(data, [...path]);
@ -1263,8 +1299,10 @@ AddNew.CardItem = observer((props: any) => {
}
}}
>
分组字段1
{field?.uiSchema?.title}
</Menu.Item>
);
})}
</Menu.ItemGroup>
</Menu.SubMenu>
// <Menu.Item
@ -1553,7 +1591,7 @@ AddNew.PaneItem = observer((props: any) => {
const [visible, setVisible] = useState(false);
const blockSchema = useContext(BlockSchemaContext);
const useResource = `{{ ${blockSchema['x-component']}.useResource }}`;
console.log('AddNew.PaneItem.useResource', useResource)
console.log('AddNew.PaneItem.useResource', useResource);
return (
<Dropdown
trigger={['click']}

4
packages/client/src/schemas/calendar/ActionBar.tsx
View File

@ -12,7 +12,7 @@ import cls from 'classnames';
import { Button, Dropdown, Menu, Space } from 'antd';
import SwitchMenuItem from '../../components/SwitchMenuItem';
import { uid } from '@formily/shared';
import { PlusOutlined } from '@ant-design/icons';
import { SettingOutlined } from '@ant-design/icons';
import { Droppable, SortableItem } from '../../components/Sortable';
export const ActionBar = observer((props: any) => {
@ -257,7 +257,7 @@ function AddActionButton() {
className={'designable-btn designable-btn-dash'}
style={{ marginLeft: 8 }}
type={'dashed'}
icon={<PlusOutlined />}
icon={<SettingOutlined />}
>
配置工具栏
</Button>

2
packages/client/src/schemas/calendar/index.tsx
View File

@ -183,7 +183,7 @@ export const Calendar: any = observer((props: any) => {
console.log('field.value', field.value);
return (
<CollectionProvider collectionName={props.collectionName}>
<CalendarContext.Provider value={{ resource, service, props }}>
<CalendarContext.Provider value={{ field, resource, service, props }}>
<div {...props} style={{ height: 700 }}>
<Drawer
width={'50%'}

11
packages/client/src/schemas/form/DesignableBar.tsx
View File

@ -28,6 +28,7 @@ import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
import { useCollection, useCollectionContext } from '../../constate';
import { useTable } from '../table';
import { BlockSchemaContext } from '../../context';
export const DesignableBar = observer((props) => {
const field = useField();
@ -35,12 +36,14 @@ export const DesignableBar = observer((props) => {
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const { props: tableProps } = useTable();
const { collection } = useCollectionContext();
// const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
// const { collection } = useCollection({ collectionName });
const blockSchema = useContext(BlockSchemaContext);
const collectionName = blockSchema['x-component-props']?.collectionName;
const { collection } = useCollection({ collectionName });
return (
<div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
<div className={'designable-info'}>
{collection?.title || collection?.name}
</div>
<span
onClick={(e) => {
e.stopPropagation();

115
packages/client/src/schemas/kanban/CardDesignableBar.tsx Normal file
View File

@ -0,0 +1,115 @@
import React, { useContext, useMemo, useRef, useState } from 'react';
import { createForm } from '@formily/core';
import {
SchemaOptionsContext,
Schema,
useFieldSchema,
observer,
SchemaExpressionScopeContext,
FormProvider,
useField,
useForm,
RecursionField,
} from '@formily/react';
import {
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
ISchema,
createSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormLayout } from '@formily/antd';
import './style.less';
import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop';
import { isGridRowOrCol } from '../grid';
import constate from 'constate';
import { useEffect } from 'react';
import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
import {
useCollection,
useCollectionContext,
useDisplayedMapContext,
} from '../../constate';
import { useTable } from '../table';
import SwitchMenuItem from '../../components/SwitchMenuItem';
export const CardDesignableBar = observer((props) => {
const field = useField();
const { designable, schema, appendChild, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const { collection, fields } = useCollectionContext();
const displayed = useDisplayedMapContext();
console.log('useDisplayedMapContext', schema);
return (
<div className={cls('designable-bar', { active: visible })}>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={2}>
<Dropdown
trigger={['click']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.ItemGroup className={'display-fields'} title={`字段展示`}>
{fields?.map((field) => (
<SwitchMenuItem
key={field.key}
title={field?.uiSchema?.title}
checked={displayed.has(field.name)}
onChange={async (checked) => {
if (!checked) {
const s: any = displayed.get(field.name);
const p = getSchemaPath(s);
const removed = deepRemove(p);
if (!removed) {
console.log('getSchemaPath', p, removed);
return;
}
const last = removed.pop();
displayed.remove(field.name);
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
return;
}
let data: ISchema = {
key: uid(),
type: 'void',
'x-decorator': 'Form.Field.Item',
'x-designable-bar': 'Form.Field.DesignableBar',
'x-component': 'Form.Field',
'x-component-props': {
fieldName: field.name,
},
};
const s = appendChild(data);
await createSchema(s);
}}
/>
))}
</Menu.ItemGroup>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});

201
packages/client/src/schemas/kanban/Field.DesignableBar.tsx Normal file
View File

@ -0,0 +1,201 @@
import React, { useContext, useMemo, useRef, useState } from 'react';
import { createForm } from '@formily/core';
import {
SchemaOptionsContext,
Schema,
useFieldSchema,
observer,
SchemaExpressionScopeContext,
FormProvider,
ISchema,
useField,
useForm,
RecursionField,
} from '@formily/react';
import {
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space, Switch } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
import './style.less';
import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop';
import { isGridRowOrCol } from '../grid';
import constate from 'constate';
import { useEffect } from 'react';
import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
import { RandomNameContext } from '.';
import { useCollectionContext, useDisplayedMapContext } from '../../constate';
import SwitchMenuItem from '../../components/SwitchMenuItem';
export const FieldDesignableBar = observer((props) => {
const field = useField();
const { schema, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const randomName = useContext(RandomNameContext);
const displayed = useDisplayedMapContext();
const fieldName = schema['x-component-props']?.['fieldName'];
const { getField } = useCollectionContext();
const collectionField = getField(fieldName);
console.log({ collectionField });
const realField = field
.query(field.address.concat(randomName, fieldName))
.take();
return (
<div className={cls('designable-bar', { active: visible })}>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={2}>
<AddNew.FormItem defaultAction={'insertAfter'} ghost />
{dragRef && <DragOutlined ref={dragRef} />}
<Dropdown
placement={'bottomRight'}
trigger={['click']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
key={'update'}
onClick={async () => {
const values = await FormDialog('修改字段名称', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
fieldName: {
type: 'string',
title: '原字段名称',
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
title: {
type: 'string',
title: '自定义名称',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}}
/>
</FormLayout>
);
}).open({
initialValues: {
fieldName: collectionField?.uiSchema?.title,
title: schema['title'],
},
});
const title = values.title || null;
field
.query(field.address.concat(randomName, fieldName))
.take((f) => {
f.title = title || collectionField?.uiSchema?.title;
});
schema['title'] = title;
await updateSchema({
key: schema['key'],
title,
});
}}
>
修改字段名称
</Menu.Item>
<Menu.Item
style={{ minWidth: 150 }}
onClick={async () => {
const values = await FormDialog('编辑描述', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
description: {
type: 'string',
'x-component': 'Input.TextArea',
},
},
}}
/>
</FormLayout>
);
}).open({
initialValues: {
description: schema['description'],
},
});
const description = values.description || null;
realField.description =
description || collectionField?.uiSchema?.description;
schema['description'] = description;
await updateSchema({
key: schema['key'],
description,
});
}}
>
编辑描述
</Menu.Item>
<SwitchMenuItem
title={'必填'}
checked={schema.required as boolean}
onChange={(checked) => {
field
.query(field.address.concat(randomName, fieldName))
.take((f: any) => {
f.required = checked;
schema.required = checked;
updateSchema(schema);
});
}}
/>
<Menu.Divider />
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
const fieldName =
schema['x-component-props']?.['fieldName'];
console.log({ schema, removed, fieldName });
const last = removed.pop();
displayed.remove(fieldName);
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
}}
>
移除
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});

228
packages/client/src/schemas/kanban/index.tsx
View File

@ -1,5 +1,11 @@
import React from 'react';
import { observer, RecursionField, Schema, useField } from '@formily/react';
import React, { useEffect } from 'react';
import {
observer,
RecursionField,
Schema,
useField,
useForm,
} from '@formily/react';
import { DndContext, DragOverlay, closestCorners } from '@dnd-kit/core';
import {
SortableContext,
@ -13,7 +19,7 @@ import './style.less';
import { useState } from 'react';
import { groupBy } from 'lodash';
import cls from 'classnames';
import { Button, Card, Drawer } from 'antd';
import { Button, Card, Drawer, Tag } from 'antd';
import {
SchemaRenderer,
useDesignable,
@ -23,6 +29,13 @@ import { useContext } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { uid } from '@formily/shared';
import { DesignableBar } from './DesignableBar';
import { CollectionProvider, useCollectionContext } from '../../constate';
import { Resource } from '../../resource';
import { useRequest } from 'ahooks';
import { Action } from '../action';
import { Form } from '../form';
import { CardDesignableBar } from './CardDesignableBar';
import { VisibleContext } from '../../context';
export function SortableItem(props) {
const {
@ -59,16 +72,22 @@ export function SortableItem(props) {
const useColumns = () => {
const field = useField<Formily.Core.Models.ArrayField>();
const { getField } = useCollectionContext();
let groupField = field.componentProps.groupField;
const groupName = field.componentProps.groupName;
const collectionField = getField(groupName);
if (collectionField) {
groupField = collectionField?.uiSchema;
}
const values = field.value;
const [groups, setGroups] = useState(['A', 'B', 'C']);
const columns = groups.map((name) => {
const columns = groupField?.enum?.map((group) => {
return {
id: name,
title: name,
items: values?.filter((item) => item.type === name) || [],
...group,
items: values?.filter((item) => item[groupName] === group.value) || [],
};
});
return { values, groups, columns, setGroups };
console.log('useColumns', { values, columns });
return { values, columns };
};
interface KanbanCardContextProps {
@ -79,10 +98,19 @@ interface KanbanCardContextProps {
const KanbanCardContext = createContext<KanbanCardContextProps>(null);
export const Kanban: any = observer(() => {
export const KanbanContext = createContext<any>(null);
export const KanbanColumnContext = createContext<any>(null);
export const useKanban = () => {
return useContext(KanbanContext);
};
const InternalKanban = observer((props: any) => {
const field = useField<Formily.Core.Models.ArrayField>();
const groupName = field.componentProps.groupName;
const { values, columns } = useColumns();
const { schema } = useDesignable();
const { collectionName } = props;
const cardSchema = schema.reduceProperties((prev, current) => {
if (current['x-component'] === 'Kanban.Card') {
return current;
@ -95,12 +123,46 @@ export const Kanban: any = observer(() => {
}
return prev;
}, null);
const addCardSchema = schema.reduceProperties((prev, current) => {
if (current['x-component'] === 'Kanban.Card.AddNew') {
return current;
}
return prev;
}, null);
const resource = Resource.make(collectionName);
const service = useRequest(
(params) => {
if (!collectionName) {
return Promise.resolve([]);
}
return resource.list({
...params,
perPage: -1,
});
},
{
formatResult: (data) => data?.data,
onSuccess(data) {
field.setValue(data);
},
manual: true,
// refreshDeps: [props.fieldNames],
},
);
useEffect(() => {
service.run({
defaultFilter: props?.defaultFilter,
sort: 'sort',
});
}, [props.defaultFilter]);
return (
<KanbanContext.Provider value={{ field, resource, service, props }}>
<div>
{/* <div>
<Button>筛选</Button>
</div> */}
<div className={'kanban'}>
<div className={'kanban-container'}>
<DndContext
// collisionDetection={closestCorners}
onDragEnd={({ active, over }) => {
@ -110,7 +172,9 @@ export const Kanban: any = observer(() => {
const fromIndex = values.findIndex(
(item) => item.id === active?.id,
);
const toIndex = values.findIndex((item) => item.id === over?.id);
const toIndex = values.findIndex(
(item) => item.id === over?.id,
);
// setValues((items) => {
// const fromIndex = items.findIndex(
// (item) => item.id === active?.id,
@ -132,14 +196,14 @@ export const Kanban: any = observer(() => {
}
const source = values.find((item) => item.id === active?.id);
if (source && over?.data?.current?.type === 'column') {
source.type = over.id;
source[groupName] = over.id;
return;
}
console.log('active.id', active.id, over?.data?.current);
const target = values.find((item) => item.id === over?.id);
if (source && target) {
if (source.type !== target.type) {
source.type = target.type;
if (source[groupName] !== target[groupName]) {
source[groupName] = target[groupName];
}
}
}}
@ -148,16 +212,24 @@ export const Kanban: any = observer(() => {
<SortableContext
strategy={horizontalListSortingStrategy}
items={columns}
items={
columns?.map((column) => ({
...column,
id: column.value,
})) || []
}
>
{columns.map((column) => (
{columns?.map((column) => (
<SortableItem
key={column.id}
id={column.value}
key={column.value}
type={'column'}
className={'column'}
id={column.id}
>
<div className={'column-title'}>{column.title}</div>
<KanbanColumnContext.Provider value={column}>
<div className={'column-title'}>
<Tag color={column.color}>{column.label}</Tag>
</div>
<SortableContext
strategy={verticalListSortingStrategy}
items={column.items}
@ -180,63 +252,141 @@ export const Kanban: any = observer(() => {
viewSchema: cardViewSchema,
}}
>
<RecursionField name={index} schema={cardSchema} />
<RecursionField
name={index}
schema={cardSchema}
/>
</KanbanCardContext.Provider>
</SortableItem>
);
})}
</SortableContext>
<Button
<RecursionField
name={addCardSchema?.name}
schema={addCardSchema}
/>
{/* <Button
type={'text'}
icon={<PlusOutlined />}
onClick={() => {
field.push({
id: uid(),
type: column.id,
title: uid(),
[groupName]: column.value,
});
}}
>
添加卡片
</Button>
</Button> */}
</KanbanColumnContext.Provider>
</SortableItem>
))}
<div
id={'addColumn'}
key={'addColumn'}
// type={'column'}
className={'column add-column'}
>
{/* <span className={'add-column-plus'}/> */}
<span><PlusOutlined/> 添加列表</span>
</div>
</SortableContext>
</DndContext>
</div>
</div>
</div>
</KanbanContext.Provider>
);
});
export const Kanban: any = observer((props: any) => {
return (
<CollectionProvider collectionName={props.collectionName}>
<InternalKanban {...props} />
</CollectionProvider>
);
});
Kanban.useCreateAction = () => {
const { service, resource, props } = useKanban();
const column = useContext(KanbanColumnContext);
const groupName = props.groupName;
const form = useForm();
return {
async run() {
await resource.create({
...form.values,
[groupName]: column.value,
});
await form.reset();
return service.refresh();
},
};
};
Kanban.useUpdateAction = () => {
const { service, resource, props } = useKanban();
const ctx = useContext(KanbanCardContext);
const form = useForm();
return {
async run() {
await resource.save(form.values, {
resourceKey: ctx.record.id,
});
await service.refresh();
},
};
};
Kanban.useResource = ({ onSuccess }) => {
const { props } = useKanban();
const { collection } = useCollectionContext();
const ctx = useContext(KanbanCardContext);
const resource = Resource.make({
resourceName: collection?.name || props.collectionName,
resourceKey: ctx?.record?.id,
});
console.log(
'collection?.name || props.collectionName',
collection?.name || props.collectionName,
);
const service = useRequest(
(params?: any) => {
return Promise.resolve(ctx.record);
},
{
// formatResult: (result) => result?.data,
onSuccess,
refreshDeps: [ctx?.record],
// manual,
},
);
return { resource, service, initialValues: service.data, ...service };
};
Kanban.Card = observer((props) => {
const [visible, setVisible] = useState(false);
const { index, viewSchema } = useContext(KanbanCardContext);
const { DesignableBar } = useDesignable();
const { children, ...others } = props;
return (
<>
<VisibleContext.Provider value={[visible, setVisible]}>
<Card
onClick={(e) => {
setVisible(true);
}}
bordered={false}
{...others}
>
{props.children}
{children}
<DesignableBar />
</Card>
<Drawer
width={'50%'}
title={'查看数据'}
visible={visible}
onClose={() => {
setVisible(false);
}}
>
<RecursionField name={index} schema={viewSchema} />
</Drawer>
</>
</VisibleContext.Provider>
);
});
Kanban.Card.View = observer((props) => {
return <div>{props.children}</div>;
});
Kanban.Card.View = Action.Drawer;
Kanban.Card.AddNew = Action;
Kanban.DesignableBar = DesignableBar;
Kanban.Card.DesignableBar = CardDesignableBar;

78
packages/client/src/schemas/kanban/style.less
View File

@ -1,9 +1,38 @@
.column {
position: relative;
width: 25vw;
width: 300px;
background: #f9f9f9;
margin: 0 12px;
margin-right: 24px;
padding: 24px;
&.add-column {
padding: 0;
margin-right: 0;
background: rgba(241, 139, 98, 0.05);
cursor: pointer;
color: #F18B62;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
.add-column-plus {
position: relative;
&::before {
position: absolute;
width: 1px;
height: 50px;
background: #F18B62;
}
&::after {
position: absolute;
width: 50px;
height: 1px;
background: #F18B62;
}
}
&:hover {
background: rgba(241, 139, 98, 0.1);
}
}
}
.column-title {
@ -14,7 +43,12 @@
.kanban {
display: flex;
margin: 0 -12px;
margin: 0;
overflow: auto;
}
.kanban-container {
display: flex;
}
.item {
@ -32,3 +66,41 @@
top: 0;
right: 0;
}
.kanban .ant-card-body {
position: relative;
&:hover {
> .designable-bar {
display: block;
}
}
> .designable-bar {
pointer-events: none;
display: none;
position: absolute;
top: -1px;
right: -1px;
left: -1px;
bottom: -1px;
border-radius: 2px;
background: none !important;
border: 2px solid rgba(241, 139, 98, 0.3) !important;
&.active {
display: block;
}
.designable-bar-actions {
pointer-events: all;
position: absolute;
right: 0;
line-height: 1rem;
background-color: #1890ff;
color: #fff;
z-index: 10;
padding: 0 3px;
.anticon {
font-size: 10px;
}
}
}
}