try number 2

mrc-ide · Sep 11, 2023 · 2038331 · 2038331
1 parent 75fdc73
commit 2038331
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/app/static/src/app/components/WodinPanels.vue b/app/static/src/app/components/WodinPanels.vue
@@ -104,8 +104,9 @@ export default defineComponent({
             windowWidth.value = window.innerWidth;
             hidePanelMode.value = HidePanelContent.None;
             mode.value = PanelsMode.Both;
-            optionsWidth.value.width = `max(${windowBoundaryLeft.value}px, 30%)`;
-            chartsWidth.value.width = `calc(100% - ${optionsWidth.value.width})`;
+            const optionsWidthVal = `max(${windowBoundaryLeft.value}px, 30%)`;
+            optionsWidth.value.width = `max(${windowBoundaryLeft.value}px, 30%) !important`;
+            chartsWidth.value.width = `calc(100% - ${optionsWidthVal}) !important`;
         };
 
         const resizeObserver = new ResizeObserver(resize);
@@ -145,22 +146,32 @@ export default defineComponent({
             const { clientX } = getTouchEvent(event) as MouseEvent | Touch;
 
             if (clientX > snapToleranceRight.value) {
+                optionsWidth.value.width = "";
+                chartsWidth.value.width = "";
                 mode.value = PanelsMode.Left;
             } else if (clientX < snapToleranceLeft.value) {
+                optionsWidth.value.width = "";
+                chartsWidth.value.width = "";
                 mode.value = PanelsMode.Right;
             } else if (clientX > windowBoundaryRight.value) {
+                const optionsWidthVal = `calc(${clientX}px + ${dragStart.value === DragStart.Icon ? 1.4 : -1}rem)`;
+                optionsWidth.value.width = `${optionsWidthVal} !important`;
+                chartsWidth.value.width = `calc(100% - ${optionsWidthVal}) !important`;
                 mode.value = PanelsMode.Both;
                 hidePanelMode.value = HidePanelContent.Right;
             } else if (clientX < windowBoundaryLeft.value) {
+                const optionsWidthVal = `calc(${clientX}px + ${dragStart.value === DragStart.Icon ? 1.4 : -1}rem)`;
+                optionsWidth.value.width = `${optionsWidthVal} !important`;
+                chartsWidth.value.width = `calc(100% - ${optionsWidthVal}) !important`;
                 mode.value = PanelsMode.Both;
                 hidePanelMode.value = HidePanelContent.Left;
             } else {
+                const optionsWidthVal = `calc(${clientX}px + ${dragStart.value === DragStart.Icon ? 1.4 : -1}rem)`;
+                optionsWidth.value.width = `${optionsWidthVal} !important`;
+                chartsWidth.value.width = `calc(100% - ${optionsWidthVal}) !important`;
                 mode.value = PanelsMode.Both;
                 hidePanelMode.value = HidePanelContent.None;
             }
-
-            optionsWidth.value.width = `calc(${clientX}px + ${dragStart.value === DragStart.Icon ? 1.4 : -1}rem)`;
-            chartsWidth.value.width = `calc(100% - ${optionsWidth.value.width})`;
         };
 
         const handleDragEnd = (event: Event) => {
@@ -169,8 +180,12 @@ export default defineComponent({
             const { clientX } = getTouchEvent(event) as MouseEvent | Touch;
 
             if (clientX > windowBoundaryRight.value) {
+                optionsWidth.value.width = "";
+                chartsWidth.value.width = "";
                 mode.value = PanelsMode.Left;
             } else if (clientX < windowBoundaryLeft.value) {
+                optionsWidth.value.width = "";
+                chartsWidth.value.width = "";
                 mode.value = PanelsMode.Right;
             } else {
                 mode.value = PanelsMode.Both;

diff --git a/app/static/tests/unit/components/wodinPanels.test.ts b/app/static/tests/unit/components/wodinPanels.test.ts
@@ -81,11 +81,12 @@ describe("WodinPanels", () => {
         expect(mode).toBe(expectedMode);
         expect(modeClass).toBe(modeClassMap[expectedMode]);
         expect(hidePanelMode).toBe(expectedHideContent);
-        if (position) {
+        if (position && mode === PanelsMode.Both) {
+            const optionsWidthVal = `calc(${position}px + ${dragStart === DragStart.Icon ? 1.4 : -1}rem)`;
             expect(optionsWidth)
-                .toStrictEqual({ width: `calc(${position}px + ${dragStart === DragStart.Icon ? 1.4 : -1}rem)` });
+                .toStrictEqual({ width: `${optionsWidthVal} !important` });
             expect(chartsWidth)
-                .toStrictEqual({ width: `calc(100% - ${optionsWidth.width})` });
+                .toStrictEqual({ width: `calc(100% - ${optionsWidthVal}) !important` });
         }
         expect(mockPreventDefault).toBeCalledTimes(expectedPreventDefault);
     };
@@ -278,8 +279,8 @@ describe("WodinPanels", () => {
         expect(vm.windowWidth).toBe(1000);
         expect(vm.mode).toBe(PanelsMode.Both);
         expect(vm.hidePanelMode).toBe(HidePanelContent.None);
-        expect(vm.optionsWidth.width).toBe("max(200px, 30%)");
-        expect(vm.chartsWidth.width).toBe("calc(100% - max(200px, 30%))");
+        expect(vm.optionsWidth.width).toBe("max(200px, 30%) !important");
+        expect(vm.chartsWidth.width).toBe("calc(100% - max(200px, 30%)) !important");
     });
 
     it("disconnects resizeObserver on unmount", () => {