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,8 +64,8 @@ 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) {
@ -110,7 +110,6 @@ export function Page(props: any) {
}} }}
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} />;
} }