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, 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) => { const RowDivider = (props) => {
@ -52,17 +63,26 @@ const RowDivider = (props) => {
}); });
return ( return (
<div <span
ref={setNodeRef} ref={setNodeRef}
className={cls(
'nb-row-divider',
css`
height: 24px;
width: 100%;
position: absolute;
margin-top: -24px;
`,
)}
style={{ style={{
zIndex: active ? 1000 : 0, zIndex: active ? 1000 : 0,
height: 2, // height: 24,
width: '100%', // width: '100%',
position: 'absolute', // position: 'absolute',
marginTop: -24, // marginTop: -24,
...droppableStyle, ...droppableStyle,
}} }}
></div> />
); );
}; };
@ -152,7 +172,7 @@ export const Grid: any = observer((props: any) => {
); );
})} })}
</DndWrapper> </DndWrapper>
<div>{render()}</div> {render()}
</div> </div>
); );
}); });

View File

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