feat: styling for kanban

This commit is contained in:
chenos 2022-03-28 11:18:04 +08:00
parent da264777da
commit e932b993a4
2 changed files with 51 additions and 9 deletions

View File

@ -20,7 +20,18 @@ const ColDivider = (props) => {
backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined,
};
return <div ref={setNodeRef} style={{ width: 24, ...droppableStyle }}></div>;
return (
<div
ref={setNodeRef}
className={cls(
'nb-col-divider',
css`
width: 24px;
`,
)}
style={{ ...droppableStyle }}
></div>
);
};
const RowDivider = (props) => {
@ -52,17 +63,26 @@ const RowDivider = (props) => {
});
return (
<div
<span
ref={setNodeRef}
className={cls(
'nb-row-divider',
css`
height: 24px;
width: 100%;
position: absolute;
margin-top: -24px;
`,
)}
style={{
zIndex: active ? 1000 : 0,
height: 2,
width: '100%',
position: 'absolute',
marginTop: -24,
// height: 24,
// width: '100%',
// position: 'absolute',
// marginTop: -24,
...droppableStyle,
}}
></div>
/>
);
};
@ -152,7 +172,7 @@ export const Grid: any = observer((props: any) => {
);
})}
</DndWrapper>
<div>{render()}</div>
{render()}
</div>
);
});

View File

@ -27,8 +27,18 @@ export const KanbanCard: any = observer((props: any) => {
bordered={false}
hoverable
style={{ cursor: 'pointer', overflow: 'hidden' }}
bodyStyle={{ paddingBottom: 0 }}
// bodyStyle={{ paddingBottom: 0 }}
className={css`
.ant-card-body {
padding: 16px;
}
.nb-row-divider {
height: 16px;
margin-top: -16px;
&:last-child {
margin-top: 0;
}
}
.ant-description-input {
text-overflow: ellipsis;
width: 100%;
@ -39,6 +49,18 @@ export const KanbanCard: any = observer((props: any) => {
width: 100%;
overflow: hidden;
}
.ant-formily-item {
margin-bottom: 12px;
}
.nb-grid-row:last-of-type {
.nb-grid-col {
.nb-form-item:last-of-type {
.ant-formily-item {
margin-bottom: 0;
}
}
}
}
`}
>
<SchemaComponentOptions components={{}}>