Merge pull request #717 from lowcoder-org/dev

Dev -> Main - fixing Publishing behaviour

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -138,6 +138,7 @@ const childrenMap = {
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
   customShortcuts: CustomShortcutsComp,
+  disableCollision: valueComp<boolean>(false),
 };
 type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
   themeList: ThemeType[];

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -478,7 +478,6 @@ export function InnerGrid(props: ViewPropsWithSelect) {
       layout={props.layout}
       extraLayout={extraLayout}
       onDropDragOver={(e) => {
-        
         const compType = draggingUtils.getData<UICompType>("compType");
         const compLayout = draggingUtils.getData<UICompLayoutInfo>("compLayout");
         if (compType) {

client/packages/lowcoder/src/comps/editorState.tsx

@@ -17,7 +17,7 @@ import { NameAndExposingInfo } from "./utils/exposingTypes";
 import { checkName } from "./utils/rename";
 import { trans } from "i18n";
 import { UiLayoutType } from "./comps/uiComp";
-import { getCollisionStatus, getEditorModeStatus } from "util/localStorageUtil";
+import { getEditorModeStatus, saveCollisionStatus } from "util/localStorageUtil";
 
 type RootComp = InstanceType<typeof RootCompTmp>;
 
@@ -47,7 +47,7 @@ export class EditorState {
   readonly showPropertyPane: boolean = false;
   readonly selectedCompNames: Set<string> = new Set();
   readonly editorModeStatus: string = "";
-  readonly collisionStatus: string = "";
+  readonly collisionStatus: boolean = false;
   readonly isDragging: boolean = false;
   readonly draggingCompType: string = "button";
   readonly forceShowGrid: boolean = false; // show grid lines
@@ -65,12 +65,13 @@ export class EditorState {
     rootComp: RootComp,
     setEditorState: (fn: (editorState: EditorState) => EditorState) => void,
     initialEditorModeStatus: string = getEditorModeStatus(),
-    initialCollisionStatus: string = getCollisionStatus()
   ) {
     this.rootComp = rootComp;
     this.setEditorState = setEditorState;
     this.editorModeStatus = initialEditorModeStatus;
-    this.collisionStatus = initialCollisionStatus;
+
+    // save collision status from app dsl to localstorage
+    saveCollisionStatus(this.getCollisionStatus());
   }
 
   /**
@@ -356,10 +357,6 @@ export class EditorState {
     this.changeState({ editorModeStatus: newEditorModeStatus });
   }
 
-  setCollisionStatus(newCollisionStatus: string) {
-    this.changeState({ collisionStatus: newCollisionStatus });
-  }
-
   setDragging(dragging: boolean) {
     if (this.isDragging === dragging) {
       return;
@@ -513,8 +510,9 @@ export class EditorState {
   getAppType(): UiLayoutType {
     return this.getUIComp().children.compType.getView();
   }
-  getCollisionStatus(): string {
-    return this.collisionStatus;
+  getCollisionStatus(): boolean {
+    const { disableCollision } = this.getAppSettings();
+    return disableCollision ?? false;
   }
 
 }

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -161,9 +161,6 @@ export const DisabledContext = React.createContext<boolean>(false);
  */
 function UIView(props: { comp: any; viewFn: any }) {
   const comp = props.comp;
-  console.log(comp);
-
-  console.log(comp.children);
 
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);

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()

client/packages/lowcoder/src/constants/applicationConstants.ts

@@ -11,6 +11,8 @@ export enum AppTypeEnum {
   NavLayout = 3,
   // 4 folder, 5 mobile
   MobileTabLayout = 6,
+  // WorkflowScreen = 7,
+  // Slide = 8,
 }
 
 export enum ApplicationCategoriesEnum {
@@ -52,6 +54,8 @@ export const AppUILayoutType: Record<AppTypeEnum, UiLayoutType> = {
   [AppTypeEnum.Module]: "module",
   [AppTypeEnum.NavLayout]: "nav",
   [AppTypeEnum.MobileTabLayout]: "mobileTabLayout",
+  // [AppTypeEnum.WorkflowScreen]: "module",
+  // [AppTypeEnum.Slide]: "normal",
 };
 
 export type ApplicationDSLType = "editing" | "published" | "view_marketplace";
@@ -61,6 +65,7 @@ export type ApplicationPermissionType = "USER" | "GROUP" | "ORG_ADMIN";
 export interface ApplicationExtra {
   moduleHeight?: number;
   moduleWidth?: number;
+  layers?: boolean;
 }
 
 export interface ApplicationMeta {

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",

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",

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",

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",