Commit 1df9973

authored

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

Allow pinning the code editor popup

2 parents 2c9cd17 + ded0c8b commit 1df9973Copy full SHA for 1df9973

File tree

2 files changed

+45

-6

lines changed

client/packages
- lowcoder-design/src/icons
  - index.ts
- lowcoder/src/pages/editor
  - codeEditorPanel.tsx

2 files changed

+45

-6

lines changed

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

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,8 @@ export { ReactComponent as ClickLinkIcon } from "./icon-clickLink.svg";`
`22`	`22`	`export { ReactComponent as CloseEyeIcon } from "./icon-closeEye.svg";`
`23`	`23`	`export { ReactComponent as CodeEditorCloseIcon } from "./icon-code-editor-close.svg";`
`24`	`24`	`export { ReactComponent as CodeEditorOpenIcon } from "./icon-code-editor-open.svg";`
	`25`	`+export { ReactComponent as CodeEditorPinnedIcon} from "./remix/pushpin-2-fill.svg"`
	`26`	`+export { ReactComponent as CodeEditorUnPinnedIcon} from "./remix/pushpin-line.svg"`
`25`	`27`	`export { ReactComponent as ColorHexIcon } from "./icon-colorHex.svg";`
`26`	`28`	`export { ReactComponent as ContainerDragIcon } from "./icon-container-drag.svg";`
`27`	`29`	`export { ReactComponent as CopyIcon } from "./icon-copy.svg";`

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

Lines changed: 43 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import styled from "styled-components";`
`2`	`2`	`import { ReactNode, useContext, useMemo, useRef, useState } from "react";`
`3`	`3`	`import { Layers } from "../../constants/Layers";`
`4`		`-import { CodeEditorOpenIcon } from "lowcoder-design";`
	`4`	`+import { CodeEditorOpenIcon,CodeEditorPinnedIcon,CodeEditorUnPinnedIcon } from "lowcoder-design";`
`5`	`5`	`import { CodeEditorCloseIcon } from "lowcoder-design";`
`6`	`6`	`import { DragIcon } from "lowcoder-design";`
`7`	`7`	`import Trigger from "rc-trigger";`
@@ -74,6 +74,11 @@ const OpenButton = styled.div`
`74`	`74`	`}`
`75`	`75`	`}`
`76`	`76`	`;
	`77`	+const Buttons = styled.div`
	`78`	`+ display: flex;`
	`79`	`+ justify-content: space-between;`
	`80`	`+ align-items: center;`
	`81`	+`
`77`	`82`	const CloseButton = styled.div`
`78`	`83`	`display: flex;`
`79`	`84`	`justify-content: space-between;`
@@ -98,6 +103,30 @@ const CloseButton = styled.div`
`98`	`103`	`}`
`99`	`104`	`}`
`100`	`105`	`;
	`106`	+const PinButton = styled.div`
	`107`	`+ width: 32px;`
	`108`	`+ height: 26px;`
	`109`	`+ border: 1px solid #d7d9e0;`
	`110`	`+ border-radius: 4px;`
	`111`	`+ color: #333333;`
	`112`	`+ padding: 2px ;`
	`113`	`+ cursor: pointer;`
	`114`	`+`
	`115`	`+ &:hover {`
	`116`	`+ background: #f5f5f6;`
	`117`	`+`
	`118`	`+ svg g g {`
	`119`	`+ stroke: #222222;`
	`120`	`+ }`
	`121`	`+ }`
	`122`	`+`
	`123`	`+ // fixes the icon when there's no text in the container`
	`124`	`+ svg {`
	`125`	`+ width: 100%;`
	`126`	`+ height: 100%;`
	`127`	`+ fill: currentColor;`
	`128`	`+ }`
	`129`	+`;
`101`	`130`
`102`	`131`	`export const CodeEditorPanel = (props: {`
`103`	`132`	`editor: ReactNode;`
`@@ -106,6 +135,8 @@ export const CodeEditorPanel = (props: {`
`106`	`135`	`}) => {`
`107`	`136`	`const draggableRef = useRef<HTMLDivElement>(null);`
`108`	`137`	`const [unDraggable, setUnDraggable] = useState(true);`
	`138`	`+ const [pinned, setPinned] = useState(false);`
	`139`	`+`
`109`	`140`	`const [bounds, setBounds] = useState({`
`110`	`141`	`left: 0,`
`111`	`142`	`top: 0,`
`@@ -126,7 +157,8 @@ export const CodeEditorPanel = (props: {`
`126`	`157`	`action={["click"]}`
`127`	`158`	`zIndex={Layers.codeEditorPanel}`
`128`	`159`	`popupStyle={{ opacity: 1, display: visible ? "block" : "none" }}`
`129`		`- maskClosable={true}`
	`160`	`+ maskClosable={!pinned}`
	`161`	`+ mask={true}`
`130`	`162`	`onPopupVisibleChange={(visible) => setVisible(visible)}`
`131`	`163`	`afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}`
`132`	`164`	`getPopupContainer={(node: any) => node.parentNode.parentNode}`
`@@ -169,10 +201,15 @@ export const CodeEditorPanel = (props: {`
`169`	`201`	`<StyledDragIcon />`
`170`	`202`	`{[compName, ...(props.breadcrumb ?? [])].filter((t) => !isEmpty(t)).join(" / ")}`
`171`	`203`	`</TitleWrapper>`
`172`		`- <CloseButton onClick={() => setVisible(false)}>`
`173`		`- <CodeEditorCloseIcon />`
`174`		`- {trans("codeEditor.fold")}`
`175`		`- </CloseButton>`
	`204`	`+ <Buttons>`
	`205`	`+ <PinButton onClick={() => setPinned(!pinned) }>`
	`206`	`+ {pinned ? <CodeEditorPinnedIcon/> : <CodeEditorUnPinnedIcon/>}`
	`207`	`+ </PinButton>`
	`208`	`+ <CloseButton onClick={() => setVisible(false)}>`
	`209`	`+ <CodeEditorCloseIcon />`
	`210`	`+ {trans("codeEditor.fold")}`
	`211`	`+ </CloseButton>`
	`212`	`+ </Buttons>`
`176`	`213`	`</HeaderWrapper>`
`177`	`214`
`178`	`215`	`<BodyWrapper>{props.editor}</BodyWrapper>`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 1df9973

File tree

2 files changed

2 files changed

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

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

0 commit comments