From 1aff84461ea9b8111e00ef2b8c90db2a9105ef85 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 23 Mar 2021 22:58:43 +0530 Subject: [PATCH 1/7] new: GSD Compact Mdde added --- src/components/Avatar.js | 13 +++++-- src/components/MultipleAvatars.js | 26 +++++++------ src/components/OptionsList.js | 5 +++ src/pages/home/sidebar/OptionRow.js | 27 +++++++++++-- src/pages/home/sidebar/SidebarLinks.js | 1 + src/styles/styles.js | 54 +++++++++++++++++++++++--- src/styles/variables.js | 2 + 7 files changed, 104 insertions(+), 24 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 15923a5289ba..8def4f64508c 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React, {PureComponent} from 'react'; import {Image} from 'react-native'; import PropTypes from 'prop-types'; @@ -9,11 +10,15 @@ const propTypes = { // Extra styles to pass style: PropTypes.arrayOf(PropTypes.any), + + // Set the size of Avatar + size: PropTypes.oneOf(['default', 'small']), }; const defaultProps = { source: '', style: [], + size: 'default', }; class Avatar extends PureComponent { @@ -26,10 +31,10 @@ class Avatar extends PureComponent { this.image = el} source={{uri: this.props.source}} - style={[ - styles.avatarNormal, - ...this.props.style, - ]} + style={_.union([ + this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, + this.props.style, + ])} /> ); } diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 6c1b636f1819..77bd736db0b6 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -10,56 +10,60 @@ const propTypes = { // 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']), }; const defaultProps = { avatarImageURLs: [], optionIsFocused: false, + size: 'default', }; -const MultipleAvatars = ({avatarImageURLs, optionIsFocused}) => { +const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => { if (!avatarImageURLs.length) { return null; } if (avatarImageURLs.length === 1) { return ( - - + + ); } return ( - + {avatarImageURLs.length === 2 ? ( ) : ( - + + {avatarImageURLs.length - 1} diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js index b783cca19866..5add5fa4c95a 100644 --- a/src/components/OptionsList.js +++ b/src/components/OptionsList.js @@ -64,6 +64,9 @@ const propTypes = { // Whether to show the title tooltip showTitleTooltip: PropTypes.bool, + + // Toggle between compact and default view of the option + optionMode: PropTypes.oneOf(['compact', 'default']), }; const defaultProps = { @@ -81,6 +84,7 @@ const defaultProps = { headerMessage: '', innerRef: null, showTitleTooltip: false, + optionMode: undefined, }; class OptionsList extends Component { @@ -146,6 +150,7 @@ class OptionsList extends Component { return ( { const textStyle = optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; const textUnreadStyle = (option.isUnread || forceTextUnreadStyle) ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle]; + const displayNameStyle = mode === 'compact' + ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr3] + : [styles.optionDisplayName, textUnreadStyle]; + const alternateTextStyle = mode === 'compact' + ? [textStyle, styles.optionAlternateText, styles.optionAlternateTextCompact] + : [textStyle, styles.optionAlternateText, styles.mt1]; + const contentContainerStyles = mode === 'compact' + ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter] + : [styles.flex1]; + return ( {hovered => ( @@ -93,6 +108,7 @@ const OptionRow = ({ styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.sidebarInnerRow, + styles.justifyContentCenter, ])} > ) } - + {option.alternateText ? ( {option.alternateText} @@ -170,6 +187,10 @@ export default memo(OptionRow, (prevProps, nextProps) => { return false; } + if (prevProps.mode !== nextProps.mode) { + return false; + } + if (prevProps.option.isUnread !== nextProps.option.isUnread) { return false; } diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 0a9a0d9fdac3..593af80cc973 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -148,6 +148,7 @@ class SidebarLinks extends React.Component { hideSectionHeaders showTitleTooltip disableFocusOptions={this.props.isSmallScreenWidth} + optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'} /> diff --git a/src/styles/styles.js b/src/styles/styles.js index 2f2d808aca7c..bf2dbc4f2c2d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -584,6 +584,13 @@ const styles = { ...whiteSpace.noWrap, }, + optionDisplayNameCompact: { + minWidth: 'auto', + flexBasis: 'auto', + flexGrow: 0, + flexShrink: 0, + }, + optionDisplayNameTooltipWrapper: { position: 'relative', }, @@ -603,6 +610,12 @@ const styles = { lineHeight: 16, }, + optionAlternateTextCompact: { + flexShrink: 1, + flexGrow: 1, + flexBasis: 'auto', + }, + // App Content Wrapper styles appContentWrapper: { backgroundColor: themeColors.appBG, @@ -827,6 +840,13 @@ const styles = { borderRadius: 24, }, + singleAvatarSmall: { + height: 20, + width: 20, + backgroundColor: themeColors.icon, + borderRadius: 20, + }, + secondAvatar: { position: 'absolute', right: -13, @@ -835,6 +855,14 @@ const styles = { borderWidth: 2, }, + secondAvatarSmall: { + position: 'absolute', + right: -8, + bottom: -9, + borderColor: 'transparent', + borderWidth: 2, + }, + avatarNormal: { height: variables.componentSizeNormal, width: variables.componentSizeNormal, @@ -842,11 +870,11 @@ const styles = { borderRadius: variables.componentSizeNormal, }, - avatarText: { + avatarSmall: { + height: variables.avatarSizeSmall, + width: variables.avatarSizeSmall, backgroundColor: themeColors.icon, - borderRadius: 24, - height: 24, - width: 24, + borderRadius: variables.avatarSizeSmall, }, avatarInnerText: { @@ -857,6 +885,14 @@ const styles = { textAlign: 'center', }, + avatarInnerTextSmall: { + color: themeColors.textReversed, + fontSize: variables.fontSizeSmall, + lineHeight: 20, + marginLeft: -2, + textAlign: 'center', + }, + avatarSpace: { top: 3, left: 3, @@ -872,8 +908,14 @@ const styles = { emptyAvatar: { marginRight: variables.componentSizeNormal - 24, - height: 40, - width: 40, + height: variables.avatarSizeNormal, + width: variables.avatarSizeNormal, + }, + + emptyAvatarSmall: { + marginRight: variables.componentSizeNormal - 24, + height: variables.avatarSizeSmall, + width: variables.avatarSizeSmall, }, modalViewContainer: { diff --git a/src/styles/variables.js b/src/styles/variables.js index 6463935aa836..d586c58ef3a2 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -5,6 +5,8 @@ export default { componentSizeLarge: 52, componentBorderRadiusSmall: 4, componentBorderRadiusNormal: 8, + avatarSizeNormal: 40, + avatarSizeSmall: 32, fontSizeSmall: 11, fontSizeLabel: 13, fontSizeNormal: 15, From 25df51195815b908671df82822629f3f84bf667f Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 23 Mar 2021 23:10:20 +0530 Subject: [PATCH 2/7] new: Row height in GSD Mode --- src/pages/home/sidebar/OptionRow.js | 23 ++++++++++++++--------- src/styles/styles.js | 8 ++++++++ 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 88a060d16dc6..d53ff6d7068d 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -85,6 +85,19 @@ const OptionRow = ({ const contentContainerStyles = mode === 'compact' ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter] : [styles.flex1]; + const sidebarInnerRowStyle = StyleSheet.flatten(mode === 'compact' ? [ + styles.chatLinkRowPressable, + styles.flexGrow1, + styles.optionItemAvatarNameWrapper, + styles.sidebarInnerRowSmall, + styles.justifyContentCenter, + ] : [ + styles.chatLinkRowPressable, + styles.flexGrow1, + styles.optionItemAvatarNameWrapper, + styles.sidebarInnerRow, + styles.justifyContentCenter, + ]); return ( @@ -102,15 +115,7 @@ const OptionRow = ({ hovered && !optionIsFocused ? hoverStyle : null, ]} > - + Date: Wed, 24 Mar 2021 00:24:58 +0530 Subject: [PATCH 3/7] chg: adjusted the design of GSD LHN layout --- src/components/MultipleAvatars.js | 3 +-- src/pages/home/sidebar/OptionRow.js | 2 +- src/styles/styles.js | 14 +++++++------- src/styles/variables.js | 3 ++- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 77bd736db0b6..d8a472281d2c 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -64,8 +64,7 @@ const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => { ]} > - + - {avatarImageURLs.length - 1} + {`+${avatarImageURLs.length - 1}`} )} diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index d53ff6d7068d..a58406f3d61c 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -77,7 +77,7 @@ const OptionRow = ({ const textUnreadStyle = (option.isUnread || forceTextUnreadStyle) ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle]; const displayNameStyle = mode === 'compact' - ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr3] + ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2] : [styles.optionDisplayName, textUnreadStyle]; const alternateTextStyle = mode === 'compact' ? [textStyle, styles.optionAlternateText, styles.optionAlternateTextCompact] diff --git a/src/styles/styles.js b/src/styles/styles.js index 3b721b04ce77..b3ed309c4ca0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -545,7 +545,7 @@ const styles = { }, sidebarInnerRowSmall: { - height: 56, + height: 52, paddingTop: 12, paddingRight: 20, paddingBottom: 12, @@ -849,10 +849,10 @@ const styles = { }, singleAvatarSmall: { - height: 20, - width: 20, + height: 18, + width: 18, backgroundColor: themeColors.icon, - borderRadius: 20, + borderRadius: 18, }, secondAvatar: { @@ -895,8 +895,8 @@ const styles = { avatarInnerTextSmall: { color: themeColors.textReversed, - fontSize: variables.fontSizeSmall, - lineHeight: 20, + fontSize: variables.fontSizeExtraSmall, + lineHeight: 18, marginLeft: -2, textAlign: 'center', }, @@ -921,7 +921,7 @@ const styles = { }, emptyAvatarSmall: { - marginRight: variables.componentSizeNormal - 24, + marginRight: variables.componentSizeNormal - 28, height: variables.avatarSizeSmall, width: variables.avatarSizeSmall, }, diff --git a/src/styles/variables.js b/src/styles/variables.js index d586c58ef3a2..2bd1de1681a9 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -6,8 +6,9 @@ export default { componentBorderRadiusSmall: 4, componentBorderRadiusNormal: 8, avatarSizeNormal: 40, - avatarSizeSmall: 32, + avatarSizeSmall: 28, fontSizeSmall: 11, + fontSizeExtraSmall: 9, fontSizeLabel: 13, fontSizeNormal: 15, fontSizeLarge: 17, From 4c0ec7e946a04920898f6b4c979b604bfb2c89d3 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 24 Mar 2021 17:54:13 +0530 Subject: [PATCH 4/7] fix: outline for MultipleAvatars --- src/components/MultipleAvatars.js | 3 +-- src/styles/styles.js | 18 +++++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index d8a472281d2c..a7899103f083 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -45,9 +45,8 @@ const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => { /> {avatarImageURLs.length === 2 ? ( diff --git a/src/styles/styles.js b/src/styles/styles.js index b3ed309c4ca0..cfbb7f7451dd 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -857,18 +857,20 @@ const styles = { secondAvatar: { position: 'absolute', - right: -13, - bottom: -14, + right: -18, + bottom: -18, + borderWidth: 3, + borderRadius: 30, borderColor: 'transparent', - borderWidth: 2, }, secondAvatarSmall: { position: 'absolute', - right: -8, - bottom: -9, + right: -13, + bottom: -13, + borderWidth: 3, + borderRadius: 18, borderColor: 'transparent', - borderWidth: 2, }, avatarNormal: { @@ -908,10 +910,12 @@ const styles = { avatar: { backgroundColor: themeColors.sidebar, + borderColor: themeColors.sidebar, }, focusedAvatar: { - backgroundColor: themeColors.border, + backgroundColor: themeColors.pillBG, + borderColor: themeColors.pillBG, }, emptyAvatar: { From fd2bdf241f286ff0791cda22ca816f2c3bf5038b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 24 Mar 2021 21:56:08 +0530 Subject: [PATCH 5/7] chg: Update the option row styles. --- src/styles/styles.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index cfbb7f7451dd..e320a53b262a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -539,7 +539,6 @@ const styles = { sidebarInnerRow: { height: 64, paddingTop: 12, - paddingRight: 20, paddingBottom: 12, paddingLeft: 20, }, @@ -547,7 +546,6 @@ const styles = { sidebarInnerRowSmall: { height: 52, paddingTop: 12, - paddingRight: 20, paddingBottom: 12, paddingLeft: 20, }, From b6a00ed6e827a0638465135b59da7cb3899cc1ef Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 24 Mar 2021 21:59:47 +0530 Subject: [PATCH 6/7] fix: border styles for the MultipleAvatar on OptionRow Hover --- src/components/MultipleAvatars.js | 61 +++++++++++++++++++++-------- src/pages/home/sidebar/OptionRow.js | 6 +++ 2 files changed, 50 insertions(+), 17 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index a7899103f083..5dce158ab600 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 styles from '../styles/styles'; +import globalStyles from '../styles/styles'; import Avatar from './Avatar'; const propTypes = { @@ -13,56 +13,83 @@ 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 + 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: {}, }; -const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => { +const MultipleAvatars = ({ + avatarImageURLs, optionIsFocused, size, styles, +}) => { + const avatarContainerStyles = [ + size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar, + ]; + const singleAvatarStyles = [ + size === 'small' ? globalStyles.singleAvatarSmall : globalStyles.singleAvatar, styles.singleAvatar, + ]; + const secondAvatarStyles = [ + size === 'small' ? globalStyles.secondAvatarSmall : globalStyles.secondAvatar, + optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar, + styles.secondAvatar, + ]; + console.debug(styles, secondAvatarStyles); + if (!avatarImageURLs.length) { return null; } if (avatarImageURLs.length === 1) { return ( - + ); } return ( - + {avatarImageURLs.length === 2 ? ( ) : ( - + {`+${avatarImageURLs.length - 1}`} diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index a58406f3d61c..1f330a86443e 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -129,6 +129,12 @@ const OptionRow = ({ avatarImageURLs={option.icons} optionIsFocused={optionIsFocused} size={mode === 'compact' ? 'small' : 'default'} + styles={hovered && { + secondAvatar: { + backgroundColor: themeColors.sidebarHover, + borderColor: themeColors.sidebarHover, + }, + }} /> ) } From 22dc5e25285fe4d4f334f5fd2fe61ad0487ab5c0 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 24 Mar 2021 22:21:39 +0530 Subject: [PATCH 7/7] fix: take care of optionFocused state fro MultipleAvatars --- src/components/MultipleAvatars.js | 1 - src/pages/home/sidebar/OptionRow.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 5dce158ab600..b446942563ae 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -51,7 +51,6 @@ const MultipleAvatars = ({ optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar, styles.secondAvatar, ]; - console.debug(styles, secondAvatarStyles); if (!avatarImageURLs.length) { return null; diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 1f330a86443e..f9dfcc8f4727 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -129,7 +129,7 @@ const OptionRow = ({ avatarImageURLs={option.icons} optionIsFocused={optionIsFocused} size={mode === 'compact' ? 'small' : 'default'} - styles={hovered && { + styles={hovered && !optionIsFocused && { secondAvatar: { backgroundColor: themeColors.sidebarHover, borderColor: themeColors.sidebarHover,