Drawer Close Button Left or Right

Adds the ability to select the left or right position for the close button in the drawer component.
lowcoder-org · FalkWolsky · Feb 26, 2024 · Feb 25, 2024 · Feb 25, 2024 · Feb 26, 2024
commit 966fa27fbb6da4e837fe28fb8a201e483efbafb3
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -1,12 +1,12 @@
-import { CloseOutlined } from "@ant-design/icons";
+import { CloseOutlined, PropertySafetyFilled } from "@ant-design/icons";
 import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
-import { PositionControl } from "comps/controls/dropdownControl";
+import { PositionControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { closeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { DrawerStyle } from "comps/controls/styleControlConstants";
@@ -35,40 +35,22 @@ const DrawerWrapper = styled.div`
   pointer-events: auto;
 `;
 
-const ButtonStyle = styled(Button)`
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  font-weight: 700;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.45);
-  height: 54px;
-  width: 54px;
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  &,
-  :hover,
-  :focus {
-    background-color: transparent;
-    border: none;
-  }
-
-  :hover,
-  :focus {
-    color: rgba(0, 0, 0, 0.75);
-  }
-`;
-
 // If it is a number, use the px unit by default
 function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
 }
 
+const ClosePlacementOptions = [
+  {
+    label: trans("drawer.left"),
+    value: "left",
+  },
+  {
+    label: trans("drawer.right"),
+    value: "right",
+  },
+] as const;
+
 const PlacementOptions = [
   {
     label: trans("drawer.top"),
@@ -88,6 +70,7 @@ const PlacementOptions = [
   },
 ] as const;
 
+
 let TmpDrawerComp = (function () {
   return new ContainerCompBuilder(
     {
@@ -98,6 +81,7 @@ let TmpDrawerComp = (function () {
       autoHeight: AutoHeightControl,
       style: styleControl(DrawerStyle),
       placement: PositionControl,
+      closePosition: withDefault(LeftRightControl, "left"),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
     },
@@ -119,6 +103,34 @@ let TmpDrawerComp = (function () {
         },
         [dispatch, isTopBom]
       );
+      const ButtonStyle = styled(Button)`
+        position: absolute;
+        ${props.closePosition === "right" ? "right: 0;" : "left: 0;"}
+        top: 0;
+        z-index: 10;
+        font-weight: 700;
+        box-shadow: none;
+        color: rgba(0, 0, 0, 0.45);
+        height: 54px;
+        width: 54px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+
+        &,
+        :hover,
+        :focus {
+          background-color: transparent;
+          border: none;
+        }
+
+        :hover,
+        :focus {
+          color: rgba(0, 0, 0, 0.75);
+        }
+      `;
       return (
         <BackgroundColorContext.Provider value={props.style.background}>
           <DrawerWrapper>
@@ -181,6 +193,7 @@ let TmpDrawerComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
+          {children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })}
           {children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })}
           {["top", "bottom"].includes(children.placement.getView())
             ? children.autoHeight.getPropertyView()

diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -1347,6 +1347,7 @@ export const de = {
       "title": "Angezeigter Container-Titel"
   },
   "drawer": {
+      "closePosition": "Platzierung der Verschlusses",
       "placement": "Platzierung der Schubladen",
       "size": "Größe",
       "top": "Top",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1500,6 +1500,7 @@ export const en = {
     "title": "Displayed Container Title"
   },
   "drawer": {
+    "closePosition": "Close Button Placement",
     "placement": "Drawer Placement",
     "size": "Size",
     "top": "Top",

diff --git a/client/packages/lowcoder/src/i18n/locales/translation_files/de.json b/client/packages/lowcoder/src/i18n/locales/translation_files/de.json
@@ -1335,6 +1335,7 @@
         "title": "Angezeigter Container-Titel"
     },
     "drawer": {
+        "closePosition": "Platzierung der Verschlusses",
         "placement": "Platzierung der Schubladen",
         "size": "Größe",
         "top": "Top",

diff --git a/client/packages/lowcoder/src/i18n/locales/translation_files/en.json b/client/packages/lowcoder/src/i18n/locales/translation_files/en.json
@@ -1399,6 +1399,7 @@
     "title": "Displayed Container Title"
   },
   "drawer": {
+    "closePosition": "Close Button Placement",
     "placement": "Drawer Placement",
     "size": "Size",
     "top": "Top",

diff --git a/client/packages/lowcoder/src/i18n/locales/translation_files/es.json b/client/packages/lowcoder/src/i18n/locales/translation_files/es.json
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1469,6 +1469,7 @@ container: {
     title: "容器标题",
 },
 drawer: {
+    closePosition: "关闭位置",
     placement: "抽屉位置",
     size: "大小",
     top: "顶部",