From dc59d6bd7e6bf8ee5cfb6adbad11401aa196065f Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 3 Mar 2020 15:28:56 -0800 Subject: [PATCH] Added dashboard grid components --- client/package.json | 1 + .../dashboard-grid.component.jsx | 35 +++++ .../dashboard-grid/dashboard-grid.styles.css | 126 ++++++++++++++++++ .../job-detail-cards.parts.component.jsx | 6 - .../manage-root.page.component.jsx | 2 + ...age.page.jsx => manage.page.component.jsx} | 0 .../pages/manage/manage.page.container.jsx | 2 +- client/yarn.lock | 31 ++++- 8 files changed, 194 insertions(+), 9 deletions(-) create mode 100644 client/src/components/dashboard-grid/dashboard-grid.component.jsx create mode 100644 client/src/components/dashboard-grid/dashboard-grid.styles.css rename client/src/pages/manage/{manage.page.jsx => manage.page.component.jsx} (100%) diff --git a/client/package.json b/client/package.json index e5c71d6a0..faf0a06e0 100644 --- a/client/package.json +++ b/client/package.json @@ -25,6 +25,7 @@ "react-barcode": "^1.4.0", "react-big-calendar": "^0.24.0", "react-dom": "^16.13.0", + "react-grid-layout": "^0.18.2", "react-html-email": "^3.0.0", "react-i18next": "^11.3.3", "react-icons": "^3.9.0", diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx new file mode 100644 index 000000000..f934d8ba4 --- /dev/null +++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import GridLayout from "react-grid-layout"; +import { Card } from "antd"; + +//Combination of the following: +// /node_modules/react-grid-layout/css/styles.css +// /node_modules/react-resizable/css/styles.css +import "./dashboard-grid.styles.css"; + +export default function DashboardGridComponent() { + const layout = [ + { i: "a", x: 0, y: 0, w: 1, h: 2, static: true }, + { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, + { i: "c", x: 4, y: 0, w: 1, h: 2 } + ]; + return ( +
+ The Grid. + { + console.log(layout); + }} + > + a + b + c + +
+ ); +} diff --git a/client/src/components/dashboard-grid/dashboard-grid.styles.css b/client/src/components/dashboard-grid/dashboard-grid.styles.css new file mode 100644 index 000000000..10969c599 --- /dev/null +++ b/client/src/components/dashboard-grid/dashboard-grid.styles.css @@ -0,0 +1,126 @@ +.react-resizable { + position: relative; +} +.react-resizable-handle { + position: absolute; + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-origin: content-box; + box-sizing: border-box; + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+"); + background-position: bottom right; + padding: 0 3px 3px 0; +} +.react-resizable-handle-sw { + bottom: 0; + left: 0; + cursor: sw-resize; + transform: rotate(90deg); +} +.react-resizable-handle-se { + bottom: 0; + right: 0; + cursor: se-resize; +} +.react-resizable-handle-nw { + top: 0; + left: 0; + cursor: nw-resize; + transform: rotate(180deg); +} +.react-resizable-handle-ne { + top: 0; + right: 0; + cursor: ne-resize; + transform: rotate(270deg); +} +.react-resizable-handle-w, +.react-resizable-handle-e { + top: 50%; + margin-top: -10px; + cursor: ew-resize; +} +.react-resizable-handle-w { + left: 0; + transform: rotate(135deg); +} +.react-resizable-handle-e { + right: 0; + transform: rotate(315deg); +} +.react-resizable-handle-n, +.react-resizable-handle-s { + left: 50%; + margin-left: -10px; + cursor: ns-resize; +} +.react-resizable-handle-n { + top: 0; + transform: rotate(225deg); +} +.react-resizable-handle-s { + bottom: 0; + transform: rotate(45deg); +} +.react-grid-layout { + position: relative; + transition: height 200ms ease; +} +.react-grid-item { + transition: all 200ms ease; + transition-property: left, top; +} +.react-grid-item.cssTransforms { + transition-property: transform; +} +.react-grid-item.resizing { + z-index: 1; + will-change: width, height; +} + +.react-grid-item.react-draggable-dragging { + transition: none; + z-index: 3; + will-change: transform; +} + +.react-grid-item.dropping { + visibility: hidden; +} + +.react-grid-item.react-grid-placeholder { + background: red; + opacity: 0.2; + transition-duration: 100ms; + z-index: 2; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.react-grid-item > .react-resizable-handle { + position: absolute; + width: 20px; + height: 20px; + bottom: 0; + right: 0; + cursor: se-resize; +} + +.react-grid-item > .react-resizable-handle::after { + content: ""; + position: absolute; + right: 3px; + bottom: 3px; + width: 5px; + height: 5px; + border-right: 2px solid rgba(0, 0, 0, 0.4); + border-bottom: 2px solid rgba(0, 0, 0, 0.4); +} + +.react-resizable-hide > .react-resizable-handle { + display: none; +} diff --git a/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx index 40317fdc4..de1aa7882 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx @@ -55,12 +55,6 @@ export default function JobDetailCardsPartsComponent({ loading, data }) { padAngle={2} cornerRadius={5} enableRadialLabels={false} - legends={[ - { - anchor: "bottom", - direction: "row" - } - ]} /> diff --git a/client/src/pages/manage-root/manage-root.page.component.jsx b/client/src/pages/manage-root/manage-root.page.component.jsx index 164ca51dd..2dec148d4 100644 --- a/client/src/pages/manage-root/manage-root.page.component.jsx +++ b/client/src/pages/manage-root/manage-root.page.component.jsx @@ -1,9 +1,11 @@ import React from "react"; +import DashboardGridComponent from "../../components/dashboard-grid/dashboard-grid.component"; export default function ManageRootPageComponent() { //const client = useApolloClient(); return (
+ { //