Skip to content

Commit 9c14cd9

Browse files
author
Wesley
committed
fix native popupmenu background
1 parent 3770a44 commit 9c14cd9

File tree

15 files changed

+294
-127
lines changed

15 files changed

+294
-127
lines changed

‎styles/native/js/core/base/flex.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,10 @@ export const alignChildrenBaseline = {
124124
},
125125
};
126126
export const childrenCenter = {
127-
container: Object.assign(Object.assign({}, justifyContentCenter.container), alignChildrenCenter.container),
127+
container: {
128+
...justifyContentCenter.container,
129+
...alignChildrenCenter.container,
130+
},
128131
};
129132
export const alignContentStart = {
130133
container: {

‎styles/native/js/core/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"name": "Atlas-UI-Framework",
33
"version": "2.5.7"
4-
}
4+
}

‎styles/native/js/core/widgets/checkbox.js‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,16 @@ To customize any core styling, copy the part you want to customize to styles/nat
1414
Default Class For Mendix CheckBox Widget
1515
========================================================================== */
1616
export const CheckBox = {
17-
container: Object.assign(Object.assign({}, TextBox.container), { paddingVertical: spacing.smallest, justifyContent: "center" }),
18-
label: Object.assign({}, TextBox.label),
17+
container: {
18+
// All ViewStyle properties are allowed
19+
...TextBox.container,
20+
paddingVertical: spacing.smallest,
21+
justifyContent: "center",
22+
},
23+
label: {
24+
// numberOfLines and all TextStyle properties are allowed
25+
...TextBox.label,
26+
},
1927
input: {
2028
// thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
2129
backgroundColor: "transparent",
@@ -29,14 +37,39 @@ export const CheckBox = {
2937
// thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
3038
opacity: Platform.select({ android: 0.5 }),
3139
},
32-
inputError: Object.assign(Object.assign({}, TextBox.inputError), { thumbColorOn: background.primary, trackColorOn: brand.danger, thumbColorOff: contrast.regular, trackColorOff: brand.danger }),
33-
validationMessage: Object.assign(Object.assign({}, TextBox.validationMessage), { alignSelf: "stretch" }),
40+
inputError: {
41+
// thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
42+
...TextBox.inputError,
43+
thumbColorOn: background.primary,
44+
trackColorOn: brand.danger,
45+
thumbColorOff: contrast.regular,
46+
trackColorOff: brand.danger,
47+
},
48+
validationMessage: {
49+
// All TextStyle properties are allowed
50+
...TextBox.validationMessage,
51+
alignSelf: "stretch",
52+
},
3453
};
3554
export const CheckBoxVertical = {
3655
container: TextBoxVertical.container,
37-
label: Object.assign({}, TextBoxVertical.label),
38-
input: Object.assign(Object.assign({}, CheckBox.input), { alignSelf: "flex-start" }),
56+
label: {
57+
...TextBoxVertical.label,
58+
},
59+
input: {
60+
...CheckBox.input,
61+
alignSelf: "flex-start",
62+
},
3963
inputDisabled: CheckBox.inputDisabled,
40-
inputError: Object.assign(Object.assign({}, TextBoxVertical.inputError), { thumbColorOn: background.primary, trackColorOn: brand.danger, thumbColorOff: contrast.regular, trackColorOff: brand.danger }),
41-
validationMessage: Object.assign(Object.assign({}, TextBoxVertical.validationMessage), { alignSelf: "stretch" }),
64+
inputError: {
65+
...TextBoxVertical.inputError,
66+
thumbColorOn: background.primary,
67+
trackColorOn: brand.danger,
68+
thumbColorOff: contrast.regular,
69+
trackColorOff: brand.danger,
70+
},
71+
validationMessage: {
72+
...TextBoxVertical.validationMessage,
73+
alignSelf: "stretch",
74+
},
4275
};

‎styles/native/js/core/widgets/datepicker.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,14 @@ const pickerBackgroundColor = !darkMode && isOSDarkMode ?
2222
darkMode && !isOSDarkMode ? "rgba(255, 255, 255, 1)" : input.backgroundColor;
2323
//
2424
export const DatePicker = {
25-
container: Object.assign({}, TextBox.container),
26-
label: Object.assign({}, TextBox.label),
25+
container: {
26+
// All ViewStyle properties are allowed
27+
...TextBox.container,
28+
},
29+
label: {
30+
// numberOfLines and all TextStyle properties are allowed
31+
...TextBox.label,
32+
},
2733
pickerIOS: {
2834
// All ViewStyle properties are allowed
2935
backgroundColor: pickerBackgroundColor,
@@ -58,7 +64,10 @@ export const DatePicker = {
5864
placeholderDisabled: {
5965
// All TextStyle properties are allowed
6066
},
61-
validationMessage: Object.assign({}, TextBox.validationMessage),
67+
validationMessage: {
68+
// All TextStyle properties are allowed
69+
...TextBox.validationMessage,
70+
},
6271
};
6372
export const DatePickerVertical = {
6473
container: TextBoxVertical.container,

‎styles/native/js/core/widgets/dropdown.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,14 @@ To customize any core styling, copy the part you want to customize to styles/nat
1313
Default Class For Mendix Drop Down Widget
1414
========================================================================== */
1515
export const DropDown = {
16-
container: Object.assign({}, TextBox.container),
17-
label: Object.assign({}, TextBox.label),
16+
container: {
17+
// All ViewStyle properties are allowed
18+
...TextBox.container,
19+
},
20+
label: {
21+
// numberOfLines and all TextStyle properties are allowed
22+
...TextBox.label,
23+
},
1824
value: {
1925
// All TextStyle properties & placeholderTextColor are allowed
2026
color: input.color,
@@ -32,7 +38,10 @@ export const DropDown = {
3238
// All TextStyle properties are allowed
3339
backgroundColor: input.disabledBackgroundColor,
3440
},
35-
validationMessage: Object.assign({}, TextBox.validationMessage),
41+
validationMessage: {
42+
// All TextStyle properties are allowed
43+
...TextBox.validationMessage,
44+
},
3645
/* New dropdown styles start */
3746
valueContainer: {
3847
// All ViewStyle properties & rippleColor are allowed

‎styles/native/js/core/widgets/pagetitle.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,9 @@ export const PageTitle = {
1616
container: {
1717
// All ViewStyle properties are allowed
1818
},
19-
text: Object.assign(Object.assign({}, TextHeading1.text), { color: font.color }),
19+
text: {
20+
// All TextStyle properties are allowed
21+
...TextHeading1.text,
22+
color: font.color,
23+
},
2024
};

‎styles/native/js/core/widgets/popupmenu.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { brand, font } from "../variables";
1+
import { background, brand, font } from "../variables";
22
/*
33
44
DISCLAIMER:
@@ -19,6 +19,7 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = {
1919
shadowOpacity: 0.2,
2020
shadowRadius: 10,
2121
elevation: 16,
22+
backgroundColor: background.primary,
2223
},
2324
basic: {
2425
dividerColor: font.color,

‎styles/native/js/core/widgets/progressbar.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,19 @@ export const com_mendix_widget_native_progressbar_ProgressBar = {
1818
// All ViewStyle properties are allowed
1919
alignSelf: "stretch",
2020
},
21-
bar: Object.assign({}, Platform.select({
22-
ios: {
23-
borderColor: brand.primary,
24-
},
25-
android: {
26-
borderRadius: 0,
27-
borderWidth: 0,
28-
backgroundColor: `rgba(${anyColorToRgbString(brand.primary)},0.2)`,
29-
},
30-
})),
21+
bar: {
22+
// All ViewStyle properties are allowed
23+
...Platform.select({
24+
ios: {
25+
borderColor: brand.primary,
26+
},
27+
android: {
28+
borderRadius: 0,
29+
borderWidth: 0,
30+
backgroundColor: `rgba(${anyColorToRgbString(brand.primary)},0.2)`,
31+
},
32+
}),
33+
},
3134
fill: {
3235
//Only the backgroundColor property is allowed
3336
backgroundColor: brand.primary,

‎styles/native/js/core/widgets/referenceselector.js‎

Lines changed: 71 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { input } from "../variables";
2-
import { DropDown } from "./dropdown.js";
1+
import { border, contrast, font, input } from "../variables";
2+
import { DropDown } from "./dropdown";
33
import { TextBox, TextBoxVertical } from "./textbox";
44
/*
55
@@ -14,47 +14,97 @@ To customize any core styling, copy the part you want to customize to styles/nat
1414
Default Class For Mendix Reference Selector Widget
1515
========================================================================== */
1616
export const ReferenceSelector = {
17-
container: Object.assign({}, TextBox.container),
18-
label: Object.assign({}, TextBox.label),
19-
pickerIOS: {
17+
container: {
2018
// All ViewStyle properties are allowed
21-
backgroundColor: input.backgroundColor,
22-
},
23-
pickerItemIOS: {
24-
// All TextStyle properties are allowed
19+
...TextBox.container,
2520
},
26-
pickerBackdropIOS: {
27-
// All ViewStyle properties are allowed
28-
},
29-
pickerTopIOS: {
30-
// All ViewStyle properties are allowed
31-
backgroundColor: input.backgroundColor,
21+
label: {
22+
// numberOfLines and all TextStyle properties are allowed
23+
...TextBox.label,
3224
},
3325
value: {
34-
// All TextStyle properties are allowed
26+
// All TextStyle properties & placeholderTextColor are allowed
3527
color: input.color,
3628
borderColor: input.borderColor,
3729
backgroundColor: input.backgroundColor,
3830
fontSize: input.fontSize,
3931
fontFamily: input.fontFamily,
4032
borderWidth: input.borderWidth,
4133
borderRadius: input.borderRadius,
34+
overflow: "hidden",
4235
paddingHorizontal: input.paddingHorizontal,
4336
paddingVertical: input.paddingVertical,
37+
placeholderTextColor: input.placeholderTextColor,
4438
},
4539
valueDisabled: {
4640
// All TextStyle properties are allowed
4741
backgroundColor: input.disabledBackgroundColor,
4842
},
49-
validationMessage: Object.assign({}, TextBox.validationMessage),
43+
validationMessage: {
44+
// All TextStyle properties are allowed
45+
...TextBox.validationMessage,
46+
},
47+
/* New dropdown styles start */
48+
valueContainer: {
49+
// All ViewStyle properties & rippleColor are allowed
50+
},
51+
menuWrapper: {
52+
// All ViewStyle properties are allowed
53+
borderRadius: border.radius,
54+
shadowColor: "#000",
55+
shadowOpacity: 0.2,
56+
shadowRadius: 10,
57+
elevation: 16,
58+
},
59+
itemContainer: {
60+
// All ViewStyle properties are allowed
61+
maxWidth: 500,
62+
paddingVertical: 6,
63+
paddingHorizontal: 16,
64+
backgroundColor: input.backgroundColor,
65+
},
66+
item: {
67+
// All TextStlye properties are allowed
68+
color: input.color,
69+
},
70+
selectedItem: {
71+
// All TextStlye properties are allowed
72+
fontWeight: font.weightBold,
73+
},
74+
selectedItemContainer: {
75+
// All ViewStyle properties are allowed
76+
backgroundColor: contrast.lowest,
77+
},
78+
/* New dropdown styles end */
79+
useUniformDesign: true,
80+
/* Old dropdown styles start */
81+
pickerIOS: {
82+
// All ViewStyle properties are allowed
83+
backgroundColor: input.backgroundColor,
84+
},
85+
pickerItemIOS: {
86+
// All TextStyle properties are allowed
87+
},
88+
pickerBackdropIOS: {
89+
// All ViewStyle properties are allowed
90+
},
91+
pickerTopIOS: {
92+
// All ViewStyle properties are allowed
93+
backgroundColor: input.backgroundColor,
94+
},
5095
};
5196
export const ReferenceSelectorVertical = {
5297
container: TextBoxVertical.container,
5398
label: TextBoxVertical.label,
54-
pickerIOS: ReferenceSelector.pickerIOS,
55-
pickerItemIOS: ReferenceSelector.pickerItemIOS,
56-
pickerBackdropIOS: ReferenceSelector.pickerBackdropIOS,
57-
pickerTopIOS: ReferenceSelector.pickerTopIOS,
5899
value: DropDown.value,
59100
validationMessage: TextBoxVertical.validationMessage,
101+
valueContainer: DropDown.valueContainer,
102+
menuWrapper: DropDown.menuWrapper,
103+
itemContainer: DropDown.itemContainer,
104+
item: DropDown.item,
105+
useUniformDesign: DropDown.useUniformDesign,
106+
pickerIOS: DropDown.pickerIOS,
107+
pickerItemIOS: DropDown.pickerItemIOS,
108+
pickerBackdropIOS: DropDown.pickerBackdropIOS,
109+
pickerTopIOS: DropDown.pickerTopIOS,
60110
};

0 commit comments

Comments
 (0)