Merge pull request #162 from MeasureAuthoringTool/MAT-7722

MAT-7722: Resizable Library Editor
MeasureAuthoringTool · Oct 31, 2024 · ad54c9e · ad54c9e
2 parents c094103 + 8d3ccc1
commit ad54c9e
Show file tree

Hide file tree

Showing 5 changed files with 365 additions and 245 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.10.14",
+    "allotment": "^1.20.2",
     "axios": "^1.6.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "classnames": "^2.3.1",

diff --git a/src/components/editCqlLibrary/EditCQLLibrary.scss b/src/components/editCqlLibrary/EditCQLLibrary.scss
@@ -23,43 +23,6 @@
     display: flex;
     flex-grow: 1;
 
-    #left-panel {
-      width: 75%;
-      overflow: hidden;
-    }
-
-    #right-panel {
-      width: 25%;
-
-      > .inner-right {
-        padding: 43px 32px;
-      }
-
-      input {
-        &.Mui-disabled {
-          background-color: #ededed;
-          border: #ededed;
-        }
-      }
-
-      textarea {
-        resize: vertical;
-        border: none;
-        &.Mui-disabled {
-          background-color: #ededed;
-          border: #ededed;
-        }
-      }
-
-      label:not(.Mui-disabled) {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 17px;
-        color: #333;
-        text-transform: none;
-      }
-    }
-
     #divider {
       width: 22px;
       height: initial;
@@ -85,11 +48,115 @@
     align-items: center;
     justify-content: flex-end;
   }
-}
 
-.form-row {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  margin-bottom: 40px;
+  .form-row {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    margin-bottom: 40px;
+  }
+
+  .allotment-wrapper {
+    margin: 0 32px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+    .inner-right {
+      margin-left: 30px;
+    }
+
+    .split-view {
+      position: relative;
+      height: 700px;
+
+      .left-panel {
+        width: 75%;
+        overflow: hidden;
+
+        > .panel-content {
+          padding-top: 32px;
+          padding-left: 32px;
+          padding-right: 20px;
+          height: calc(100% - 48px);
+        }
+      }
+
+      .right-panel {
+        width: 25%;
+        margin-left: 12px;
+
+        > .panel-content {
+          padding-left: 16px;
+          padding-right: 16px;
+          height: calc(100% - 48px);
+        }
+
+        > .tab-container {
+          > .MuiButtonBase-root {
+            margin-right: 8px;
+
+            > .back-icon {
+              color: #0073c8;
+            }
+          }
+
+          > .spacer {
+            display: flex;
+            flex-grow: 1;
+          }
+
+          > .MuiTabs-root {
+            > .MuiTabs-scroller {
+              overflow-x: auto !important;
+            }
+          }
+        }
+      }
+
+      .left-panel,
+      .right-panel {
+        height: 100%;
+        background: #fff;
+
+        > .tab-container {
+          background-color: #ededed;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          > .MuiTabs-root {
+            background-color: #ededed;
+            margin-left: 16px;
+          }
+        }
+
+        > .panel-content {
+          overflow: scroll;
+        }
+      }
+
+      .sash {
+        width: 16px;
+        background-color: #ddd;
+
+        &:before {
+          position: absolute;
+          content: "";
+          top: 50%;
+          width: 4px;
+          height: 34px;
+          border: solid 1.5px #717171;
+          border-color: transparent #717171 transparent #717171;
+        }
+
+        &:after {
+          position: absolute;
+          content: "";
+          top: 0;
+          height: 48px;
+          width: 100%;
+          background-color: #ededed;
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/editCqlLibrary/EditCqlLibrary.test.tsx b/src/components/editCqlLibrary/EditCqlLibrary.test.tsx
@@ -148,6 +148,11 @@ describe("Edit Cql Library Component", () => {
   beforeEach(() => {
     mockedAxios.get.mockClear();
     mockedAxios.get.mockResolvedValue({ data: { ...cqlLibrary } });
+    global.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
   });
 
   it("should render form and cql library editor", () => {