style: calendar & kanban views

This commit is contained in:
chenos 2021-03-29 10:18:39 +08:00
parent 611ce0d759
commit 2cd6a4cfad
5 changed files with 101 additions and 54 deletions

View File

@ -64,53 +64,52 @@ export function Page(props: any) {
} }
return ( return (
<Col style={{ marginBottom: 24 }} span={span}> <Col style={{ marginBottom: 24 }} span={span}>
<Card bordered={false}> <View
<View wrapper={'card'}
currentRowId={currentRowId} currentRowId={currentRowId}
onDraft={() => { onDraft={() => {
if (!view.draft) { if (!view.draft) {
message.success('草稿保存成功'); message.success('草稿保存成功');
return; return;
} }
if ( if (
view.draft.returnType === 'message' && view.draft.returnType === 'message' &&
view.draft.message view.draft.message
) { ) {
Modal.success({ Modal.success({
title: '草稿保存成功', title: '草稿保存成功',
content: ( content: (
<div <div
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: markdown(view.draft.message), __html: markdown(view.draft.message),
}} }}
/> />
), ),
}); });
} else if (view.draft.returnType === 'redirect') { } else if (view.draft.returnType === 'redirect') {
const path = get(view, 'draft.redirect.name'); const path = get(view, 'draft.redirect.name');
path && history.push(`${path}`); path && history.push(`${path}`);
} }
}} }}
onFinish={() => { onFinish={() => {
if (view.returnType === 'message' && view.message) { if (view.returnType === 'message' && view.message) {
Modal.success({ Modal.success({
title: '提交成功', title: '提交成功',
content: ( content: (
<div <div
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: markdown(view.message), __html: markdown(view.message),
}} }}
/> />
), ),
}); });
} else if (view.returnType === 'redirect') { } else if (view.returnType === 'redirect') {
const path = get(view, 'redirect.name'); const path = get(view, 'redirect.name');
path && history.push(`${path}`); path && history.push(`${path}`);
} }
}} }}
viewName={viewName} viewName={viewName}
/> />
</Card>
</Col> </Col>
); );
})} })}

View File

@ -77,7 +77,7 @@ export function Calendar(props: CalendarProps) {
const { data, loading, mutate, refresh, run, params } = useRequest( const { data, loading, mutate, refresh, run, params } = useRequest(
(params = {}, ...args) => { (params = {}, ...args) => {
const { current, pageSize, sorter, filter, ...restParams } = params; const { current, pageSize, sorter, filter, ...restParams } = params as any;
console.log('paramsparamsparamsparamsparams', params, args); console.log('paramsparamsparamsparamsparams', params, args);
return api return api
.resource(resourceName) .resource(resourceName)
@ -149,7 +149,7 @@ export function Calendar(props: CalendarProps) {
console.log('events', data); console.log('events', data);
return ( return (
<Card bordered={false}> <div>
<Actions <Actions
associatedKey={associatedKey} associatedKey={associatedKey}
onTrigger={{ onTrigger={{
@ -267,6 +267,6 @@ export function Calendar(props: CalendarProps) {
}} }}
localizer={localizer} localizer={localizer}
/> />
</Card> </div>
); );
} }

View File

@ -745,3 +745,25 @@ button.rbc-input::-moz-focus-inner {
background-color: #74ad31; background-color: #74ad31;
pointer-events: none; pointer-events: none;
} }
@media only screen and (max-width: 800px) {
.view-type-calendar .action-buttons {
position: relative !important;
left: 0 !important;
.filter-action-button {
left: 0 !important;
}
}
.rbc-toolbar .rbc-toolbar-label {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
}
.rbc-toolbar {
justify-content: space-between !important;
}
.rbc-header {
padding: 4px !important;
}
}

View File

@ -1,6 +1,6 @@
.react-kanban-board { .react-kanban-board {
padding: 0; padding: 0;
margin: -24px -36px; // margin: -24px -36px;
background-color: #eff2f5; background-color: #eff2f5;
.react-kanban-column { .react-kanban-column {
background-color: #eff2f5; background-color: #eff2f5;
@ -19,7 +19,8 @@
.noco-kanban-view { .noco-kanban-view {
.action-buttons { .action-buttons {
margin: -24px -24px 0 !important; // margin: -24px -24px 0 !important
margin: 0 !important;
background-color: #eff2f5; background-color: #eff2f5;
padding-bottom: 40px; padding-bottom: 40px;
.ant-btn { .ant-btn {
@ -27,7 +28,7 @@
} }
.filter-action-button { .filter-action-button {
margin-left: 0; margin-left: 0;
left: 0; left: 12px;
} }
} }
.action-buttons + .react-kanban-board { .action-buttons + .react-kanban-board {
@ -40,3 +41,20 @@
// padding-bottom: 4px; // padding-bottom: 4px;
} }
} }
.ant-card.view-type-kanban {
margin: 0 -12px;
background: none;
> .ant-card-body {
padding: 0;
}
}
@media only screen and (max-width: 800px) {
.ant-card.view-type-kanban {
margin: 0;
.action-buttons {
margin-top: 12px !important;
}
}
}

View File

@ -43,7 +43,7 @@ export function getView(type) {
export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />; export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />;
export function View(props: any) { export function View(props: any) {
const { schema, viewName, children, ...restProps } = props; const { wrapper, schema, viewName, children, ...restProps } = props;
const { data = {}, loading } = useRequest( const { data = {}, loading } = useRequest(
() => { () => {
@ -66,6 +66,14 @@ export function View(props: any) {
const Component = getView(type); const Component = getView(type);
if (wrapper === 'card') {
return (
<Card className={`view-type-${type}`} bordered={false}>
<Component {...restProps} schema={data} />;
</Card>
)
}
return <Component {...restProps} schema={data} />; return <Component {...restProps} schema={data} />;
} }