From 0ca1d70991ab8c8e3f6cc4f70db7bbfdc4919a1a Mon Sep 17 00:00:00 2001 From: Slavko Date: Tue, 4 May 2021 11:57:08 +0200 Subject: [PATCH 01/11] changes per new navigation --- components/ShareButton.js | 3 +- theme.js | 286 +++++++------------------------------- 2 files changed, 52 insertions(+), 237 deletions(-) diff --git a/components/ShareButton.js b/components/ShareButton.js index 1d3d8caa..83ac06bf 100644 --- a/components/ShareButton.js +++ b/components/ShareButton.js @@ -45,13 +45,14 @@ class ShareButton extends PureComponent { } render() { - const { animationName } = this.props; + const { animationName, iconProps } = this.props; return ( ); diff --git a/theme.js b/theme.js index cec2dc2d..b2e34ea3 100644 --- a/theme.js +++ b/theme.js @@ -1390,6 +1390,23 @@ export default (variables = defaultThemeVariables) => ({ color: changeColorAlpha(variables.text.color, 0.5), }, + 'shoutem.ui.EmptyListImage': { + image: { + resizeMode: 'contain', + marginTop: 45, + marginBottom: 30, + }, + title: { + maxWidth: 250, + marginBottom: 20, + textAlign: 'center', + }, + message: { + textAlign: 'center', + maxWidth: 250, + }, + }, + // // Collections // @@ -1435,57 +1452,7 @@ export default (variables = defaultThemeVariables) => ({ // // Other // - clearNavigationBar: { - [INCLUDE]: ['imageOverlayText'], - - 'shoutem.ui.Button': { - [INCLUDE]: ['clearButton'], - 'shoutem.ui.Icon': { - color: variables.navBarIconsColor, - }, - 'shoutem.ui.Text': { - color: variables.navBarText.color, - }, - }, - container: { - backgroundColor: 'transparent', - borderBottomColor: 'transparent', - }, - }, - navigationBarTextAnimations: { - solidifyAnimation(driver) { - return { - color: driver.interpolate({ - inputRange: [250, 300], - outputRange: [ - variables.imageOverlayTextColor, - variables.navBarText.color, - ], - extrapolate: 'clamp', - }), - }; - }, - // Child components composed by composeChildren of NavigationBar automatically - // get the same animationName as NavigationBar. - // If component doesn't have animation for animation name error will be thrown. - // This animations are provided to all NavigationBar children so that if NavigationBar - // has animation we do not get error that children does not have an animation. - // TODO - // remove this function when animationName propagation is happening only if Icon/Title - // are having animationName defined - boxingAnimation() { - // Only NavigationBar container is animated - // Providing boxing animation just not to get error - return {}; - }, - }, navigationBar: { - '.clear': { - // Clear navigation bar is currently disabled on Android - // due to overflow issues. - [INCLUDE]: ['clearNavigationBar'], - }, - '.featured': { 'shoutem.ui.Button': { 'shoutem.ui.Icon': { @@ -1538,14 +1505,7 @@ export default (variables = defaultThemeVariables) => ({ }, }, - '.no-border': { - container: { - borderBottomWidth: 0, - }, - }, - 'shoutem.ui.Icon': { - [INCLUDE]: ['navigationBarTextAnimations'], color: variables.navBarIconsColor, width: 24, height: 24, @@ -1553,7 +1513,6 @@ export default (variables = defaultThemeVariables) => ({ }, 'shoutem.ui.Text': { - [INCLUDE]: ['navigationBarTextAnimations'], ...variables.navBarText, fontFamily: resolveFontFamily( variables.navBarText.fontFamily, @@ -1568,12 +1527,10 @@ export default (variables = defaultThemeVariables) => ({ 'shoutem.ui.Button': { [INCLUDE]: ['clearButton', 'tightButton'], 'shoutem.ui.Icon': { - [INCLUDE]: ['navigationBarTextAnimations'], color: variables.navBarIconsColor, marginVertical: 9, }, 'shoutem.ui.Text': { - [INCLUDE]: ['navigationBarTextAnimations'], ...variables.navBarText, fontFamily: resolveFontFamily( variables.navBarText.fontFamily, @@ -1612,79 +1569,10 @@ export default (variables = defaultThemeVariables) => ({ }, }, }, - - boxingAnimation(driver) { - return { - container: { - borderBottomColor: driver.interpolate({ - // Animate to approx title top offset - inputRange: [0, 45], - outputRange: ['transparent', variables.navBarBorderColor], - extrapolate: 'clamp', - }), - borderBottomWidth: 1, - }, - }; - }, - - solidifyAnimation(driver) { - return { - container: { - backgroundColor: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarBackground], - extrapolate: 'clamp', - }), - borderBottomColor: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarBorderColor], - extrapolate: 'clamp', - }), - }, - }; - }, - }, - 'shoutem.ui.EmptyListImage': { - image: { - resizeMode: 'contain', - marginTop: 45, - marginBottom: 30, - }, - title: { - maxWidth: 250, - marginBottom: 20, - textAlign: 'center', - }, - message: { - textAlign: 'center', - maxWidth: 250, - }, }, - 'shoutem.ui.NavigationBar': { - [INCLUDE]: ['navigationBar'], - '.clear': { - [INCLUDE]: ['clearNavigationBar'], - }, - '.inline': { - container: { - width: window.width, - position: 'relative', - }, - }, - 'shoutem.ui.Title': { - solidifyAnimation(driver) { - return { - color: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarText.color], - extrapolate: 'clamp', - }), - }; - }, - boxingAnimation() { - return {}; - }, + 'shoutem.ui.NavigationBar': { + title: { color: variables.navBarText.color, lineHeight: calculateLineHeight(variables.navBarText.fontSize), ...variables.navBarText, @@ -1696,59 +1584,52 @@ export default (variables = defaultThemeVariables) => ({ fontWeight: resolveFontWeight(variables.navBarText.fontWeight), fontStyle: resolveFontStyle(variables.navBarText.fontStyle), }, - + icon: { + color: variables.navBarIconsColor, + }, statusBar: { backgroundColor: variables.statusBarColor, statusBarStyle: variables.statusBarStyle, - height: Device.select({ - iPhoneX: IPHONE_X_NOTCH_PADDING, - iPhoneXR: IPHONE_XR_NOTCH_PADDING, - default: 0, - }), }, container: { - [INCLUDE]: ['fillParent'], - height: NAVIGATION_BAR_HEIGHT, backgroundColor: variables.navBarBackground, borderBottomColor: variables.navBarBorderColor, borderBottomWidth: StyleSheet.hairlineWidth, - // Leave space for the status bar on iOS - paddingTop: Device.select({ - iPhoneX: 0, - iPhoneXR: 0, - default: - Platform.OS === 'ios' && !Device.isIphoneX && !Device.isIphoneXR - ? 20 - : 0, - }), }, - - componentsContainer: { - flex: 1, - alignItems: 'flex-end', - flexDirection: 'row', - justifyContent: 'space-between', - backgroundColor: 'transparent', + leftContainer: { + paddingLeft: variables.mediumGutter, }, - - leftComponent: { - alignSelf: 'center', - alignItems: 'flex-start', - flex: 1, + rightContainer: { + paddingRight: variables.mediumGutter, }, - centerComponent: { - alignSelf: 'center', - alignItems: 'center', - flex: 1, - marginBottom: 0, + '.clear': { + container: { + backgroundColor: 'transparent', + borderBottomColor: 'transparent', + }, }, - rightComponent: { - alignSelf: 'center', - alignItems: 'flex-end', - flex: 1, + '.featured': { + title: { + color: variables.featuredNavBarTitleColor, + }, + icon: { + color: variables.featuredNavBarIconsColor, + }, + + container: { + borderBottomWidth: 0, + shadowOpacity: 0, + }, }, + + '.no-border': { + container: { + borderBottomWidth: 0, + shadowOpacity: 0, + }, + } }, 'shoutem.ui.navigation.NavigationBar': { [INCLUDE]: ['navigationBar'], @@ -1771,73 +1652,6 @@ export default (variables = defaultThemeVariables) => ({ }, }, - '.none': { - // TODO - we are aware that in full screen case navigation bar blocks top screen touch - // When updated to RN > 0.42. fix by changing NavigationCardStack scene zIndex. - // Scene zIndex should be larger then navigation thus render above NavigationBar. - container: { - opacity: 0, - }, - }, - - '.inline': { - '.clear': { - container: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - }, - }, - }, - - 'shoutem.ui.View': { - '.container': { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - - '.full-width': { - width: window.width, - }, - }, - - 'shoutem.ui.Title': { - solidifyAnimation(driver) { - return { - color: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarText.color], - extrapolate: 'clamp', - }), - }; - }, - - boxingAnimation(driver) { - return { - opacity: driver.interpolate({ - inputRange: [250, 300], - outputRange: [0, 1], - extrapolate: 'clamp', - }), - }; - }, - - flex: 1, - textAlign: 'center', - lineHeight: calculateLineHeight(variables.navBarText.fontSize), - ...variables.navBarText, - fontFamily: resolveFontFamily( - variables.navBarText.fontFamily, - variables.navBarText.fontWeight, - variables.navBarText.fontStyle, - ), - fontWeight: resolveFontWeight(variables.navBarText.fontWeight), - fontStyle: resolveFontStyle(variables.navBarText.fontStyle), - }, - container: { paddingTop: NAVIGATION_BAR_HEIGHT, backgroundColor: variables.navBarBackground, From c525377ac241694b934ee214d8346d3ecd7bf1cf Mon Sep 17 00:00:00 2001 From: Slavko Date: Tue, 11 May 2021 11:21:29 +0200 Subject: [PATCH 02/11] dropdown adjustments --- theme.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/theme.js b/theme.js index b2e34ea3..5e46bb84 100644 --- a/theme.js +++ b/theme.js @@ -1550,25 +1550,6 @@ export default (variables = defaultThemeVariables) => ({ }, paddingHorizontal: 9, }, - - 'shoutem.ui.DropDownMenu': { - selectedOption: { - 'shoutem.ui.Icon': { - color: variables.navBarIconsColor, - }, - 'shoutem.ui.Text': { - ...variables.navBarText, - fontFamily: resolveFontFamily( - variables.navBarText.fontFamily, - 'normal', - variables.navBarText.fontStyle, - ), - fontWeight: resolveFontWeight('normal'), - fontStyle: resolveFontStyle(variables.navBarText.fontStyle), - color: variables.navBarIconsColor, - }, - }, - }, }, 'shoutem.ui.NavigationBar': { @@ -2028,6 +2009,25 @@ export default (variables = defaultThemeVariables) => ({ }, }, + '.navBar': { + selectedOption: { + 'shoutem.ui.Icon': { + color: variables.navBarIconsColor, + }, + 'shoutem.ui.Text': { + ...variables.navBarText, + fontFamily: resolveFontFamily( + variables.navBarText.fontFamily, + 'normal', + variables.navBarText.fontStyle, + ), + fontWeight: resolveFontWeight('normal'), + fontStyle: resolveFontStyle(variables.navBarText.fontStyle), + color: variables.navBarIconsColor, + }, + }, + }, + '.large': { horizontalContainer: { alignItems: 'flex-end', From e52bf64c9b5ee4e0845b84499072b41f81aa2209 Mon Sep 17 00:00:00 2001 From: Slavko Date: Wed, 19 May 2021 10:45:04 +0200 Subject: [PATCH 03/11] add navbar animations --- theme.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/theme.js b/theme.js index 5e46bb84..0563eb8a 100644 --- a/theme.js +++ b/theme.js @@ -1610,7 +1610,34 @@ export default (variables = defaultThemeVariables) => ({ borderBottomWidth: 0, shadowOpacity: 0, }, - } + }, + + boxingAnimation(driver) { + return { + borderBottomColor: driver.interpolate({ + // Animate to approx title top offset + inputRange: [0, 45], + outputRange: ['transparent', variables.navBarBorderColor], + extrapolate: 'clamp', + }), + borderBottomWidth: 1, + }; + }, + + solidifyAnimation(driver) { + return { + backgroundColor: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarBackground], + extrapolate: 'clamp', + }), + borderBottomColor: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarBorderColor], + extrapolate: 'clamp', + }), + }; + }, }, 'shoutem.ui.navigation.NavigationBar': { [INCLUDE]: ['navigationBar'], From 08dd8e14a6ce6ed3abd1a14785886be39ea60668 Mon Sep 17 00:00:00 2001 From: Slavko Date: Mon, 24 May 2021 16:18:57 +0200 Subject: [PATCH 04/11] include title / icon styles for boxing --- theme.js | 59 ++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/theme.js b/theme.js index 0563eb8a..c15258d1 100644 --- a/theme.js +++ b/theme.js @@ -1614,28 +1614,53 @@ export default (variables = defaultThemeVariables) => ({ boxingAnimation(driver) { return { - borderBottomColor: driver.interpolate({ - // Animate to approx title top offset - inputRange: [0, 45], - outputRange: ['transparent', variables.navBarBorderColor], - extrapolate: 'clamp', - }), - borderBottomWidth: 1, + container: { + borderBottomColor: driver.interpolate({ + // Animate to approx title top offset + inputRange: [0, 45], + outputRange: ['transparent', variables.navBarBorderColor], + extrapolate: 'clamp', + }), + borderBottomWidth: 1, + }, + title: { + opacity: driver.interpolate({ + inputRange: [250, 300], + outputRange: [0, 1], + extrapolate: 'clamp', + }), + } }; }, solidifyAnimation(driver) { return { - backgroundColor: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarBackground], - extrapolate: 'clamp', - }), - borderBottomColor: driver.interpolate({ - inputRange: [250, 300], - outputRange: ['transparent', variables.navBarBorderColor], - extrapolate: 'clamp', - }), + icon: { + color: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarText.color], + extrapolate: 'clamp', + }), + }, + title: { + color: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarText.color], + extrapolate: 'clamp', + }), + }, + container: { + backgroundColor: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarBackground], + extrapolate: 'clamp', + }), + borderBottomColor: driver.interpolate({ + inputRange: [250, 300], + outputRange: ['transparent', variables.navBarBorderColor], + extrapolate: 'clamp', + }), + } }; }, }, From bb6c2c0b45edbf64728de283de208d3a5d0d3dc2 Mon Sep 17 00:00:00 2001 From: Slavko Date: Mon, 24 May 2021 16:21:30 +0200 Subject: [PATCH 05/11] bump RNSVG to support animated values --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6e572947..102ae9e1 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "react-native-modal": "11.7.0", "react-native-render-html": "~4.2.0", "react-native-status-bar-height": "2.5.0", - "react-native-svg": "^9.13.0", + "react-native-svg": "^12.1.1", "react-native-svg-transformer": "^0.14.3", "react-native-transformable-image": "shoutem/react-native-transformable-image#v0.0.20", "react-native-vector-icons": "~6.6.0", From cc572e9e433c0670e530bf3df494719661b44682 Mon Sep 17 00:00:00 2001 From: Tomislav Arambasic Date: Tue, 25 May 2021 16:04:12 +0200 Subject: [PATCH 06/11] Add share button clear stylename --- components/ShareButton.js | 4 ++-- theme.js | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/ShareButton.js b/components/ShareButton.js index 83ac06bf..2d02bdef 100644 --- a/components/ShareButton.js +++ b/components/ShareButton.js @@ -45,10 +45,10 @@ class ShareButton extends PureComponent { } render() { - const { animationName, iconProps } = this.props; + const { animationName, iconProps, ...otherProps } = this.props; return ( -