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

View File

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

View File

@ -745,3 +745,25 @@ button.rbc-input::-moz-focus-inner {
background-color: #74ad31;
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 {
padding: 0;
margin: -24px -36px;
// margin: -24px -36px;
background-color: #eff2f5;
.react-kanban-column {
background-color: #eff2f5;
@ -19,7 +19,8 @@
.noco-kanban-view {
.action-buttons {
margin: -24px -24px 0 !important;
// margin: -24px -24px 0 !important
margin: 0 !important;
background-color: #eff2f5;
padding-bottom: 40px;
.ant-btn {
@ -27,7 +28,7 @@
}
.filter-action-button {
margin-left: 0;
left: 0;
left: 12px;
}
}
.action-buttons + .react-kanban-board {
@ -40,3 +41,20 @@
// 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 function View(props: any) {
const { schema, viewName, children, ...restProps } = props;
const { wrapper, schema, viewName, children, ...restProps } = props;
const { data = {}, loading } = useRequest(
() => {
@ -66,6 +66,14 @@ export function View(props: any) {
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} />;
}