From 91f82cf9fecf6b2476138dfef23dd9cbd25022b4 Mon Sep 17 00:00:00 2001
From: "Tyler B. Thrailkill" <tylerbthrailkill@gmail.com>
Date: Sun, 7 Apr 2024 00:10:40 -0600
Subject: [PATCH] Allow pinning the code editor popup

The code editor popup now has a button to allow 'pinning' the editor to
the screen so that it does not disappear when you click outside of it.
This currently only works if the right panel stays open, so that means
you cannot click inside of the app window unless it's on your component.
Anything else will dismiss the right panel and the popup will disappear,
even if pinned.
---
 .../lowcoder-design/src/icons/index.ts        |  2 +
 .../src/pages/editor/codeEditorPanel.tsx      | 49 ++++++++++++++++---
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
index 589bd8799..138c14b42 100644
--- a/client/packages/lowcoder-design/src/icons/index.ts
+++ b/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";
diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
index d50f00d7c..1eed80b8b 100644
--- a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
+++ b/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>