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