Merge pull request #799 from snowe2010/allow-pinning-code-editor-popup

Allow pinning the code editor popup

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/index.ts

@@ -22,6 +22,8 @@ export { ReactComponent as ClickLinkIcon } from "./icon-clickLink.svg";
 export { ReactComponent as CloseEyeIcon } from "./icon-closeEye.svg";
 export { ReactComponent as CodeEditorCloseIcon } from "./icon-code-editor-close.svg";
 export { ReactComponent as CodeEditorOpenIcon } from "./icon-code-editor-open.svg";
+export { ReactComponent as CodeEditorPinnedIcon} from "./remix/pushpin-2-fill.svg"
+export { ReactComponent as CodeEditorUnPinnedIcon} from "./remix/pushpin-line.svg"
 export { ReactComponent as ColorHexIcon } from "./icon-colorHex.svg";
 export { ReactComponent as ContainerDragIcon } from "./icon-container-drag.svg";
 export { ReactComponent as CopyIcon } from "./icon-copy.svg";

client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { ReactNode, useContext, useMemo, useRef, useState } from "react";
 import { Layers } from "../../constants/Layers";
-import { CodeEditorOpenIcon } from "lowcoder-design";
+import { CodeEditorOpenIcon, CodeEditorPinnedIcon, CodeEditorUnPinnedIcon } from "lowcoder-design";
 import { CodeEditorCloseIcon } from "lowcoder-design";
 import { DragIcon } from "lowcoder-design";
 import Trigger from "rc-trigger";
@@ -74,6 +74,11 @@ const OpenButton = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
 const CloseButton = styled.div`
   display: flex;
   justify-content: space-between;
@@ -98,6 +103,30 @@ const CloseButton = styled.div`
     }
   }
 `;
+const PinButton = styled.div`
+    width: 32px;
+    height: 26px;
+    border: 1px solid #d7d9e0;
+    border-radius: 4px;
+    color: #333333;
+    padding: 2px ;
+    cursor: pointer;
+
+    &:hover {
+        background: #f5f5f6;
+
+        svg g g {
+            stroke: #222222;
+        }
+    }
+
+    // fixes the icon when there's no text in the container
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor; 
+    }
+`;
 
 export const CodeEditorPanel = (props: {
   editor: ReactNode;
@@ -106,6 +135,8 @@ export const CodeEditorPanel = (props: {
 }) => {
   const draggableRef = useRef<HTMLDivElement>(null);
   const [unDraggable, setUnDraggable] = useState(true);
+  const [pinned, setPinned] = useState(false);
+
   const [bounds, setBounds] = useState({
     left: 0,
     top: 0,
@@ -126,7 +157,8 @@ export const CodeEditorPanel = (props: {
       action={["click"]}
       zIndex={Layers.codeEditorPanel}
       popupStyle={{ opacity: 1, display: visible ? "block" : "none" }}
-      maskClosable={true}
+      maskClosable={!pinned}
+      mask={true}
       onPopupVisibleChange={(visible) => setVisible(visible)}
       afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
       getPopupContainer={(node: any) => node.parentNode.parentNode}
@@ -169,10 +201,15 @@ export const CodeEditorPanel = (props: {
                   <StyledDragIcon />
                   {[compName, ...(props.breadcrumb ?? [])].filter((t) => !isEmpty(t)).join(" / ")}
                 </TitleWrapper>
-                <CloseButton onClick={() => setVisible(false)}>
-                  <CodeEditorCloseIcon />
-                  {trans("codeEditor.fold")}
-                </CloseButton>
+                <Buttons>
+                  <PinButton onClick={() => setPinned(!pinned) }> 
+                    {pinned ? <CodeEditorPinnedIcon/> : <CodeEditorUnPinnedIcon/>}
+                  </PinButton>
+                  <CloseButton onClick={() => setVisible(false)}>
+                    <CodeEditorCloseIcon />
+                    {trans("codeEditor.fold")}
+                  </CloseButton>
+                </Buttons>
               </HeaderWrapper>
 
               <BodyWrapper>{props.editor}</BodyWrapper>