diff --git a/index-rtl.html b/index-rtl.html index 8c749b87..fa89bcad 100644 --- a/index-rtl.html +++ b/index-rtl.html @@ -9,7 +9,9 @@ {{themecss}} {{appicons}} - + {{manifest}} + {{startupimages}} +
diff --git a/index.html b/index.html index 57b90e43..ce29e6b2 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,8 @@ {{themecss}} {{appicons}} - - - + {{manifest}} + {{startupimages}} diff --git a/login-with-sso.html b/login-with-sso.html index 624df03b..500d0b8c 100644 --- a/login-with-sso.html +++ b/login-with-sso.html @@ -8,6 +8,9 @@ {{themecss}} + {{appicons}} + {{manifest}} + {{startupimages}} diff --git a/login.html b/login.html index 7a2e425e..effdf077 100644 --- a/login.html +++ b/login.html @@ -8,6 +8,10 @@ {{themecss}} + {{appicons}} + {{manifest}} + {{startupimages}} + diff --git a/manifest-overrides.webmanifest b/manifest-overrides.webmanifest new file mode 100644 index 00000000..10161cd8 --- /dev/null +++ b/manifest-overrides.webmanifest @@ -0,0 +1,3 @@ +{ + "background_color": "#FFFFFF" +} diff --git a/package.json b/package.json index aeeae86f..15b8b358 100644 --- a/package.json +++ b/package.json @@ -23,4 +23,4 @@ "react-native-device-info": "^5.5.3" }, "dependencies": {} -} \ No newline at end of file +} diff --git a/styles/native/js/app/custom-variables.js b/styles/native/js/app/custom-variables.js index a663eaeb..6bf8928d 100644 --- a/styles/native/js/app/custom-variables.js +++ b/styles/native/js/app/custom-variables.js @@ -152,10 +152,11 @@ export const input = { labelColorDisabled: font.labelColorDisabled, borderColor: contrast.lower, backgroundColor: background.primary, - backgroundColorDisabled: background.secondary, + backgroundColorDisabled: contrast.lowest, selectionColor: contrast.lower, placeholderTextColor: contrast.regular, underlineColorAndroid: "transparent", + inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`, // Sizes fontSize: font.size, fontFamily: font.family, @@ -201,6 +202,34 @@ export const navigation = { }, }; // +// Badge Styles +export const badge = { + fontWeight: font.weightBold, + borderRadius: 30, + paddingVertical: 3, + paddingHorizontal: spacing.smaller, + default: { + color: contrast.higher, + backgroundColor: contrast.lower, + }, + primary: { + color: brand.primary, + backgroundColor: brand.primaryLight, + }, + success: { + color: brand.success, + backgroundColor: brand.successLight, + }, + warning: { + color: brand.warning, + backgroundColor: brand.warningLight, + }, + danger: { + color: brand.danger, + backgroundColor: brand.dangerLight, + }, +}; +// // Tabcontainer Styles export const tabContainer = { tabBar: { @@ -221,6 +250,18 @@ export const tabContainer = { fontWeight: font.weightBold, textTransform: "uppercase", }, + badgeContainer: { + borderRadius: badge.borderRadius, + backgroundColor: badge.default.backgroundColor, + paddingVertical: badge.paddingVertical, + paddingHorizontal: badge.paddingHorizontal, + marginLeft: 8 + }, + badgeCaption: { + fontSize: font.size, + color: badge.default.color, + fontWeight: badge.fontWeight, + } }; // // ListView Styles @@ -235,34 +276,3 @@ export const listView = { export const layoutGrid = { gutterSize: 15, }; -// -// -//== Pluggable Widgets -//-------------------------------------------------------------------------------------------------------------------// -// Badge Styles -export const badge = { - fontWeight: font.weightBold, - borderRadius: 30, - paddingVertical: 3, - paddingHorizontal: spacing.smaller, - default: { - color: contrast.higher, - backgroundColor: contrast.lower, - }, - primary: { - color: brand.primary, - backgroundColor: brand.primaryLight, - }, - success: { - color: brand.success, - backgroundColor: brand.successLight, - }, - warning: { - color: brand.warning, - backgroundColor: brand.warningLight, - }, - danger: { - color: brand.danger, - backgroundColor: brand.dangerLight, - }, -}; diff --git a/styles/native/js/core/variables.js b/styles/native/js/core/variables.js index 78464cb5..fbdb79c7 100644 --- a/styles/native/js/core/variables.js +++ b/styles/native/js/core/variables.js @@ -156,6 +156,7 @@ let input = { selectionColor: contrast.lower, placeholderTextColor: contrast.regular, underlineColorAndroid: "transparent", + inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`, // Sizes fontSize: font.size, fontFamily: font.family, @@ -203,6 +204,35 @@ let navigation = { }; navigation = merge(navigation, custom.navigation || {}); // +// Badge Styles +let badge = { + fontWeight: font.weightBold, + borderRadius: 30, + paddingVertical: 3, + paddingHorizontal: spacing.smaller, + default: { + color: contrast.higher, + backgroundColor: contrast.lower, + }, + primary: { + color: brand.primary, + backgroundColor: brand.primaryLight, + }, + success: { + color: brand.success, + backgroundColor: brand.successLight, + }, + warning: { + color: brand.warning, + backgroundColor: brand.warningLight, + }, + danger: { + color: brand.danger, + backgroundColor: brand.dangerLight, + }, +}; +badge = merge(badge, custom.badge || {}); +// // Tabcontainer Styles let tabContainer = { tabBar: { @@ -223,6 +253,18 @@ let tabContainer = { fontWeight: font.weightBold, textTransform: "uppercase", }, + badgeContainer: { + borderRadius: badge.borderRadius, + backgroundColor: badge.default.backgroundColor, + paddingVertical: badge.paddingVertical, + paddingHorizontal: badge.paddingHorizontal, + marginLeft: 8 + }, + badgeCaption: { + fontSize: font.size, + color: badge.default.color, + fontWeight: badge.fontWeight, + } }; tabContainer = merge(tabContainer, custom.tabContainer || {}); // @@ -241,35 +283,4 @@ let layoutGrid = { }; layoutGrid = merge(layoutGrid, custom.layoutGrid || {}); // -//## Pluggable Widgets -//-------------------------------------------------------------------------------------------------------------------// -// Badge Styles -let badge = { - fontWeight: font.weightBold, - borderRadius: 30, - paddingVertical: 3, - paddingHorizontal: spacing.smaller, - default: { - color: contrast.higher, - backgroundColor: contrast.lower, - }, - primary: { - color: brand.primary, - backgroundColor: brand.primaryLight, - }, - success: { - color: brand.success, - backgroundColor: brand.successLight, - }, - warning: { - color: brand.warning, - backgroundColor: brand.warningLight, - }, - danger: { - color: brand.danger, - backgroundColor: brand.dangerLight, - }, -}; -badge = merge(badge, custom.badge || {}); -// export { brand, background, border, contrast, font, spacing, button, input, navigation, tabContainer, listView, layoutGrid, badge, }; diff --git a/styles/native/js/core/widgets/dropdown.js b/styles/native/js/core/widgets/dropdown.js index 69b46973..9c33fb3e 100644 --- a/styles/native/js/core/widgets/dropdown.js +++ b/styles/native/js/core/widgets/dropdown.js @@ -52,7 +52,7 @@ export const DropDown = { }, /* New dropdown styles start */ valueContainer: { - // All ViewStyle properties & rippleColor are allowed + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed }, valueContainerDisabled: { // All ViewStyle properties are allowed @@ -64,13 +64,15 @@ export const DropDown = { shadowOpacity: 0.2, shadowRadius: 10, elevation: 16, + backgroundColor: input.backgroundColor, }, itemContainer: { - // All ViewStyle properties are allowed + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed maxWidth: 500, paddingVertical: 6, paddingHorizontal: 16, backgroundColor: input.backgroundColor, + underlayColor: input.inputContainerUnderlayColor, }, item: { // All TextStlye properties are allowed diff --git a/styles/native/js/core/widgets/referenceselector.js b/styles/native/js/core/widgets/referenceselector.js index 31a850b2..445b0cba 100644 --- a/styles/native/js/core/widgets/referenceselector.js +++ b/styles/native/js/core/widgets/referenceselector.js @@ -1,124 +1,126 @@ -import { border, contrast, font, input } from "../variables"; -import { DropDown } from "./dropdown"; -import { TextBox, TextBoxVertical } from "./textbox"; -/* - -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. - -========================================================================== - Reference Selector - - Default Class For Mendix Reference Selector Widget -========================================================================== */ -export const ReferenceSelector = { - container: { - // All ViewStyle properties are allowed - ...TextBox.container, - }, - containerDisabled: { - // All ViewStyle properties are allowed - ...TextBox.containerDisabled, - }, - label: { - // numberOfLines and all TextStyle properties are allowed - ...TextBox.label, - }, - labelDisabled: { - // All TextStyle properties are allowed - ...TextBox.labelDisabled, - }, - value: { - // All TextStyle properties & placeholderTextColor are allowed - color: input.color, - borderColor: input.borderColor, - backgroundColor: input.backgroundColor, - fontSize: input.fontSize, - fontFamily: input.fontFamily, - borderWidth: input.borderWidth, - borderRadius: input.borderRadius, - overflow: "hidden", - paddingHorizontal: input.paddingHorizontal, - paddingVertical: input.paddingVertical, - placeholderTextColor: input.placeholderTextColor, - }, - valueDisabled: { - // All TextStyle properties are allowed - ...TextBox.inputDisabled - }, - validationMessage: { - // All TextStyle properties are allowed - ...TextBox.validationMessage, - }, - /* New dropdown styles start */ - valueContainer: { - // All ViewStyle properties & rippleColor are allowed - }, - valueContainerDisabled: { - // All ViewStyle properties are allowed - }, - menuWrapper: { - // All ViewStyle properties are allowed - borderRadius: border.radius, - shadowColor: "#000", - shadowOpacity: 0.2, - shadowRadius: 10, - elevation: 16, - }, - itemContainer: { - // All ViewStyle properties are allowed - maxWidth: 500, - paddingVertical: 6, - paddingHorizontal: 16, - backgroundColor: input.backgroundColor, - }, - item: { - // All TextStyle properties are allowed - color: input.color, - }, - selectedItem: { - // All TextStyle properties are allowed - fontWeight: font.weightBold, - }, - selectedItemContainer: { - // All ViewStyle properties are allowed - backgroundColor: contrast.lowest, - }, - /* New dropdown styles end */ - useUniformDesign: true, - /* Old dropdown styles start */ - pickerIOS: { - // All ViewStyle properties are allowed - backgroundColor: input.backgroundColor, - }, - pickerItemIOS: { - // All TextStyle properties are allowed - }, - pickerBackdropIOS: { - // All ViewStyle properties are allowed - }, - pickerTopIOS: { - // All ViewStyle properties are allowed - backgroundColor: input.backgroundColor, - }, -}; -export const ReferenceSelectorVertical = { - container: TextBoxVertical.container, - containerDisabled: TextBoxVertical.containerDisabled, - label: TextBoxVertical.label, - labelDisabled: TextBoxVertical.labelDisabled, - value: DropDown.value, - valueContainer: DropDown.valueContainer, - valueContainerDisabled: DropDown.valueContainerDisabled, - validationMessage: TextBoxVertical.validationMessage, - menuWrapper: DropDown.menuWrapper, - itemContainer: DropDown.itemContainer, - item: DropDown.item, - useUniformDesign: DropDown.useUniformDesign, - pickerIOS: DropDown.pickerIOS, - pickerItemIOS: DropDown.pickerItemIOS, - pickerBackdropIOS: DropDown.pickerBackdropIOS, - pickerTopIOS: DropDown.pickerTopIOS, -}; +import { border, contrast, font, input } from "../variables"; +import { DropDown } from "./dropdown"; +import { TextBox, TextBoxVertical } from "./textbox"; +/* + +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. + +========================================================================== + Reference Selector + + Default Class For Mendix Reference Selector Widget +========================================================================== */ +export const ReferenceSelector = { + container: { + // All ViewStyle properties are allowed + ...TextBox.container, + }, + containerDisabled: { + // All ViewStyle properties are allowed + ...TextBox.containerDisabled, + }, + label: { + // numberOfLines and all TextStyle properties are allowed + ...TextBox.label, + }, + labelDisabled: { + // All TextStyle properties are allowed + ...TextBox.labelDisabled, + }, + value: { + // All TextStyle properties & placeholderTextColor are allowed + color: input.color, + borderColor: input.borderColor, + backgroundColor: input.backgroundColor, + fontSize: input.fontSize, + fontFamily: input.fontFamily, + borderWidth: input.borderWidth, + borderRadius: input.borderRadius, + overflow: "hidden", + paddingHorizontal: input.paddingHorizontal, + paddingVertical: input.paddingVertical, + placeholderTextColor: input.placeholderTextColor, + }, + valueDisabled: { + // All TextStyle properties are allowed + ...TextBox.inputDisabled + }, + validationMessage: { + // All TextStyle properties are allowed + ...TextBox.validationMessage, + }, + /* New dropdown styles start */ + valueContainer: { + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed + }, + valueContainerDisabled: { + // All ViewStyle properties are allowed + }, + menuWrapper: { + // All ViewStyle properties are allowed + borderRadius: border.radius, + shadowColor: "#000", + shadowOpacity: 0.2, + shadowRadius: 10, + elevation: 16, + backgroundColor: input.backgroundColor + }, + itemContainer: { + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed + maxWidth: 500, + paddingVertical: 6, + paddingHorizontal: 16, + backgroundColor: input.backgroundColor, + underlayColor: input.inputContainerUnderlayColor, + }, + item: { + // All TextStyle properties are allowed + color: input.color, + }, + selectedItem: { + // All TextStyle properties are allowed + fontWeight: font.weightBold, + }, + selectedItemContainer: { + // All ViewStyle properties are allowed + backgroundColor: contrast.lowest, + }, + /* New dropdown styles end */ + useUniformDesign: true, + /* Old dropdown styles start */ + pickerIOS: { + // All ViewStyle properties are allowed + backgroundColor: input.backgroundColor, + }, + pickerItemIOS: { + // All TextStyle properties are allowed + }, + pickerBackdropIOS: { + // All ViewStyle properties are allowed + }, + pickerTopIOS: { + // All ViewStyle properties are allowed + backgroundColor: input.backgroundColor, + }, +}; +export const ReferenceSelectorVertical = { + container: TextBoxVertical.container, + containerDisabled: TextBoxVertical.containerDisabled, + label: TextBoxVertical.label, + labelDisabled: TextBoxVertical.labelDisabled, + value: DropDown.value, + valueContainer: DropDown.valueContainer, + valueContainerDisabled: DropDown.valueContainerDisabled, + validationMessage: TextBoxVertical.validationMessage, + menuWrapper: DropDown.menuWrapper, + itemContainer: DropDown.itemContainer, + item: DropDown.item, + useUniformDesign: DropDown.useUniformDesign, + pickerIOS: DropDown.pickerIOS, + pickerItemIOS: DropDown.pickerItemIOS, + pickerBackdropIOS: DropDown.pickerBackdropIOS, + pickerTopIOS: DropDown.pickerTopIOS, +}; diff --git a/styles/native/js/core/widgets/tabcontainer.js b/styles/native/js/core/widgets/tabcontainer.js index ef20f2a1..47bf65bc 100644 --- a/styles/native/js/core/widgets/tabcontainer.js +++ b/styles/native/js/core/widgets/tabcontainer.js @@ -1,4 +1,4 @@ -import { badge, font, spacing, tabContainer } from "../variables"; +import { font, spacing, tabContainer } from "../variables"; /* DISCLAIMER: @@ -50,18 +50,18 @@ export const TabContainer = { }, badgeContainer: { // All ViewStyle properties are allowed - borderRadius: badge.borderRadius, - backgroundColor: badge.default.backgroundColor, - paddingVertical: badge.paddingVertical, - paddingHorizontal: badge.paddingHorizontal, - marginLeft: 8 + borderRadius: tabContainer.badgeContainer.borderRadius, + backgroundColor: tabContainer.badgeContainer.backgroundColor, + paddingVertical: tabContainer.badgeContainer.paddingVertical, + paddingHorizontal: tabContainer.badgeContainer.paddingHorizontal, + marginLeft: tabContainer.badgeContainer.marginLeft }, badgeCaption: { // All TextStyle properties are allowed - fontSize: font.size, - color: badge.default.color, + fontSize: tabContainer.badgeCaption.fontSize, + color: tabContainer.badgeCaption.color, fontFamily: font.family, - fontWeight: badge.fontWeight, + fontWeight: tabContainer.badgeCaption.fontWeight, marginTop: -1, } }; diff --git a/styles/native/ts/app/custom-variables.ts b/styles/native/ts/app/custom-variables.ts index c8dbfcb5..cbc78276 100644 --- a/styles/native/ts/app/custom-variables.ts +++ b/styles/native/ts/app/custom-variables.ts @@ -171,10 +171,11 @@ export const input: VariablesInput = { labelColorDisabled: font.labelColorDisabled, borderColor: contrast.lower, backgroundColor: background.primary, - backgroundColorDisabled: background.secondary, + backgroundColorDisabled: contrast.lowest, selectionColor: contrast.lower, placeholderTextColor: contrast.regular, underlineColorAndroid: "transparent", + inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`, // Sizes fontSize: font.size, @@ -221,6 +222,36 @@ export const navigation: VariablesNavigation = { shadowRadius: 10, // Only for iOS }, }; +// +// Badge Styles +export const badge: VariablesBadge = { + fontWeight: font.weightBold, + borderRadius: 30, + paddingVertical: 3, + paddingHorizontal: spacing.smaller, + + default: { + color: contrast.higher, + backgroundColor: contrast.lower, + }, + primary: { + color: brand.primary, + backgroundColor: brand.primaryLight, + }, + success: { + color: brand.success, + backgroundColor: brand.successLight, + }, + warning: { + color: brand.warning, + backgroundColor: brand.warningLight, + }, + danger: { + color: brand.danger, + backgroundColor: brand.dangerLight, + }, +}; + // // Tabcontainer Styles export const tabContainer: VariablesTabContainer = { @@ -236,14 +267,24 @@ export const tabContainer: VariablesTabContainer = { color: contrast.highest, fontWeight: font.weightBold, textTransform: "uppercase", - }, activeLabel: { color: brand.primary, fontWeight: font.weightBold, textTransform: "uppercase", - }, + badgeContainer: { + borderRadius: badge.borderRadius, + backgroundColor: badge.default.backgroundColor, + paddingVertical: badge.paddingVertical, + paddingHorizontal: badge.paddingHorizontal, + marginLeft: 8 + }, + badgeCaption: { + fontSize: font.size, + color: badge.default.color, + fontWeight: badge.fontWeight, + } }; // // ListView Styles @@ -258,35 +299,3 @@ export const listView: VariablesListView = { export const layoutGrid = { gutterSize: 15, }; -// -// -//== Pluggable Widgets -//-------------------------------------------------------------------------------------------------------------------// -// Badge Styles -export const badge: VariablesBadge = { - fontWeight: font.weightBold, - borderRadius: 30, - paddingVertical: 3, - paddingHorizontal: spacing.smaller, - - default: { - color: contrast.higher, - backgroundColor: contrast.lower, - }, - primary: { - color: brand.primary, - backgroundColor: brand.primaryLight, - }, - success: { - color: brand.success, - backgroundColor: brand.successLight, - }, - warning: { - color: brand.warning, - backgroundColor: brand.warningLight, - }, - danger: { - color: brand.danger, - backgroundColor: brand.dangerLight, - }, -}; diff --git a/styles/native/ts/core/variables.ts b/styles/native/ts/core/variables.ts index 04a99bbd..b89934ac 100644 --- a/styles/native/ts/core/variables.ts +++ b/styles/native/ts/core/variables.ts @@ -172,6 +172,7 @@ let input: VariablesInput = { selectionColor: contrast.lower, placeholderTextColor: contrast.regular, underlineColorAndroid: "transparent", + inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`, // Sizes fontSize: font.size, @@ -221,6 +222,36 @@ let navigation: VariablesNavigation = { }; navigation = merge(navigation, custom.navigation || {}); // +// Badge Styles +let badge: VariablesBadge = { + fontWeight: font.weightBold, + borderRadius: 30, + paddingVertical: 3, + paddingHorizontal: spacing.smaller, + + default: { + color: contrast.higher, + backgroundColor: contrast.lower, + }, + primary: { + color: brand.primary, + backgroundColor: brand.primaryLight, + }, + success: { + color: brand.success, + backgroundColor: brand.successLight, + }, + warning: { + color: brand.warning, + backgroundColor: brand.warningLight, + }, + danger: { + color: brand.danger, + backgroundColor: brand.dangerLight, + }, +}; +badge = merge(badge, custom.badge || {}); +// // Tabcontainer Styles let tabContainer: VariablesTabContainer = { tabBar: { @@ -241,6 +272,18 @@ let tabContainer: VariablesTabContainer = { fontWeight: font.weightBold, textTransform: "uppercase", }, + badgeContainer: { + borderRadius: badge.borderRadius, + backgroundColor: badge.default.backgroundColor, + paddingVertical: badge.paddingVertical, + paddingHorizontal: badge.paddingHorizontal, + marginLeft: 8 + }, + badgeCaption: { + fontSize: font.size, + color: badge.default.color, + fontWeight: badge.fontWeight, + } }; tabContainer = merge(tabContainer, custom.tabContainer || {}); // @@ -259,38 +302,6 @@ let layoutGrid: VariablesLayoutgrid = { }; layoutGrid = merge(layoutGrid, custom.layoutGrid || {}); // -//## Pluggable Widgets -//-------------------------------------------------------------------------------------------------------------------// -// Badge Styles -let badge: VariablesBadge = { - fontWeight: font.weightBold, - borderRadius: 30, - paddingVertical: 3, - paddingHorizontal: spacing.smaller, - - default: { - color: contrast.higher, - backgroundColor: contrast.lower, - }, - primary: { - color: brand.primary, - backgroundColor: brand.primaryLight, - }, - success: { - color: brand.success, - backgroundColor: brand.successLight, - }, - warning: { - color: brand.warning, - backgroundColor: brand.warningLight, - }, - danger: { - color: brand.danger, - backgroundColor: brand.dangerLight, - }, -}; -badge = merge(badge, custom.badge || {}); -// export { brand, background, diff --git a/styles/native/ts/core/widgets/dropdown.ts b/styles/native/ts/core/widgets/dropdown.ts index 09c07038..990cc857 100644 --- a/styles/native/ts/core/widgets/dropdown.ts +++ b/styles/native/ts/core/widgets/dropdown.ts @@ -33,30 +33,36 @@ export const DropDown: DropDownType = { value: { // All TextStyle properties & placeholderTextColor are allowed color: input.color, - borderColor: input.borderColor, - backgroundColor: input.backgroundColor, - fontSize: input.fontSize, fontFamily: input.fontFamily, - borderWidth: input.borderWidth, - borderRadius: input.borderRadius, - - paddingHorizontal: input.paddingHorizontal, - paddingVertical: input.paddingVertical, - placeholderTextColor: input.placeholderTextColor, // Only applied when useUniformDesign is true }, - valueDisabled: { - // All TextStyle properties are allowed - ...TextBox.inputDisabled - }, validationMessage: { // All TextStyle properties are allowed ...TextBox.validationMessage, }, /* New dropdown styles start */ + valueFocused: { + // All TextStyle properties are allowed + }, + valueDisabled: { + // All TextStyle properties are allowed + ...TextBox.inputDisabled + }, valueContainer: { // All ViewStyle properties & rippleColor are allowed + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + borderWidth: input.borderWidth, + borderRadius: input.borderRadius, + borderColor: input.borderColor, + paddingHorizontal: input.paddingHorizontal, + paddingVertical: input.paddingVertical, + backgroundColor: input.backgroundColor, + }, + valueContainerFocused: { + // All ViewStyle properties are allowed }, valueContainerDisabled: { // All ViewStyle properties are allowed @@ -68,13 +74,19 @@ export const DropDown: DropDownType = { shadowOpacity: 0.2, shadowRadius: 10, elevation: 16, + backgroundColor: input.backgroundColor, }, itemContainer: { - // All ViewStyle properties are allowed + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed maxWidth: 500, paddingVertical: 6, paddingHorizontal: 16, backgroundColor: input.backgroundColor, + underlayColor: input.inputContainerUnderlayColor, + }, + iconStyle: { + // All TextStyle properties are allowed + color: input.color }, item: { // All TextStlye properties are allowed @@ -113,12 +125,15 @@ export const DropDownVertical: DropDownType = { label: TextBoxVertical.label, labelDisabled: TextBoxVertical.labelDisabled, value: DropDown.value, + valueFocused: DropDown.valueFocused, + validationMessage: TextBoxVertical.validationMessage, valueContainer: DropDown.valueContainer, + valueContainerFocused: DropDown.valueContainerFocused, valueContainerDisabled: DropDown.valueContainerDisabled, - validationMessage: TextBoxVertical.validationMessage, menuWrapper: DropDown.menuWrapper, itemContainer: DropDown.itemContainer, item: DropDown.item, + iconStyle: DropDown.iconStyle, useUniformDesign: DropDown.useUniformDesign, pickerIOS: DropDown.pickerIOS, pickerItemIOS: DropDown.pickerItemIOS, diff --git a/styles/native/ts/core/widgets/referenceselector.ts b/styles/native/ts/core/widgets/referenceselector.ts index 0c646399..39453b17 100644 --- a/styles/native/ts/core/widgets/referenceselector.ts +++ b/styles/native/ts/core/widgets/referenceselector.ts @@ -1,5 +1,5 @@ import { border, contrast, font, input } from "../variables"; -import { DropDown } from "./dropdown"; +import { DropDownVertical } from "./dropdown"; import { TextBox, TextBoxVertical } from "./textbox"; import { DropDownType } from "../../types/widgets"; /* @@ -34,31 +34,37 @@ export const ReferenceSelector: DropDownType = { value: { // All TextStyle properties & placeholderTextColor are allowed color: input.color, - borderColor: input.borderColor, - backgroundColor: input.backgroundColor, - fontSize: input.fontSize, fontFamily: input.fontFamily, - borderWidth: input.borderWidth, - borderRadius: input.borderRadius, - overflow: "hidden", - paddingHorizontal: input.paddingHorizontal, - paddingVertical: input.paddingVertical, - placeholderTextColor: input.placeholderTextColor, // Only applied when useUniformDesign is true }, - valueDisabled: { - // All TextStyle properties are allowed - ...TextBox.inputDisabled - }, validationMessage: { // All TextStyle properties are allowed ...TextBox.validationMessage, }, /* New dropdown styles start */ + valueFocused: { + // All TextStyle properties are allowed + }, + valueDisabled: { + // All TextStyle properties are allowed + ...TextBox.inputDisabled + }, valueContainer: { // All ViewStyle properties & rippleColor are allowed + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + borderWidth: input.borderWidth, + borderRadius: input.borderRadius, + borderColor: input.borderColor, + paddingHorizontal: input.paddingHorizontal, + paddingVertical: input.paddingVertical, + backgroundColor: input.backgroundColor, + }, + valueContainerFocused: { + // All ViewStyle properties are allowed }, valueContainerDisabled: { // All ViewStyle properties are allowed @@ -70,13 +76,19 @@ export const ReferenceSelector: DropDownType = { shadowOpacity: 0.2, shadowRadius: 10, elevation: 16, + backgroundColor: input.backgroundColor }, itemContainer: { - // All ViewStyle properties are allowed + // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed maxWidth: 500, paddingVertical: 6, paddingHorizontal: 16, backgroundColor: input.backgroundColor, + underlayColor: input.inputContainerUnderlayColor, + }, + iconStyle: { + // All TextStyle properties are allowed + color: input.color }, item: { // All TextStyle properties are allowed @@ -114,16 +126,19 @@ export const ReferenceSelectorVertical: DropDownType = { containerDisabled: TextBoxVertical.containerDisabled, label: TextBoxVertical.label, labelDisabled: TextBoxVertical.labelDisabled, - value: DropDown.value, - valueContainer: DropDown.valueContainer, - valueContainerDisabled: DropDown.valueContainerDisabled, + value: DropDownVertical.value, + valueFocused: DropDownVertical.valueFocused, validationMessage: TextBoxVertical.validationMessage, - menuWrapper: DropDown.menuWrapper, - itemContainer: DropDown.itemContainer, - item: DropDown.item, - useUniformDesign: DropDown.useUniformDesign, - pickerIOS: DropDown.pickerIOS, - pickerItemIOS: DropDown.pickerItemIOS, - pickerBackdropIOS: DropDown.pickerBackdropIOS, - pickerTopIOS: DropDown.pickerTopIOS, + valueContainer: DropDownVertical.valueContainer, + valueContainerFocused: DropDownVertical.valueContainerFocused, + valueContainerDisabled: DropDownVertical.valueContainerDisabled, + menuWrapper: DropDownVertical.menuWrapper, + itemContainer: DropDownVertical.itemContainer, + item: DropDownVertical.item, + iconStyle: DropDownVertical.iconStyle, + useUniformDesign: DropDownVertical.useUniformDesign, + pickerIOS: DropDownVertical.pickerIOS, + pickerItemIOS: DropDownVertical.pickerItemIOS, + pickerBackdropIOS: DropDownVertical.pickerBackdropIOS, + pickerTopIOS: DropDownVertical.pickerTopIOS, }; diff --git a/styles/native/ts/core/widgets/tabcontainer.ts b/styles/native/ts/core/widgets/tabcontainer.ts index 6fd97ce2..08b2f3aa 100644 --- a/styles/native/ts/core/widgets/tabcontainer.ts +++ b/styles/native/ts/core/widgets/tabcontainer.ts @@ -1,4 +1,4 @@ -import { badge, font, spacing, tabContainer } from "../variables"; +import { font, spacing, tabContainer } from "../variables"; import { TabContainerType } from "../../types/widgets"; /* @@ -51,18 +51,18 @@ export const TabContainer: TabContainerType = { }, badgeContainer: { // All ViewStyle properties are allowed - borderRadius: badge.borderRadius, - backgroundColor: badge.default.backgroundColor, - paddingVertical: badge.paddingVertical, - paddingHorizontal: badge.paddingHorizontal, - marginLeft: 8 + borderRadius: tabContainer.badgeContainer.borderRadius, + backgroundColor: tabContainer.badgeContainer.backgroundColor, + paddingVertical: tabContainer.badgeContainer.paddingVertical, + paddingHorizontal: tabContainer.badgeContainer.paddingHorizontal, + marginLeft: tabContainer.badgeContainer.marginLeft }, badgeCaption: { // All TextStyle properties are allowed - fontSize: font.size, - color: badge.default.color, + fontSize: tabContainer.badgeCaption.fontSize, + color: tabContainer.badgeCaption.color, fontFamily: font.family, - fontWeight: badge.fontWeight, + fontWeight: tabContainer.badgeCaption.fontWeight, marginTop: -1, } }; diff --git a/styles/native/ts/core/widgets/textarea.ts b/styles/native/ts/core/widgets/textarea.ts index 6c089676..aed39a54 100644 --- a/styles/native/ts/core/widgets/textarea.ts +++ b/styles/native/ts/core/widgets/textarea.ts @@ -47,6 +47,10 @@ export const TextArea: TextBoxType = { // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed ...TextBox.inputError, }, + inputFocused: { + // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed + ...TextBox.inputFocused, + }, validationMessage: { // All TextStyle properties are allowed ...TextBox.validationMessage, @@ -65,5 +69,6 @@ export const TextAreaVertical: TextBoxType = { input: TextBoxVertical.input, inputDisabled: TextBoxVertical.inputDisabled, inputError: TextBoxVertical.inputError, + inputFocused: TextBoxVertical.inputFocused, validationMessage: TextBoxVertical.validationMessage, }; diff --git a/styles/native/ts/core/widgets/textbox.ts b/styles/native/ts/core/widgets/textbox.ts index 8794db64..84d45c2f 100644 --- a/styles/native/ts/core/widgets/textbox.ts +++ b/styles/native/ts/core/widgets/textbox.ts @@ -60,6 +60,9 @@ export const TextBox: TextBoxType = { placeholderTextColor: input.errorColor, underlineColorAndroid: input.underlineColorAndroid, }, + inputFocused: { + // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed + }, validationMessage: { // All TextStyle properties are allowed color: input.errorColor, @@ -94,6 +97,7 @@ export const TextBoxVertical: TextBoxType = { paddingHorizontal: input.paddingHorizontal, paddingVertical: input.paddingVertical, }, + inputFocused: TextBox.inputFocused, inputDisabled: TextBox.inputDisabled, inputError: TextBox.inputError, validationMessage: TextBox.validationMessage, diff --git a/styles/native/ts/types/variables.d.ts b/styles/native/ts/types/variables.d.ts index 3fc47233..153925cf 100644 --- a/styles/native/ts/types/variables.d.ts +++ b/styles/native/ts/types/variables.d.ts @@ -122,6 +122,7 @@ export interface VariablesInput { selectionColor: string, placeholderTextColor: string, underlineColorAndroid: string, + inputContainerUnderlayColor: string, fontSize: number, fontFamily: string, @@ -185,6 +186,18 @@ export interface VariablesTabContainer { fontWeight: FontWeight, textTransform: TextTransform }, + badgeContainer: { + borderRadius: number, + backgroundColor: string, + paddingVertical: number, + paddingHorizontal: number, + marginLeft: number + }, + badgeCaption: { + fontSize: number, + color: string, + fontWeight: FontWeight, + } } export interface VariablesListView { diff --git a/styles/native/ts/types/widgets.d.ts b/styles/native/ts/types/widgets.d.ts index e83b76cc..e173c2c2 100644 --- a/styles/native/ts/types/widgets.d.ts +++ b/styles/native/ts/types/widgets.d.ts @@ -176,10 +176,17 @@ export interface DropDownType { valueContainer?: { rippleColor?: string } & ViewStyle; + valueContainerFocused?: ViewStyle; valueContainerDisabled?: ViewStyle; + valueFocused?: TextStyle; menuWrapper?: ViewStyle; + iconStyle?: TextStyle; item?: TextStyle; - itemContainer?: ViewStyle; + itemContainer?: ViewStyle & { + rippleColor?: string; + underlayColor?: string; + activeOpacity?: number; + }; selectedItem?: TextStyle; selectedItemContainer?: ViewStyle; /* New dropdown styles end */ @@ -445,6 +452,7 @@ export interface TextBoxType { input?: InputType, inputDisabled?: InputType, inputError?: InputType, + inputFocused?: InputType; validationMessage?: TextStyle } diff --git a/styles/web/sass/core/widgets/_popupmenu.scss b/styles/web/sass/core/widgets/_popupmenu.scss new file mode 100644 index 00000000..0e64da59 --- /dev/null +++ b/styles/web/sass/core/widgets/_popupmenu.scss @@ -0,0 +1,105 @@ +// +// 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/web/sass/app/ so the core styling is overwritten. +// + +/* ========================================================================== + Popup Menu + + Default Mendix Popup Menus +========================================================================== */ +.popupmenu { + position: relative; + display: inline-flex; +} + +.popupmenu-trigger { + cursor: pointer; +} + +.popupmenu-menu { + position: absolute; + z-index: 999; + display: none; + flex-direction: column; + width: max-content; + border: 1px solid $border-color-default; + border-radius: 8px; + background-color: $bg-color; + box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.02), 0 8px 10px 1px rgba(0, 0, 0, 0.04), + 0 5px 5px -3px rgba(0, 0, 0, 0.08); + + &.popupmenu-position-left { + top: 0; + left: 0; + transform: translateX(-100%); + } + + &.popupmenu-position-right { + top: 0; + right: 0; + transform: translateX(100%); + } + + &.popupmenu-position-top { + top: 0; + transform: translateY(-100%); + } + + &.popupmenu-position-bottom { + bottom: 0; + transform: translateY(100%); + } + + .popupmenu-basic-item:first-child, + .popupmenu-custom-item:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + .popupmenu-basic-item:last-child, + .popupmenu-custom-item:last-child { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } +} + +.popupmenu-basic-divider { + width: 100%; + height: 1px; + background-color: $brand-default; +} + +.popupmenu-basic-item { + padding: 12px 16px; + color: $font-color-default; + font-size: 14px; + + &:hover, + &:focus, + &:active { + cursor: pointer; + border-color: $bg-color-secondary; + background-color: $bg-color-secondary; + } + + &-primary { + color: $brand-default; + } + + &-danger { + color: $brand-danger; + } +} + +.popupmenu-custom-item { + &:hover, + &:focus, + &:active { + cursor: pointer; + border-color: $bg-color-secondary; + background-color: $bg-color-secondary; + } +} diff --git a/styles/web/sass/main.scss b/styles/web/sass/main.scss index 904aa963..53f45f96 100644 --- a/styles/web/sass/main.scss +++ b/styles/web/sass/main.scss @@ -52,6 +52,7 @@ @import 'core/widgets/navigationlist'; @import 'core/widgets/navigationtree'; @import 'core/helpers/navigationtree'; +@import 'core/widgets/popupmenu'; @import 'core/widgets/simplemenubar'; @import 'core/helpers/simplemenubar'; @import 'core/widgets/radiobuttons';