Skip to content
This repository was archived by the owner on Dec 21, 2022. It is now read-only.

Commit 34c3114

Browse files
UrazAkgultanUrazAkgultan
authored
Merge pull request #1663 from mendix/nc/feat/gallery-native-atlas
[MOO-786]: Gallery widget: Styling via Atlas
2 parents 39a0500 + 10ba623 commit 34c3114

File tree

11 files changed

+1186
-3
lines changed

11 files changed

+1186
-3
lines changed

‎packages/theming/atlas/src/theme/native/custom-variables.ts

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ import {
2828
VariablesTabContainer,
2929
VariablesRadioButtons,
3030
VariableBackgroundGradient,
31-
VariablesColumnChart
31+
VariablesColumnChart,
32+
VariablesGallery,
33+
VariablesGalleryTextFilter
3234
} from "../../themesource/atlas_core/native/types/variables";
3335
import "./exclusion-variables";
3436
/*
@@ -767,5 +769,69 @@ export const columnChart: VariablesColumnChart = {
767769
}
768770
}
769771
};
770-
771772
// TODO add bar chart styles
773+
774+
// Gallery style
775+
export const gallery: VariablesGallery = {
776+
container: {},
777+
emptyPlaceholder: {},
778+
firstItem: {},
779+
lastItem: {},
780+
list: {},
781+
listItem: { flexGrow: 1 },
782+
loadMoreButtonContainer: {
783+
alignSelf: "stretch"
784+
},
785+
loadMoreButtonPressableContainer: {
786+
// Ripplecolor and all ViewStyle properties are allowed
787+
borderWidth: 1,
788+
borderStyle: "solid",
789+
rippleColor: button.container.rippleColor,
790+
borderColor: button.primary.borderColor,
791+
backgroundColor: button.primary.backgroundColor,
792+
alignItems: "center",
793+
justifyContent: "center",
794+
borderRadius: button.container.borderRadius,
795+
796+
minWidth: button.container.minWidth,
797+
minHeight: button.container.minHeight,
798+
paddingVertical: button.container.paddingVertical,
799+
paddingHorizontal: button.container.paddingHorizontal
800+
},
801+
loadMoreButtonCaption: {
802+
// All TextStyle properties are allowed
803+
color: button.primary.color,
804+
fontSize: button.caption.fontSize,
805+
fontFamily: font.family,
806+
fontWeight: button.caption.fontWeight,
807+
lineHeight: font.lineHeight
808+
}
809+
};
810+
811+
// Gallery text filter style
812+
export const galleryTextFilter: VariablesGalleryTextFilter = {
813+
textInputContainer: {
814+
flexDirection: "row",
815+
justifyContent: "space-between",
816+
borderWidth: input.input.borderWidth,
817+
borderColor: input.input.borderColor,
818+
borderRadius: input.input.borderRadius,
819+
paddingEnd: 8
820+
},
821+
textInputContainerFocused: {
822+
borderColor: brand.primary
823+
},
824+
textInput: {
825+
height: 40,
826+
marginStart: spacing.regular,
827+
width: "90%",
828+
color: input.input.color,
829+
backgroundColor: input.input.backgroundColor,
830+
selectionColor: input.input.selectionColor,
831+
placeholderTextColor: input.input.placeholderTextColor
832+
},
833+
textInputClearIcon: {
834+
justifyContent: "center",
835+
alignContent: "center"
836+
}
837+
};

‎packages/theming/atlas/src/theme/native/exclusion-variables.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,9 @@ export const excludeBackgroundGradientHelper = false;
116116
// Column Chart
117117
export const excludeColumnChart = false;
118118
export const excludeColumnChartHelper = false;
119+
// Gallery
120+
export const excludeGallery = false;
121+
export const excludeGalleryHelper = false;
122+
// Gallery Text Filter
123+
export const excludeGalleryTextFilter = false;
124+
export const excludeGalleryTextFilterHelper = false;

‎packages/theming/atlas/src/themesource/atlas_core/native/core/helpers/gallery.ts

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import { button, border, spacing } from "../../variables";
2+
import { VariablesGallery } from "../../types/variables";
3+
/*
4+
5+
DISCLAIMER:
6+
Do not change this file because it is core styling.
7+
Customizing core files will make updating Atlas much more difficult in the future.
8+
To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
9+
==========================================================================
10+
*/
11+
12+
export const justifyPaginationLeft: VariablesGallery = {
13+
loadMoreButtonPressableContainer: {
14+
alignSelf: "flex-start"
15+
}
16+
};
17+
18+
export const justifyPaginationCenter: VariablesGallery = {
19+
loadMoreButtonPressableContainer: {
20+
alignSelf: "center"
21+
}
22+
};
23+
24+
export const justifyPaginationRight: VariablesGallery = {
25+
loadMoreButtonPressableContainer: {
26+
alignSelf: "flex-end"
27+
}
28+
};
29+
30+
export const listItemBorderHorizontal: VariablesGallery = {
31+
listItem: {
32+
borderBottomWidth: border.width,
33+
borderTopWidth: border.width,
34+
borderBottomColor: border.color,
35+
borderTopColor: border.color
36+
}
37+
};
38+
39+
export const listItemBorderVertical: VariablesGallery = {
40+
listItem: {
41+
borderStartWidth: border.width,
42+
borderEndWidth: border.width,
43+
borderStartColor: border.color,
44+
borderEndColor: border.color
45+
}
46+
};
47+
48+
export const listItemBorder: VariablesGallery = {
49+
listItem: {
50+
...listItemBorderVertical.listItem,
51+
...listItemBorderHorizontal.listItem
52+
}
53+
};
54+
55+
export const gridGapInnerSmall: VariablesGallery = {
56+
listItem: {
57+
padding: spacing.smaller
58+
}
59+
};
60+
61+
export const gridGapInnerMedium: VariablesGallery = {
62+
listItem: {
63+
padding: spacing.regular
64+
}
65+
};
66+
67+
export const gridGapInnerLarge: VariablesGallery = {
68+
listItem: {
69+
padding: spacing.larger
70+
}
71+
};
72+
73+
export const gridGapOuterSmall: VariablesGallery = {
74+
listItem: {
75+
margin: spacing.smaller
76+
}
77+
};
78+
79+
export const gridGapOuterMedium: VariablesGallery = {
80+
listItem: {
81+
margin: spacing.regular
82+
}
83+
};
84+
85+
export const gridGapOuterLarge: VariablesGallery = {
86+
listItem: {
87+
margin: spacing.larger
88+
}
89+
};
90+
91+
export const galleryGridAlignSelfStart: VariablesGallery = {
92+
listItem: {
93+
alignSelf: "flex-start"
94+
}
95+
};
96+
97+
export const galleryGridAlignSelfCenter: VariablesGallery = {
98+
listItem: {
99+
alignSelf: "center"
100+
}
101+
};
102+
103+
export const galleryGridAlignSelfEnd: VariablesGallery = {
104+
listItem: {
105+
alignSelf: "flex-end"
106+
}
107+
};
108+
109+
export const galleryGridAlignSelfStretch: VariablesGallery = {
110+
listItem: {
111+
alignSelf: "stretch"
112+
}
113+
};
114+
115+
export const galleryGridAlignSelfBaseline: VariablesGallery = {
116+
listItem: {
117+
alignSelf: "baseline"
118+
}
119+
};
120+
121+
export const galleryGridFlexRow: VariablesGallery = {
122+
listItem: {
123+
flexDirection: "row"
124+
}
125+
};
126+
127+
export const galleryGridFlexWrap: VariablesGallery = {
128+
listItem: {
129+
flexWrap: "wrap"
130+
}
131+
};
132+
133+
export const galleryGridJustifyContentStart: VariablesGallery = {
134+
listItem: {
135+
justifyContent: "flex-start"
136+
}
137+
};
138+
139+
export const galleryGridJustifyContentCenter: VariablesGallery = {
140+
listItem: {
141+
justifyContent: "center"
142+
}
143+
};
144+
145+
export const galleryGridJustifyContentEnd: VariablesGallery = {
146+
listItem: {
147+
justifyContent: "flex-end"
148+
}
149+
};
150+
151+
export const galleryGridJustifyContentSpaceBetween: VariablesGallery = {
152+
listItem: {
153+
justifyContent: "space-between"
154+
}
155+
};
156+
157+
export const galleryGridJustifyContentSpaceAround: VariablesGallery = {
158+
listItem: {
159+
justifyContent: "space-around"
160+
}
161+
};
162+
163+
export const galleryGridJustifyContentSpaceEvenly: VariablesGallery = {
164+
listItem: {
165+
justifyContent: "space-evenly"
166+
}
167+
};
168+
169+
export const loadMoreButtonBackgroundSecondary: VariablesGallery = {
170+
loadMoreButtonPressableContainer: {
171+
borderColor: button.secondary.borderColor,
172+
backgroundColor: button.secondary.backgroundColor
173+
},
174+
loadMoreButtonCaption: {
175+
color: button.secondary.color
176+
}
177+
};
178+
179+
export const loadMoreButtonBackgroundSuccess: VariablesGallery = {
180+
loadMoreButtonPressableContainer: {
181+
borderColor: button.success.borderColor,
182+
backgroundColor: button.success.backgroundColor
183+
},
184+
loadMoreButtonCaption: {
185+
color: button.success.color
186+
}
187+
};
188+
189+
export const loadMoreButtonBackgroundWarning: VariablesGallery = {
190+
loadMoreButtonPressableContainer: {
191+
borderColor: button.warning.borderColor,
192+
backgroundColor: button.warning.backgroundColor
193+
},
194+
loadMoreButtonCaption: {
195+
color: button.warning.color
196+
}
197+
};
198+
199+
export const loadMoreButtonBackgroundDanger: VariablesGallery = {
200+
loadMoreButtonPressableContainer: {
201+
borderColor: button.danger.borderColor,
202+
backgroundColor: button.danger.backgroundColor
203+
},
204+
loadMoreButtonCaption: {
205+
color: button.danger.color
206+
}
207+
};
208+
209+
export const loadMoreButtonFixedSize: VariablesGallery = {
210+
loadMoreButtonPressableContainer: {
211+
alignSelf: "baseline"
212+
}
213+
};

0 commit comments

Comments
 (0)