Pushing from header to left meno bar

FalkWolsky · FalkWolsky · commit a81e175405f0 · 2024-01-24T23:41:54.000+01:00
diff --git a/client/packages/lowcoder/src/comps/editorState.tsx b/client/packages/lowcoder/src/comps/editorState.tsx
@@ -2,7 +2,7 @@ import { isContainer } from "comps/comps/containerBase";
 import { RootComp as RootCompTmp } from "comps/comps/rootComp";
 import { PositionParams } from "layout";
 import _ from "lodash";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode } from "react";
 import {
   BottomResComp,
   BottomResListComp,
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -287,29 +287,34 @@ function HeaderProfile(props: { user: User }) {
 
 export type PanelStatus = { left: boolean; bottom: boolean; right: boolean };
 export type TogglePanel = (panel?: keyof PanelStatus) => void;
-export type EnabledCollissionStatus = "true" | "false";
+
 export type EditorModeStatus = "layout" | "logic" | "both";
 export type ToggleEditorModeStatus = (
   editorModeStatus?: EditorModeStatus
 ) => void;
+
+/* 
+// export type EnabledCollissionStatus = "true" | "false";
 export type ToggleCollissionStatus = (
   collissionStatus?: EnabledCollissionStatus
-) => void;
+) => void; 
+*/
 
 type HeaderProps = {
   panelStatus: PanelStatus;
   togglePanel: TogglePanel;
   editorModeStatus: EditorModeStatus;
   toggleEditorModeStatus: ToggleEditorModeStatus;
-  collissionStatus: EnabledCollissionStatus;
-  toggleCollissionStatus: ToggleCollissionStatus;
+  // collissionStatus: EnabledCollissionStatus;
+  // toggleCollissionStatus: ToggleCollissionStatus;
 };
 
 // header in editor page
 export default function Header(props: HeaderProps) {
   const editorState = useContext(EditorContext);
   const { togglePanel } = props;
-  const { toggleEditorModeStatus, toggleCollissionStatus } = props;
+  const { toggleEditorModeStatus } = props;
+  // const { toggleCollissionStatus } = props;
   const { left, bottom, right } = props.panelStatus;
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
@@ -413,18 +418,7 @@ export default function Header(props: HeaderProps) {
 
   const headerMiddle = (
     <>
-      <>
-        <p style={{ color: "#ffffff", marginTop: "10px" }}>
-          Layers 
-        </p>
-        <Switch
-          checked={props.collissionStatus == "true"}
-          disabled={false}
-          onChange={(value: any) => {
-            toggleCollissionStatus(value == true ? "true" : "false");
-            editorState.setCollissionStatus(value == true ? "true" : "false");
-          }}
-        />
+      <>      
       </>
       <Radio.Group
         onChange={onEditorStateValueChange}
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -63,15 +63,16 @@ export default function EditorSkeletonView() {
         <Header
           panelStatus={panelStatus}
           togglePanel={_.noop}
-          collissionStatus={collissionStatus}
-          toggleCollissionStatus={_.noop}
           editorModeStatus={editorModeStatus}
           toggleEditorModeStatus={_.noop}
         />
         <Body>
           <SiderStyled />
           {panelStatus.left && (
-            <LeftPanel>
+            <LeftPanel
+              collissionStatus={collissionStatus}
+              toggleCollissionStatus={_.noop}
+            >
               <StyledSkeleton active paragraph={{ rows: 10 }} />
             </LeftPanel>
           )}
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -20,9 +20,7 @@ import Header, {
   PanelStatus,
   TogglePanel,
   EditorModeStatus,
-  ToggleEditorModeStatus,
-  EnabledCollissionStatus,
-  ToggleCollissionStatus,
+  ToggleEditorModeStatus
 } from "pages/common/header";
 import { HelpDropdown } from "pages/common/help";
 import { PreviewHeader } from "pages/common/previewHeader";
@@ -76,6 +74,8 @@ import {
 import Bottom from "./bottom/BottomPanel";
 import { LeftContent } from "./LeftContent";
 import { isAggregationApp } from "util/appUtils";
+import { Switch } from "antd";
+import { SwitchChangeEventHandler } from "antd/es/switch";
 
 const HookCompContainer = styled.div`
   pointer-events: none;
@@ -141,6 +141,16 @@ const HelpDiv = styled.div`
     }
   }
 `;
+
+const LayoutMenuDiv = styled.div`
+  > div {
+    left: 6px;
+    right: auto;
+    height: 28px;
+    top: 15px;
+  }
+`;
+
 const SettingsDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -200,6 +210,7 @@ interface EditorViewProps {
 enum SiderKey {
   State = "state",
   Setting = "setting",
+  Layout = "layout",
 }
 
 const items = [
@@ -211,8 +222,18 @@ const items = [
     key: SiderKey.Setting,
     icon: <LeftSettingIcon />,
   },
+  {
+    key: SiderKey.Layout,
+    icon: <LeftSettingIcon />,
+  },
 ];
 
+  // added by Fred to set comp collision state
+export type EnabledCollissionStatus = "true" | "false"; // "true" means collission is enabled, "false" means collission is disabled
+export  type ToggleCollissionStatus = (
+    collissionStatus?: EnabledCollissionStatus
+  ) => void;
+
 function EditorView(props: EditorViewProps) {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
@@ -259,7 +280,7 @@ function EditorView(props: EditorViewProps) {
     [panelStatus, prePanelStatus]
   );
 
-  // added by Fred  to set comp collision state
+
   const [collisionStatus, setCollisionStatus] = useState(() => {
     return showCollission ? DefaultCollissionStatus : getCollissionStatus();
   });
@@ -381,9 +402,7 @@ function EditorView(props: EditorViewProps) {
         togglePanel={togglePanel}
         panelStatus={panelStatus}
         toggleEditorModeStatus={toggleEditorModeStatus}
-        toggleCollissionStatus={toggleCollissionStatus}
-        editorModeStatus={editorModeStatus}
-        collissionStatus={collisionStatus}
+        editorModeStatus={editorModeStatus} 
       />
       <Helmet>{application && <title>{application.name}</title>}</Helmet>
       {showNewUserGuide && <EditorTutorials />}
@@ -395,7 +414,8 @@ function EditorView(props: EditorViewProps) {
       >
         <Body>
           <SiderWrapper>
-            <Sider width={40}>
+            <Sider width={40} >
+              
               <Menu
                 theme="dark"
                 mode="inline"
@@ -404,7 +424,9 @@ function EditorView(props: EditorViewProps) {
                 items={items}
                 disabled={showAppSnapshot}
                 onClick={(params) => clickMenu(params)}
-              />
+              >
+              </Menu>
+              
               {!showAppSnapshot && (
                 <HelpDiv>
                   <HelpDropdown
@@ -451,6 +473,23 @@ function EditorView(props: EditorViewProps) {
                   {props.preloadComp.getJSLibraryPropertyView()}
                 </SettingsDiv>
               )}
+
+              
+
+              {menuKey === SiderKey.Layout && (
+                <SettingsDiv>
+                  <Switch
+                    checked={editorState.collissionStatus == "true"}
+                    disabled={false}
+                    onChange={(value: any) => {
+                      toggleCollissionStatus(value == true ? "true" : "false");
+                      editorState.setCollissionStatus(value == true ? "true" : "false");
+                    }}
+                  />
+                   <Divider />            
+                </SettingsDiv>
+              )}
+
             </LeftPanel>
           )}
           <MiddlePanel>
diff --git a/client/packages/lowcoder/src/util/localStorageUtil.ts b/client/packages/lowcoder/src/util/localStorageUtil.ts
@@ -1,4 +1,5 @@
-import { EnabledCollissionStatus, PanelStatus } from "pages/common/header";
+import { PanelStatus } from "pages/common/header";
+import { EnabledCollissionStatus } from "pages/editor/editorView";
 import { EditorModeStatus } from "pages/common/header";
 import log from "loglevel";
 import { JSONValue } from "util/jsonTypes";
