From 43ae43e61f860951e38da52144a31e80bc76f472 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 26 Mar 2021 17:18:41 +0530 Subject: [PATCH 1/7] cleanup GSD layout --- src/components/Avatar.js | 7 +++-- src/components/MultipleAvatars.js | 40 ++++++++++------------------- src/pages/home/sidebar/OptionRow.js | 7 +---- src/styles/styles.js | 5 ++++ 4 files changed, 22 insertions(+), 37 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 8def4f64508c..3114ac74d9fc 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,4 +1,3 @@ -import _ from 'underscore'; import React, {PureComponent} from 'react'; import {Image} from 'react-native'; import PropTypes from 'prop-types'; @@ -31,10 +30,10 @@ class Avatar extends PureComponent { this.image = el} source={{uri: this.props.source}} - style={_.union([ + style={[ this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, - this.props.style, - ])} + ...this.props.style, + ]} /> ); } diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index b446942563ae..2a5f632d6c5c 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -1,7 +1,7 @@ import React, {memo} from 'react'; import PropTypes from 'prop-types'; import {Image, Text, View} from 'react-native'; -import globalStyles from '../styles/styles'; +import styles from '../styles/styles'; import Avatar from './Avatar'; const propTypes = { @@ -14,42 +14,28 @@ const propTypes = { // Set the sie of avatars size: PropTypes.oneOf(['default', 'small']), - // Styles to override the basic component styles - styles: PropTypes.shape({ - // Style for First Avatar on Multiple Avatars - // eslint-disable-next-line react/forbid-prop-types - singleAvatar: PropTypes.object, + // Style for Second Avatar on Multiple Avatars + // eslint-disable-next-line react/forbid-prop-types + secondAvatarStyle: PropTypes.object, - // Style for Second Avatar on Multiple Avatars - // eslint-disable-next-line react/forbid-prop-types - secondAvatar: PropTypes.object, - - // Style for avatar Container - // eslint-disable-next-line react/forbid-prop-types - emptyAvatar: PropTypes.object, - }), }; const defaultProps = { avatarImageURLs: [], optionIsFocused: false, size: 'default', - styles: {}, + secondAvatarStyle: {}, }; const MultipleAvatars = ({ - avatarImageURLs, optionIsFocused, size, styles, + avatarImageURLs, optionIsFocused, size, secondAvatarStyle, }) => { - const avatarContainerStyles = [ - size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar, - ]; - const singleAvatarStyles = [ - size === 'small' ? globalStyles.singleAvatarSmall : globalStyles.singleAvatar, styles.singleAvatar, - ]; + const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar; + const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar; const secondAvatarStyles = [ - size === 'small' ? globalStyles.secondAvatarSmall : globalStyles.secondAvatar, - optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar, - styles.secondAvatar, + size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar, + optionIsFocused ? styles.focusedAvatar : styles.avatar, + secondAvatarStyle, ]; if (!avatarImageURLs.length) { @@ -86,8 +72,8 @@ const MultipleAvatars = ({ style={singleAvatarStyles} > {`+${avatarImageURLs.length - 1}`} diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index f9dfcc8f4727..4e25ed7b41fa 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -129,12 +129,7 @@ const OptionRow = ({ avatarImageURLs={option.icons} optionIsFocused={optionIsFocused} size={mode === 'compact' ? 'small' : 'default'} - styles={hovered && !optionIsFocused && { - secondAvatar: { - backgroundColor: themeColors.sidebarHover, - borderColor: themeColors.sidebarHover, - }, - }} + secondAvatarStyle={hovered && !optionIsFocused && styles.secondAvatarHovered} /> ) } diff --git a/src/styles/styles.js b/src/styles/styles.js index 9a55ef7a7d34..8fcd40a43a2b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -872,6 +872,11 @@ const styles = { borderColor: 'transparent', }, + secondAvatarHovered: { + backgroundColor: themeColors.sidebarHover, + borderColor: themeColors.sidebarHover, + }, + secondAvatarSmall: { position: 'absolute', right: -13, From 8684e94257fb7d6ab984f5ebfa372288cbd3fe2f Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 27 Mar 2021 02:30:59 +0530 Subject: [PATCH 2/7] refactor code --- src/pages/home/sidebar/OptionRow.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 4e25ed7b41fa..f049608611f0 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -129,7 +129,9 @@ const OptionRow = ({ avatarImageURLs={option.icons} optionIsFocused={optionIsFocused} size={mode === 'compact' ? 'small' : 'default'} - secondAvatarStyle={hovered && !optionIsFocused && styles.secondAvatarHovered} + secondAvatarStyle={hovered && !optionIsFocused + ? styles.secondAvatarHovered + : undefined} /> ) } From dd9e5b30b838046703f3b5e84814c76a3e6c7fcd Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 29 Mar 2021 14:57:36 +0530 Subject: [PATCH 3/7] fix: padding of OptionRow --- src/pages/home/sidebar/OptionRow.js | 2 +- src/styles/styles.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index f049608611f0..9a9ef4cac3fd 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -162,7 +162,7 @@ const OptionRow = ({ {!hideAdditionalOptionStates && ( - + {option.hasDraftComment && ( diff --git a/src/styles/styles.js b/src/styles/styles.js index 8fcd40a43a2b..8e551ff739a4 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -535,20 +535,20 @@ const styles = { sidebarLinkInner: { alignItems: 'center', flexDirection: 'row', + paddingLeft: 20, + paddingRight: 20, }, sidebarInnerRow: { height: 64, paddingTop: 12, paddingBottom: 12, - paddingLeft: 20, }, sidebarInnerRowSmall: { height: 52, paddingTop: 12, paddingBottom: 12, - paddingLeft: 20, }, sidebarLinkText: { From 8c6b211c4c579bd3119b1fda2019cf957fad24d5 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 29 Mar 2021 16:52:28 +0530 Subject: [PATCH 4/7] fix border color for Header Multiple Avatars --- src/pages/home/HeaderView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 442a0af162df..116a35f50564 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -85,7 +85,10 @@ const HeaderView = (props) => { }} style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]} > - + Date: Tue, 30 Mar 2021 13:31:00 +0530 Subject: [PATCH 5/7] fix: border color --- src/styles/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 98d009ee0ee9..d1c08f448d6e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -920,8 +920,8 @@ const styles = { }, focusedAvatar: { - backgroundColor: themeColors.pillBG, - borderColor: themeColors.pillBG, + backgroundColor: themeColors.border, + borderColor: themeColors.border, }, emptyAvatar: { From 19d23542ff7a0c929cb791bd4aa7735b984472fa Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 31 Mar 2021 21:27:35 +0530 Subject: [PATCH 6/7] fix the border around the Avatar and refactor code --- src/components/MultipleAvatars.js | 15 +++++-------- src/components/OptionsList.js | 5 +++++ src/pages/home/HeaderView.js | 2 +- src/pages/home/sidebar/OptionRow.js | 31 +++++++++++++++++++++----- src/pages/home/sidebar/SidebarLinks.js | 2 ++ 5 files changed, 39 insertions(+), 16 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 2a5f632d6c5c..b81dc79976c4 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -8,34 +8,29 @@ const propTypes = { // Array of avatar URL avatarImageURLs: PropTypes.arrayOf(PropTypes.string), - // Whether this option is currently in focus so we can modify its style - optionIsFocused: PropTypes.bool, - // Set the sie of avatars size: PropTypes.oneOf(['default', 'small']), - // Style for Second Avatar on Multiple Avatars + // Style for Second Avatar on Hovered state // eslint-disable-next-line react/forbid-prop-types - secondAvatarStyle: PropTypes.object, + secondAvatarStyle: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { avatarImageURLs: [], - optionIsFocused: false, size: 'default', - secondAvatarStyle: {}, + secondAvatarStyle: [styles.secondAvatarHovered], }; const MultipleAvatars = ({ - avatarImageURLs, optionIsFocused, size, secondAvatarStyle, + avatarImageURLs, size, secondAvatarStyle, }) => { const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar; const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar; const secondAvatarStyles = [ size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar, - optionIsFocused ? styles.focusedAvatar : styles.avatar, - secondAvatarStyle, + ...secondAvatarStyle, ]; if (!avatarImageURLs.length) { diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js index 584d2e51887d..7e62eb49c24f 100644 --- a/src/components/OptionsList.js +++ b/src/components/OptionsList.js @@ -8,6 +8,9 @@ import optionPropTypes from './optionPropTypes'; import SectionList from './SectionList'; const propTypes = { + // option Background Color + optionBackgroundColor: PropTypes.string, + // Style for hovered state // eslint-disable-next-line react/forbid-prop-types optionHoveredStyle: PropTypes.object, @@ -71,6 +74,7 @@ const propTypes = { }; const defaultProps = { + optionBackgroundColor: undefined, optionHoveredStyle: undefined, contentContainerStyles: [], sections: [], @@ -153,6 +157,7 @@ class OptionsList extends Component { option={item} mode={this.props.optionMode} showTitleTooltip={this.props.showTitleTooltip} + backgroundColor={this.props.optionBackgroundColor} hoverStyle={this.props.optionHoveredStyle} optionIsFocused={!this.props.disableFocusOptions && this.props.focusedIndex === (index + section.indexOffset)} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index f7f8a1dab656..3ec811a03c36 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -88,7 +88,7 @@ const HeaderView = (props) => { > {hovered => ( @@ -112,6 +121,7 @@ const OptionRow = ({ styles.justifyContentBetween, styles.sidebarLink, styles.sidebarLinkInner, + {backgroundColor}, optionIsFocused ? styles.sidebarLinkActive : null, hovered && !optionIsFocused ? hoverStyle : null, ]} @@ -128,11 +138,22 @@ const OptionRow = ({ && ( ) } diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 593af80cc973..7f24fa96180e 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -19,6 +19,7 @@ import {getDefaultAvatar} from '../../../libs/actions/PersonalDetails'; import KeyboardSpacer from '../../../components/KeyboardSpacer'; import CONST from '../../../CONST'; import {participantPropTypes} from './optionPropTypes'; +import themeColors from '../../../styles/themes/default'; const propTypes = { // Toggles the navigation menu open and closed @@ -145,6 +146,7 @@ class SidebarLinks extends React.Component { Navigation.navigate(ROUTES.getReportRoute(option.reportID)); this.props.onLinkClick(); }} + optionBackgroundColor={themeColors.sidebar} hideSectionHeaders showTitleTooltip disableFocusOptions={this.props.isSmallScreenWidth} From b9bd1551cbdb0899a38cf470e8b54f8c5b4b5f94 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 31 Mar 2021 22:51:35 +0530 Subject: [PATCH 7/7] refactor code for consistency --- src/components/MultipleAvatars.js | 2 +- src/pages/home/sidebar/OptionRow.js | 18 ++++-------------- src/styles/styles.js | 7 +++++++ 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index b81dc79976c4..6b7ac3e167e8 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -11,7 +11,7 @@ const propTypes = { // Set the sie of avatars size: PropTypes.oneOf(['default', 'small']), - // Style for Second Avatar on Hovered state + // Style for Second Avatar // eslint-disable-next-line react/forbid-prop-types secondAvatarStyle: PropTypes.arrayOf(PropTypes.object), diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 6374b2b4749a..c7d10c705714 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -7,7 +7,7 @@ import { View, StyleSheet, } from 'react-native'; -import styles from '../../../styles/styles'; +import styles, {getSecondAvatarStyle} from '../../../styles/styles'; import {optionPropTypes} from './optionPropTypes'; import Icon from '../../../components/Icon'; import {Pencil, PinCircle, Checkmark} from '../../../components/Icon/Expensicons'; @@ -140,19 +140,9 @@ const OptionRow = ({ avatarImageURLs={option.icons} size={mode === 'compact' ? 'small' : 'default'} secondAvatarStyle={[ - { - backgroundColor, - borderColor: backgroundColor, - }, - optionIsFocused && { - backgroundColor: focusedBackgroundColor, - borderColor: focusedBackgroundColor, - }, - hovered && !optionIsFocused - && { - backgroundColor: hoveredBackgroundColor, - borderColor: hoveredBackgroundColor, - }, + getSecondAvatarStyle(backgroundColor), + optionIsFocused && getSecondAvatarStyle(focusedBackgroundColor), + hovered && !optionIsFocused && getSecondAvatarStyle(hoveredBackgroundColor), ]} /> ) diff --git a/src/styles/styles.js b/src/styles/styles.js index ba6c91c18f48..751c36668222 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1409,6 +1409,12 @@ function getZoomSizingStyle(isZoomed) { }; } +function getSecondAvatarStyle(parentBGColor) { + return { + backgroundColor: parentBGColor, + borderColor: parentBGColor, + }; +} export default styles; export { getSafeAreaPadding, @@ -1419,4 +1425,5 @@ export { getNavigationModalCardStyle, getZoomCursorStyle, getZoomSizingStyle, + getSecondAvatarStyle, };