Skip to content

Commit 433b61c

Browse files
stelselimMxKevinBeqo
stelselim
authored and
MxKevinBeqo
committed
fix: update the design to previous one
1 parent 5e33b0b commit 433b61c

2 files changed

Lines changed: 59 additions & 165 deletions

File tree

‎packages/pluggableWidgets/range-slider-native/src/ui/Styles.ts‎

Lines changed: 30 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Style } from "@mendix/piw-native-utils-internal";
2-
import { Platform, TextStyle, ViewStyle } from "react-native";
2+
import { TextStyle, ViewStyle } from "react-native";
33

44
export interface RangeSliderStyle extends Style {
55
container: ViewStyle;
@@ -16,88 +16,36 @@ export interface RangeSliderStyle extends Style {
1616
}
1717

1818
const blue = "rgb(0,122,255)";
19-
const blueLighter = "rgba(0,122,255,0.3)";
20-
const purple = "rgb(98,0,238)";
21-
const purpleLighter = "rgba(98,0,238, 0.3)";
22-
const purpleLightest = "rgba(98,0,238, 0.1)";
19+
20+
const trackBase: ViewStyle = {
21+
height: 4,
22+
borderRadius: 2
23+
};
24+
25+
const thumbBase: ViewStyle = {
26+
height: 30,
27+
width: 30,
28+
borderRadius: 30,
29+
borderWidth: 1,
30+
borderColor: "#DDDDDD",
31+
backgroundColor: "#FFFFFF",
32+
shadowColor: "#000000",
33+
shadowOffset: { width: 0, height: 3 },
34+
shadowRadius: 1,
35+
shadowOpacity: 0.2,
36+
elevation: 3
37+
};
2338

2439
export const defaultRangeSliderStyle: RangeSliderStyle = {
2540
container: {},
26-
track: {
27-
height: 4,
28-
borderRadius: 2
29-
},
30-
trackDisabled: {
31-
height: 4,
32-
borderRadius: 2,
33-
...Platform.select({
34-
ios: { opacity: 0.4 },
35-
android: {}
36-
})
37-
},
38-
minimumTrack: {
39-
backgroundColor: Platform.select({ ios: blue, android: purple })
40-
},
41-
minimumTrackDisabled: {
42-
backgroundColor: Platform.select({ ios: blue, android: "#AAA" })
43-
},
44-
maximumTrack: {
45-
backgroundColor: Platform.select({ ios: blueLighter, android: purpleLighter })
46-
},
47-
maximumTrackDisabled: {
48-
...Platform.select({
49-
ios: { backgroundColor: blueLighter },
50-
android: { backgroundColor: "#EEE" }
51-
})
52-
},
53-
thumb: {
54-
...Platform.select({
55-
ios: {
56-
height: 30,
57-
width: 30,
58-
borderRadius: 30,
59-
borderWidth: 1,
60-
borderColor: "#DDDDDD",
61-
backgroundColor: "#FFFFFF",
62-
shadowColor: "#000000",
63-
shadowOffset: { width: 0, height: 3 },
64-
shadowRadius: 1,
65-
shadowOpacity: 0.2
66-
},
67-
android: {
68-
height: 12,
69-
width: 12,
70-
borderRadius: 12,
71-
backgroundColor: purple
72-
}
73-
})
74-
},
75-
thumbActive: {
76-
...Platform.select({
77-
android: {
78-
height: 20,
79-
width: 20,
80-
borderRadius: 20,
81-
borderWidth: 5,
82-
borderColor: purpleLightest,
83-
backgroundColor: purple
84-
}
85-
})
86-
},
87-
thumbDisabled: {
88-
...Platform.select({
89-
ios: {
90-
backgroundColor: "#FFF",
91-
shadowOpacity: 0.1,
92-
borderColor: "rgba(221,221,221,0.6)"
93-
},
94-
android: {
95-
elevation: 0,
96-
backgroundColor: "#AAA"
97-
}
98-
})
99-
},
100-
validationMessage: {
101-
color: "#ed1c24"
102-
}
41+
track: trackBase,
42+
trackDisabled: { ...trackBase, opacity: 0.4 },
43+
minimumTrack: { backgroundColor: blue },
44+
minimumTrackDisabled: { backgroundColor: blue },
45+
maximumTrack: { backgroundColor: "#E7E7E7" },
46+
maximumTrackDisabled: { backgroundColor: "#E7E7E7" },
47+
thumb: thumbBase,
48+
thumbActive: thumbBase,
49+
thumbDisabled: thumbBase,
50+
validationMessage: { color: "#ed1c24" }
10351
};

‎packages/pluggableWidgets/slider-native/src/ui/Styles.ts‎

Lines changed: 29 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Style } from "@mendix/piw-native-utils-internal";
2-
import { Platform, TextStyle, ViewStyle } from "react-native";
2+
import { TextStyle, ViewStyle } from "react-native";
33

44
export interface SliderStyle extends Style {
55
container: ViewStyle;
@@ -10,94 +10,40 @@ export interface SliderStyle extends Style {
1010
maximumTrack: ViewStyle;
1111
maximumTrackDisabled: ViewStyle;
1212
thumb: ViewStyle;
13-
thumbActive: ViewStyle;
1413
thumbDisabled: ViewStyle;
1514
validationMessage: TextStyle;
1615
}
1716

1817
const blue = "rgb(0,122,255)";
19-
const blueLighter = "rgba(0,122,255,0.3)";
20-
const purple = "rgb(98,0,238)";
21-
const purpleLighter = "rgba(98,0,238, 0.3)";
22-
const purpleLightest = "rgba(98,0,238, 0.1)";
18+
19+
const trackBase: ViewStyle = {
20+
height: 4,
21+
borderRadius: 2
22+
};
23+
24+
const thumbBase: ViewStyle = {
25+
height: 30,
26+
width: 30,
27+
borderRadius: 30,
28+
borderWidth: 1,
29+
borderColor: "#DDDDDD",
30+
backgroundColor: "#FFFFFF",
31+
shadowColor: "#000000",
32+
shadowOffset: { width: 0, height: 3 },
33+
shadowRadius: 1,
34+
shadowOpacity: 0.2,
35+
elevation: 3
36+
};
2337

2438
export const defaultSliderStyle: SliderStyle = {
2539
container: {},
26-
track: {
27-
height: 4,
28-
borderRadius: 2
29-
},
30-
trackDisabled: {
31-
height: 4,
32-
borderRadius: 2,
33-
...Platform.select({
34-
ios: { opacity: 0.4 },
35-
android: {}
36-
})
37-
},
38-
minimumTrack: {
39-
backgroundColor: Platform.select({ ios: blue, android: purple })
40-
},
41-
minimumTrackDisabled: {
42-
backgroundColor: Platform.select({ ios: blue, android: "#AAA" })
43-
},
44-
maximumTrack: {
45-
backgroundColor: Platform.select({ ios: blueLighter, android: purpleLighter })
46-
},
47-
maximumTrackDisabled: {
48-
...Platform.select({
49-
ios: { backgroundColor: blueLighter },
50-
android: { backgroundColor: "#EEE" }
51-
})
52-
},
53-
thumb: {
54-
...Platform.select({
55-
ios: {
56-
height: 30,
57-
width: 30,
58-
borderRadius: 30,
59-
borderWidth: 1,
60-
borderColor: "#DDDDDD",
61-
backgroundColor: "#FFFFFF",
62-
shadowColor: "#000000",
63-
shadowOffset: { width: 0, height: 3 },
64-
shadowRadius: 1,
65-
shadowOpacity: 0.2
66-
},
67-
android: {
68-
height: 12,
69-
width: 12,
70-
borderRadius: 12,
71-
backgroundColor: purple
72-
}
73-
})
74-
},
75-
thumbActive: {
76-
...Platform.select({
77-
android: {
78-
height: 20,
79-
width: 20,
80-
borderRadius: 20,
81-
borderWidth: 5,
82-
borderColor: purpleLightest,
83-
backgroundColor: purple
84-
}
85-
})
86-
},
87-
thumbDisabled: {
88-
...Platform.select({
89-
ios: {
90-
backgroundColor: "#FFF",
91-
shadowOpacity: 0.1,
92-
borderColor: "rgba(221,221,221,0.6)"
93-
},
94-
android: {
95-
elevation: 0,
96-
backgroundColor: "#AAA"
97-
}
98-
})
99-
},
100-
validationMessage: {
101-
color: "#ed1c24"
102-
}
40+
track: trackBase,
41+
trackDisabled: { ...trackBase, opacity: 0.4 },
42+
minimumTrack: { backgroundColor: blue },
43+
minimumTrackDisabled: { backgroundColor: blue },
44+
maximumTrack: { backgroundColor: "#E7E7E7" },
45+
maximumTrackDisabled: { backgroundColor: "#E7E7E7" },
46+
thumb: thumbBase,
47+
thumbDisabled: thumbBase,
48+
validationMessage: { color: "#ed1c24" }
10349
};

0 commit comments

Comments
 (0)