style: calendar & kanban views
This commit is contained in:
parent
611ce0d759
commit
2cd6a4cfad
@ -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>
|
||||
);
|
||||
})}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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} />;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user