Skip to content

Navigation Menu

Sign in
Appearance settings

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

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 966fa27

Browse files
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 parent 4c8be4b commit 966fa27

File tree

7 files changed

+50
-32
lines changed

7 files changed

+50
-32
lines changed

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

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { CloseOutlined } from "@ant-design/icons";
1+
import { CloseOutlined,PropertySafetyFilled } from "@ant-design/icons";
22
import { default as Button } from "antd/es/button";
33
import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
44
import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
55
import { AutoHeightControl } from "comps/controls/autoHeightControl";
66
import { BoolControl } from "comps/controls/boolControl";
77
import { StringControl } from "comps/controls/codeControl";
88
import { booleanExposingStateControl } from "comps/controls/codeStateControl";
9-
import { PositionControl } from "comps/controls/dropdownControl";
9+
import { PositionControl,LeftRightControl } from "comps/controls/dropdownControl";
1010
import { closeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
1111
import { styleControl } from "comps/controls/styleControl";
1212
import { DrawerStyle } from "comps/controls/styleControlConstants";
@@ -35,40 +35,22 @@ const DrawerWrapper = styled.div`
3535
pointer-events: auto;
3636
`;
3737

38-
const ButtonStyle = 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-
6738
// If it is a number, use the px unit by default
6839
function transToPxSize(size: string | number) {
6940
return isNumeric(size) ? size + "px" : (size as string);
7041
}
7142

43+
const ClosePlacementOptions = [
44+
{
45+
label: trans("drawer.left"),
46+
value: "left",
47+
},
48+
{
49+
label: trans("drawer.right"),
50+
value: "right",
51+
},
52+
] as const;
53+
7254
const PlacementOptions = [
7355
{
7456
label: trans("drawer.top"),
@@ -88,6 +70,7 @@ const PlacementOptions = [
8870
},
8971
] as const;
9072

73+
9174
let TmpDrawerComp = (function () {
9275
return new ContainerCompBuilder(
9376
{
@@ -98,6 +81,7 @@ let TmpDrawerComp = (function () {
9881
autoHeight: AutoHeightControl,
9982
style: styleControl(DrawerStyle),
10083
placement: PositionControl,
84+
closePosition: withDefault(LeftRightControl, "left"),
10185
maskClosable: withDefault(BoolControl, true),
10286
showMask: withDefault(BoolControl, true),
10387
},
@@ -119,6 +103,34 @@ let TmpDrawerComp = (function () {
119103
},
120104
[dispatch, isTopBom]
121105
);
106+
const ButtonStyle = 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+
`;
122134
return (
123135
<BackgroundColorContext.Provider value={props.style.background}>
124136
<DrawerWrapper>
@@ -181,6 +193,7 @@ let TmpDrawerComp = (function () {
181193
.setPropertyViewFn((children) => (
182194
<>
183195
<Section name={sectionNames.basic}>
196+
{children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })}
184197
{children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })}
185198
{["top", "bottom"].includes(children.placement.getView())
186199
? children.autoHeight.getPropertyView()

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,6 +1347,7 @@ export const de = {
13471347
"title": "Angezeigter Container-Titel"
13481348
},
13491349
"drawer": {
1350+
"closePosition": "Platzierung der Verschlusses",
13501351
"placement": "Platzierung der Schubladen",
13511352
"size": "Größe",
13521353
"top": "Top",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1500,6 +1500,7 @@ export const en = {
15001500
"title": "Displayed Container Title"
15011501
},
15021502
"drawer": {
1503+
"closePosition": "Close Button Placement",
15031504
"placement": "Drawer Placement",
15041505
"size": "Size",
15051506
"top": "Top",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1335,6 +1335,7 @@
13351335
"title": "Angezeigter Container-Titel"
13361336
},
13371337
"drawer": {
1338+
"closePosition": "Platzierung der Verschlusses",
13381339
"placement": "Platzierung der Schubladen",
13391340
"size": "Größe",
13401341
"top": "Top",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1399,6 +1399,7 @@
13991399
"title": "Displayed Container Title"
14001400
},
14011401
"drawer": {
1402+
"closePosition": "Close Button Placement",
14021403
"placement": "Drawer Placement",
14031404
"size": "Size",
14041405
"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 numberDiff line numberDiff line change
@@ -1469,6 +1469,7 @@ container: {
14691469
title: "容器标题",
14701470
},
14711471
drawer: {
1472+
closePosition: "关闭位置",
14721473
placement: "抽屉位置",
14731474
size: "大小",
14741475
top: "顶部",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /