Merge pull request #1663 from mendix/nc/feat/gallery-native-atlas

[MOO-786]: Gallery widget: Styling via Atlas

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

@@ -28,7 +28,9 @@ import {
     VariablesTabContainer,
     VariablesRadioButtons,
     VariableBackgroundGradient,
-    VariablesColumnChart
+    VariablesColumnChart,
+    VariablesGallery,
+    VariablesGalleryTextFilter
 } from "../../themesource/atlas_core/native/types/variables";
 import "./exclusion-variables";
 /*
@@ -767,5 +769,69 @@ export const columnChart: VariablesColumnChart = {
         }
     }
 };
-
 // TODO add bar chart styles
+
+// Gallery style
+export const gallery: VariablesGallery = {
+    container: {},
+    emptyPlaceholder: {},
+    firstItem: {},
+    lastItem: {},
+    list: {},
+    listItem: { flexGrow: 1 },
+    loadMoreButtonContainer: {
+        alignSelf: "stretch"
+    },
+    loadMoreButtonPressableContainer: {
+        // Ripplecolor and all ViewStyle properties are allowed
+        borderWidth: 1,
+        borderStyle: "solid",
+        rippleColor: button.container.rippleColor,
+        borderColor: button.primary.borderColor,
+        backgroundColor: button.primary.backgroundColor,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: button.container.borderRadius,
+
+        minWidth: button.container.minWidth,
+        minHeight: button.container.minHeight,
+        paddingVertical: button.container.paddingVertical,
+        paddingHorizontal: button.container.paddingHorizontal
+    },
+    loadMoreButtonCaption: {
+        // All TextStyle properties are allowed
+        color: button.primary.color,
+        fontSize: button.caption.fontSize,
+        fontFamily: font.family,
+        fontWeight: button.caption.fontWeight,
+        lineHeight: font.lineHeight
+    }
+};
+
+// Gallery text filter style
+export const galleryTextFilter: VariablesGalleryTextFilter = {
+    textInputContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        borderWidth: input.input.borderWidth,
+        borderColor: input.input.borderColor,
+        borderRadius: input.input.borderRadius,
+        paddingEnd: 8
+    },
+    textInputContainerFocused: {
+        borderColor: brand.primary
+    },
+    textInput: {
+        height: 40,
+        marginStart: spacing.regular,
+        width: "90%",
+        color: input.input.color,
+        backgroundColor: input.input.backgroundColor,
+        selectionColor: input.input.selectionColor,
+        placeholderTextColor: input.input.placeholderTextColor
+    },
+    textInputClearIcon: {
+        justifyContent: "center",
+        alignContent: "center"
+    }
+};

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

@@ -116,3 +116,9 @@ export const excludeBackgroundGradientHelper = false;
 // Column Chart
 export const excludeColumnChart = false;
 export const excludeColumnChartHelper = false;
+// Gallery
+export const excludeGallery = false;
+export const excludeGalleryHelper = false;
+// Gallery Text Filter
+export const excludeGalleryTextFilter = false;
+export const excludeGalleryTextFilterHelper = false;

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

@@ -0,0 +1,213 @@
+import { button, border, spacing } from "../../variables";
+import { VariablesGallery } from "../../types/variables";
+/*
+
+DISCLAIMER:
+Do not change this file because it is core styling.
+Customizing core files will make updating Atlas much more difficult in the future.
+To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
+==========================================================================
+*/
+
+export const justifyPaginationLeft: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        alignSelf: "flex-start"
+    }
+};
+
+export const justifyPaginationCenter: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        alignSelf: "center"
+    }
+};
+
+export const justifyPaginationRight: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        alignSelf: "flex-end"
+    }
+};
+
+export const listItemBorderHorizontal: VariablesGallery = {
+    listItem: {
+        borderBottomWidth: border.width,
+        borderTopWidth: border.width,
+        borderBottomColor: border.color,
+        borderTopColor: border.color
+    }
+};
+
+export const listItemBorderVertical: VariablesGallery = {
+    listItem: {
+        borderStartWidth: border.width,
+        borderEndWidth: border.width,
+        borderStartColor: border.color,
+        borderEndColor: border.color
+    }
+};
+
+export const listItemBorder: VariablesGallery = {
+    listItem: {
+        ...listItemBorderVertical.listItem,
+        ...listItemBorderHorizontal.listItem
+    }
+};
+
+export const gridGapInnerSmall: VariablesGallery = {
+    listItem: {
+        padding: spacing.smaller
+    }
+};
+
+export const gridGapInnerMedium: VariablesGallery = {
+    listItem: {
+        padding: spacing.regular
+    }
+};
+
+export const gridGapInnerLarge: VariablesGallery = {
+    listItem: {
+        padding: spacing.larger
+    }
+};
+
+export const gridGapOuterSmall: VariablesGallery = {
+    listItem: {
+        margin: spacing.smaller
+    }
+};
+
+export const gridGapOuterMedium: VariablesGallery = {
+    listItem: {
+        margin: spacing.regular
+    }
+};
+
+export const gridGapOuterLarge: VariablesGallery = {
+    listItem: {
+        margin: spacing.larger
+    }
+};
+
+export const galleryGridAlignSelfStart: VariablesGallery = {
+    listItem: {
+        alignSelf: "flex-start"
+    }
+};
+
+export const galleryGridAlignSelfCenter: VariablesGallery = {
+    listItem: {
+        alignSelf: "center"
+    }
+};
+
+export const galleryGridAlignSelfEnd: VariablesGallery = {
+    listItem: {
+        alignSelf: "flex-end"
+    }
+};
+
+export const galleryGridAlignSelfStretch: VariablesGallery = {
+    listItem: {
+        alignSelf: "stretch"
+    }
+};
+
+export const galleryGridAlignSelfBaseline: VariablesGallery = {
+    listItem: {
+        alignSelf: "baseline"
+    }
+};
+
+export const galleryGridFlexRow: VariablesGallery = {
+    listItem: {
+        flexDirection: "row"
+    }
+};
+
+export const galleryGridFlexWrap: VariablesGallery = {
+    listItem: {
+        flexWrap: "wrap"
+    }
+};
+
+export const galleryGridJustifyContentStart: VariablesGallery = {
+    listItem: {
+        justifyContent: "flex-start"
+    }
+};
+
+export const galleryGridJustifyContentCenter: VariablesGallery = {
+    listItem: {
+        justifyContent: "center"
+    }
+};
+
+export const galleryGridJustifyContentEnd: VariablesGallery = {
+    listItem: {
+        justifyContent: "flex-end"
+    }
+};
+
+export const galleryGridJustifyContentSpaceBetween: VariablesGallery = {
+    listItem: {
+        justifyContent: "space-between"
+    }
+};
+
+export const galleryGridJustifyContentSpaceAround: VariablesGallery = {
+    listItem: {
+        justifyContent: "space-around"
+    }
+};
+
+export const galleryGridJustifyContentSpaceEvenly: VariablesGallery = {
+    listItem: {
+        justifyContent: "space-evenly"
+    }
+};
+
+export const loadMoreButtonBackgroundSecondary: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        borderColor: button.secondary.borderColor,
+        backgroundColor: button.secondary.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.secondary.color
+    }
+};
+
+export const loadMoreButtonBackgroundSuccess: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        borderColor: button.success.borderColor,
+        backgroundColor: button.success.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.success.color
+    }
+};
+
+export const loadMoreButtonBackgroundWarning: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        borderColor: button.warning.borderColor,
+        backgroundColor: button.warning.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.warning.color
+    }
+};
+
+export const loadMoreButtonBackgroundDanger: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        borderColor: button.danger.borderColor,
+        backgroundColor: button.danger.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.danger.color
+    }
+};
+
+export const loadMoreButtonFixedSize: VariablesGallery = {
+    loadMoreButtonPressableContainer: {
+        alignSelf: "baseline"
+    }
+};