Movatterモバイル変換

Skip to content

Lowcoder-Pro/Lowcoder-BasePublic

forked fromlowcoder-org/lowcoder

NotificationsYou must be signed in to change notification settings
Fork0
Star0

Commit966fa27

sudoischenny

committed

Drawer Close Button Left or Right

Adds the ability to select the left or right position for the close button in the drawer component.

1 parent4c8be4b commit966fa27Copy full SHA for 966fa27

File tree

7 files changed

+50

-32

lines changed

client/packages/lowcoder/src
- comps/hooks
  - drawerComp.tsx
- i18n/locales
  - de.ts
  - en.ts
  - translation_files
  - zh.ts

7 files changed

+50

-32

lines changed

`‎client/packages/lowcoder/src/comps/hooks/drawerComp.tsx‎`

Lines changed: 44 additions & 31 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`		`-import{CloseOutlined}from"@ant-design/icons";`
	`1`	`+import{CloseOutlined,PropertySafetyFilled}from"@ant-design/icons";`
`2`	`2`	`import{defaultasButton}from"antd/es/button";`
`3`	`3`	`import{ContainerCompBuilder}from"comps/comps/containerBase/containerCompBuilder";`
`4`	`4`	`import{gridItemCompToGridItems,InnerGrid}from"comps/comps/containerComp/containerView";`
`5`	`5`	`import{AutoHeightControl}from"comps/controls/autoHeightControl";`
`6`	`6`	`import{BoolControl}from"comps/controls/boolControl";`
`7`	`7`	`import{StringControl}from"comps/controls/codeControl";`
`8`	`8`	`import{booleanExposingStateControl}from"comps/controls/codeStateControl";`
`9`		`-import{PositionControl}from"comps/controls/dropdownControl";`
	`9`	`+import{PositionControl,LeftRightControl}from"comps/controls/dropdownControl";`
`10`	`10`	`import{closeEvent,eventHandlerControl}from"comps/controls/eventHandlerControl";`
`11`	`11`	`import{styleControl}from"comps/controls/styleControl";`
`12`	`12`	`import{DrawerStyle}from"comps/controls/styleControlConstants";`
@@ -35,40 +35,22 @@ const DrawerWrapper = styled.div`
`35`	`35`	`pointer-events: auto;`
`36`	`36`	`;
`37`	`37`
`38`		-constButtonStyle=styled(Button)`
`39`		`- position: absolute;`
`40`		`- left: 0;`
`41`		`- top: 0;`
`42`		`- z-index: 10;`
`43`		`- font-weight: 700;`
`44`		`- box-shadow: none;`
`45`		`- color: rgba(0, 0, 0, 0.45);`
`46`		`- height: 54px;`
`47`		`- width: 54px;`
`48`		`-`
`49`		`- svg {`
`50`		`- width: 16px;`
`51`		`- height: 16px;`
`52`		`- }`
`53`		`-`
`54`		`- &,`
`55`		`- :hover,`
`56`		`- :focus {`
`57`		`- background-color: transparent;`
`58`		`- border: none;`
`59`		`- }`
`60`		`-`
`61`		`- :hover,`
`62`		`- :focus {`
`63`		`- color: rgba(0, 0, 0, 0.75);`
`64`		`- }`
`65`		-`;
`66`		`-`
`67`	`38`	`// If it is a number, use the px unit by default`
`68`	`39`	`functiontransToPxSize(size:string\|number){`
`69`	`40`	`returnisNumeric(size) ?size+"px" :(sizeasstring);`
`70`	`41`	`}`
`71`	`42`
	`43`	`+constClosePlacementOptions=[`
	`44`	`+{`
	`45`	`+label:trans("drawer.left"),`
	`46`	`+value:"left",`
	`47`	`+},`
	`48`	`+{`
	`49`	`+label:trans("drawer.right"),`
	`50`	`+value:"right",`
	`51`	`+},`
	`52`	`+]asconst;`
	`53`	`+`
`72`	`54`	`constPlacementOptions=[`
`73`	`55`	`{`
`74`	`56`	`label:trans("drawer.top"),`
`@@ -88,6 +70,7 @@ const PlacementOptions = [`
`88`	`70`	`},`
`89`	`71`	`]asconst;`
`90`	`72`
	`73`	`+`
`91`	`74`	`letTmpDrawerComp=(function(){`
`92`	`75`	`returnnewContainerCompBuilder(`
`93`	`76`	`{`
`@@ -98,6 +81,7 @@ let TmpDrawerComp = (function () {`
`98`	`81`	`autoHeight:AutoHeightControl,`
`99`	`82`	`style:styleControl(DrawerStyle),`
`100`	`83`	`placement:PositionControl,`
	`84`	`+closePosition:withDefault(LeftRightControl,"left"),`
`101`	`85`	`maskClosable:withDefault(BoolControl,true),`
`102`	`86`	`showMask:withDefault(BoolControl,true),`
`103`	`87`	`},`
`@@ -119,6 +103,34 @@ let TmpDrawerComp = (function () {`
`119`	`103`	`},`
`120`	`104`	`[dispatch,isTopBom]`
`121`	`105`	`);`
	`106`	+constButtonStyle=styled(Button)`
	`107`	`+ position: absolute;`
	`108`	`+${props.closePosition==="right" ?"right: 0;" :"left: 0;"}`
	`109`	`+ top: 0;`
	`110`	`+ z-index: 10;`
	`111`	`+ font-weight: 700;`
	`112`	`+ box-shadow: none;`
	`113`	`+ color: rgba(0, 0, 0, 0.45);`
	`114`	`+ height: 54px;`
	`115`	`+ width: 54px;`
	`116`	`+`
	`117`	`+ svg {`
	`118`	`+ width: 16px;`
	`119`	`+ height: 16px;`
	`120`	`+ }`
	`121`	`+`
	`122`	`+ &,`
	`123`	`+ :hover,`
	`124`	`+ :focus {`
	`125`	`+ background-color: transparent;`
	`126`	`+ border: none;`
	`127`	`+ }`
	`128`	`+`
	`129`	`+ :hover,`
	`130`	`+ :focus {`
	`131`	`+ color: rgba(0, 0, 0, 0.75);`
	`132`	`+ }`
	`133`	+ `;
`122`	`134`	`return(`
`123`	`135`	`<BackgroundColorContext.Providervalue={props.style.background}>`
`124`	`136`	`<DrawerWrapper>`
`@@ -181,6 +193,7 @@ let TmpDrawerComp = (function () {`
`181`	`193`	`.setPropertyViewFn((children)=>(`
`182`	`194`	`<>`
`183`	`195`	`<Sectionname={sectionNames.basic}>`
	`196`	`+{children.closePosition.propertyView({label:trans("drawer.closePosition"),radioButton:true})}`
`184`	`197`	`{children.placement.propertyView({label:trans("drawer.placement"),radioButton:true})}`
`185`	`198`	`{["top","bottom"].includes(children.placement.getView())`
`186`	`199`	`?children.autoHeight.getPropertyView()`

`‎client/packages/lowcoder/src/i18n/locales/de.ts‎`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1347,6 +1347,7 @@ export const de = {`
`1347`	`1347`	`"title":"Angezeigter Container-Titel"`
`1348`	`1348`	`},`
`1349`	`1349`	`"drawer":{`
	`1350`	`+"closePosition":"Platzierung der Verschlusses",`
`1350`	`1351`	`"placement":"Platzierung der Schubladen",`
`1351`	`1352`	`"size":"Größe",`
`1352`	`1353`	`"top":"Top",`

`‎client/packages/lowcoder/src/i18n/locales/en.ts‎`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1500,6 +1500,7 @@ export const en = {`
`1500`	`1500`	`"title":"Displayed Container Title"`
`1501`	`1501`	`},`
`1502`	`1502`	`"drawer":{`
	`1503`	`+"closePosition":"Close Button Placement",`
`1503`	`1504`	`"placement":"Drawer Placement",`
`1504`	`1505`	`"size":"Size",`
`1505`	`1506`	`"top":"Top",`

`‎client/packages/lowcoder/src/i18n/locales/translation_files/de.json‎`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1335,6 +1335,7 @@`
`1335`	`1335`	`"title":"Angezeigter Container-Titel"`
`1336`	`1336`	`},`
`1337`	`1337`	`"drawer": {`
	`1338`	`+"closePosition":"Platzierung der Verschlusses",`
`1338`	`1339`	`"placement":"Platzierung der Schubladen",`
`1339`	`1340`	`"size":"Größe",`
`1340`	`1341`	`"top":"Top",`

`‎client/packages/lowcoder/src/i18n/locales/translation_files/en.json‎`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1399,6 +1399,7 @@`
`1399`	`1399`	`"title":"Displayed Container Title"`
`1400`	`1400`	`},`
`1401`	`1401`	`"drawer": {`
	`1402`	`+"closePosition":"Close Button Placement",`
`1402`	`1403`	`"placement":"Drawer Placement",`
`1403`	`1404`	`"size":"Size",`
`1404`	`1405`	`"top":"Top",`

`‎client/packages/lowcoder/src/i18n/locales/translation_files/es.json‎`

Lines changed: 1 addition & 1 deletion

Large diffs are not rendered by default.

`‎client/packages/lowcoder/src/i18n/locales/zh.ts‎`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1469,6 +1469,7 @@ container: {`
`1469`	`1469`	`title:"容器标题",`
`1470`	`1470`	`},`
`1471`	`1471`	`drawer:{`
	`1472`	`+closePosition:"关闭位置",`
`1472`	`1473`	`placement:"抽屉位置",`
`1473`	`1474`	`size:"大小",`
`1474`	`1475`	`top:"顶部",`

0 commit comments

Comments

(0)

[8]ページ先頭

©2009-2025 Movatter.jp