Drawer and Modal with title. Fixes #557

FalkWolsky · FalkWolsky · commit f72897374cf9 · 2024-05-25T16:39:50.000+02:00
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -6,7 +6,7 @@ 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, LeftRightControl } from "comps/controls/dropdownControl";
+import { PositionControl, LeftRightControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
 import { closeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { DrawerStyle } from "comps/controls/styleControlConstants";
@@ -24,6 +24,7 @@ import styled from "styled-components";
 import { useUserViewMode } from "util/hooks";
 import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
+import { title } from "process";
 
 const EventOptions = [closeEvent] as const;
 
@@ -33,12 +34,23 @@ const DEFAULT_PADDING = 16;
 const DrawerWrapper = styled.div`
   // Shield the mouse events of the lower layer, the mask can be closed in the edit mode to prevent the lower layer from sliding
   pointer-events: auto;
+  .ant-drawer-header-title {
+    margin: 0px 20px !important;
+    font-size: 16px;
+  }
 `;
 
-const ButtonStyle = styled(Button)<{$closePosition?: string}>`
+const StyledDrawer = styled(Drawer)<{$titleAlign?: string}>`
+  .ant-drawer-header-title {
+    margin: 0px 20px !important;
+    text-align: ${(props) => props.$titleAlign || "center"};
+  }
+`;
+
+const ButtonStyle = styled(Button)<{$closePosition?: string, $title? :string}>`
   position: absolute;
   ${(props) => props.$closePosition === "right" ? "right: 0;" : "left: 0;"}
-  top: 0;
+  top: ${(props) => props.$title !== "" ? "2px" : "0px"};
   z-index: 10;
   font-weight: 700;
   box-shadow: none;
@@ -69,44 +81,15 @@ 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"),
-    value: "top",
-  },
-  {
-    label: trans("drawer.right"),
-    value: "right",
-  },
-  {
-    label: trans("drawer.bottom"),
-    value: "bottom",
-  },
-  {
-    label: trans("drawer.left"),
-    value: "left",
-  },
-] as const;
-
-
 let TmpDrawerComp = (function () {
   return new ContainerCompBuilder(
     {
       visible: booleanExposingStateControl("visible"),
       onEvent: eventHandlerControl(EventOptions),
       width: StringControl,
       height: StringControl,
+      title: StringControl,
+      titleAlign: HorizontalAlignmentControl,
       autoHeight: AutoHeightControl,
       style: styleControl(DrawerStyle),
       placement: PositionControl,
@@ -135,7 +118,7 @@ let TmpDrawerComp = (function () {
       return (
         <BackgroundColorContext.Provider value={props.style.background}>
           <DrawerWrapper>
-            <Drawer
+            <StyledDrawer
               resizable={resizable}
               onResizeStop={onResizeStop}
               rootStyle={props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {}}
@@ -149,6 +132,8 @@ let TmpDrawerComp = (function () {
                   backgroundColor: props.style.background
                 }
               }}
+              title={props.title}
+              $titleAlign={props.titleAlign}
               closable={false}
               placement={props.placement}
               open={props.visible.value}
@@ -188,7 +173,7 @@ let TmpDrawerComp = (function () {
                 hintPlaceholder={HintPlaceHolder}
                 bgColor={props.style.background}
               />
-            </Drawer>
+            </StyledDrawer>
           </DrawerWrapper>
         </BackgroundColorContext.Provider>
       );
@@ -197,6 +182,8 @@ let TmpDrawerComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
+          {children.title.propertyView({ label: trans("drawer.title") })}
+          {children.title.getView() && children.titleAlign.propertyView({ label: trans("drawer.titleAlign"), radioButton: true })}
           {children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })}
           {children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })}
           {["top", "bottom"].includes(children.placement.getView())
diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -5,6 +5,7 @@ import { StringControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
+import { HorizontalAlignmentControl } from "comps/controls/dropdownControl";
 import { ModalStyle, ModalStyleType } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
@@ -47,11 +48,19 @@ const getStyle = (style: ModalStyleType) => {
       }
     }
     .ant-modal-close {
-      inset-inline-end: 7px !important;
+      inset-inline-end: 10px !important;
+      top: 10px;
     }
   `;
 };
 
+const StyledModal = styled(Modal)<{$titleAlign?: string}>`
+  .ant-modal-title {
+    margin: 0px 20px !important;
+    text-align: ${(props) => props.$titleAlign || "center"};
+  }
+`;
+
 const DEFAULT_WIDTH = "60%";
 const DEFAULT_HEIGHT = 222;
 
@@ -91,6 +100,8 @@ let TmpModalComp = (function () {
       width: StringControl,
       height: StringControl,
       autoHeight: AutoHeightControl,
+      title: StringControl,
+      titleAlign: HorizontalAlignmentControl,
       style: styleControl(ModalStyle),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
@@ -135,7 +146,7 @@ let TmpModalComp = (function () {
       return (
         <BackgroundColorContext.Provider value={props.style.background}>
           <ModalWrapper>
-            <Modal
+            <StyledModal
               height={height}
               resizeHandles={resizeHandles}
               onResizeStop={onResizeStop}
@@ -145,6 +156,8 @@ let TmpModalComp = (function () {
               getContainer={() => document.querySelector(`#${CanvasContainerID}`) || document.body}
               footer={null}
               styles={{body: bodyStyle}}
+              title={props.title}
+              $titleAlign={props.titleAlign}
               width={width}
               onCancel={(e) => {
                 props.visible.onChange(false);
@@ -166,7 +179,7 @@ let TmpModalComp = (function () {
                 containerPadding={paddingValues ? [paddingValues[0] ?? 0, paddingValues[1] ?? 0] : [24,24]}
                 hintPlaceholder={HintPlaceHolder}
               />
-            </Modal>
+            </StyledModal>
           </ModalWrapper>
         </BackgroundColorContext.Provider>
       );
@@ -175,6 +188,8 @@ let TmpModalComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
+          {children.title.propertyView({ label: trans("drawer.title") })}
+          {children.title.getView() && children.titleAlign.propertyView({ label: trans("drawer.titleAlign"), radioButton: true })}
           {children.autoHeight.getPropertyView()}
           {!children.autoHeight.getView() &&
             children.height.propertyView({
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2128,8 +2128,11 @@ export const en = {
     "size": "Size",
     "top": "Top",
     "right": "Right",
+    "center": "Center",
     "bottom": "Bottom",
     "left": "Left",
+    "title": "Drawer Title",
+    "titleAlign": "Title Alignment",
     "widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
     "heightTooltip": "Pixel, e.g. 378",
     "openDrawerDesc": "Open Drawer",
