Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated LHN layout in GSD Priority Mode #2015

Merged
merged 7 commits into from
Mar 26, 2021
Merged

Updated LHN layout in GSD Priority Mode #2015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1aff844
new: GSD Compact Mdde added
parasharrajat Mar 23, 2021
25df511
new: Row height in GSD Mode
parasharrajat Mar 23, 2021
d2b98b2
chg: adjusted the design of GSD LHN layout
parasharrajat Mar 23, 2021
4c0ec7e
fix: outline for MultipleAvatars
parasharrajat Mar 24, 2021
fd2bdf2
chg: Update the option row styles.
parasharrajat Mar 24, 2021
b6a00ed
fix: border styles for the MultipleAvatar on OptionRow Hover
parasharrajat Mar 24, 2021
22dc5e2
fix: take care of optionFocused state fro MultipleAvatars
parasharrajat Mar 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/components/Avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import _ from 'underscore';
import React, {PureComponent} from 'react';
import {Image} from 'react-native';
import PropTypes from 'prop-types';
Expand All @@ -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 {
Expand All @@ -26,10 +31,10 @@ class Avatar extends PureComponent {
<Image
ref={el => this.image = el}
source={{uri: this.props.source}}
style={[
styles.avatarNormal,
...this.props.style,
]}
style={_.union([
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
this.props.style,
])}
/>
);
}
Expand Down
70 changes: 49 additions & 21 deletions src/components/MultipleAvatars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really into the globalStyles convention. Can we just keep this as styles and then if there are some more specific styles passed in as props give them a more descriptive name? Usually the prop styles have a specific purpose.

import Avatar from './Avatar';

const propTypes = {
Expand All @@ -10,58 +10,86 @@ 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']),

// 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,
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
}),
};

const defaultProps = {
avatarImageURLs: [],
optionIsFocused: false,
size: 'default',
styles: {},
};

const MultipleAvatars = ({avatarImageURLs, optionIsFocused}) => {
const MultipleAvatars = ({
avatarImageURLs, optionIsFocused, size, styles,
}) => {
const avatarContainerStyles = [
size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

styles.emptyAvatar should go on a new line to make this more readable

];
const singleAvatarStyles = [
size === 'small' ? globalStyles.singleAvatarSmall : globalStyles.singleAvatar, styles.singleAvatar,
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
];
const secondAvatarStyles = [
size === 'small' ? globalStyles.secondAvatarSmall : globalStyles.secondAvatar,
optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar,
styles.secondAvatar,
];

if (!avatarImageURLs.length) {
return null;
}

if (avatarImageURLs.length === 1) {
return (
<View style={styles.emptyAvatar}>
<Avatar source={avatarImageURLs[0]} />
<View style={avatarContainerStyles}>
<Avatar source={avatarImageURLs[0]} size={size} />
</View>
);
}

return (
<View style={styles.emptyAvatar}>
<View style={avatarContainerStyles}>
<View
style={styles.singleAvatar}
style={singleAvatarStyles}
>
<Image
source={{uri: avatarImageURLs[0]}}
style={styles.singleAvatar}
style={singleAvatarStyles}
/>
<View
style={[
styles.singleAvatar,
optionIsFocused ? styles.focusedAvatar : styles.avatar,
styles.secondAvatar,
]}
style={secondAvatarStyles}
>
{avatarImageURLs.length === 2 ? (
<Image
source={{uri: avatarImageURLs[1]}}
style={[
styles.singleAvatar,
]}
style={singleAvatarStyles}
/>
) : (
<View
style={[
styles.avatarText,
]}
style={singleAvatarStyles}
>
<Text style={styles.avatarInnerText}>
+
{avatarImageURLs.length - 1}
<Text style={size === 'small'
? globalStyles.avatarInnerTextSmall
: globalStyles.avatarInnerText}
>
{`+${avatarImageURLs.length - 1}`}
</Text>
</View>
)}
Expand Down
5 changes: 5 additions & 0 deletions src/components/OptionsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -81,6 +84,7 @@ const defaultProps = {
headerMessage: '',
innerRef: null,
showTitleTooltip: false,
optionMode: undefined,
};

class OptionsList extends Component {
Expand Down Expand Up @@ -146,6 +150,7 @@ class OptionsList extends Component {
return (
<OptionRow
option={item}
mode={this.props.optionMode}
showTitleTooltip={this.props.showTitleTooltip}
hoverStyle={this.props.optionHoveredStyle}
optionIsFocused={!this.props.disableFocusOptions
Expand Down
54 changes: 43 additions & 11 deletions src/pages/home/sidebar/OptionRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const propTypes = {

// Whether to show the title tooltip
showTitleTooltip: PropTypes.bool,

// Toggle between compact and default view
mode: PropTypes.oneOf(['compact', 'default']),
};

const defaultProps = {
Expand All @@ -53,6 +56,7 @@ const defaultProps = {
isSelected: false,
forceTextUnreadStyle: false,
showTitleTooltip: false,
mode: 'default',
};

const OptionRow = ({
Expand All @@ -65,12 +69,36 @@ const OptionRow = ({
isSelected,
forceTextUnreadStyle,
showTitleTooltip,
mode,
}) => {
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.mr2]
: [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];
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 (
<Hoverable>
{hovered => (
Expand All @@ -87,14 +115,7 @@ const OptionRow = ({
hovered && !optionIsFocused ? hoverStyle : null,
]}
>
<View
style={StyleSheet.flatten([
styles.chatLinkRowPressable,
styles.flexGrow1,
styles.optionItemAvatarNameWrapper,
styles.sidebarInnerRow,
])}
>
<View style={sidebarInnerRowStyle}>
<View
style={[
styles.flexRow,
Expand All @@ -107,20 +128,27 @@ const OptionRow = ({
<MultipleAvatars
avatarImageURLs={option.icons}
optionIsFocused={optionIsFocused}
size={mode === 'compact' ? 'small' : 'default'}
styles={hovered && !optionIsFocused && {
secondAvatar: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be in styles.js not right in the JSX I think?

backgroundColor: themeColors.sidebarHover,
borderColor: themeColors.sidebarHover,
},
}}
/>
)
}
<View style={[styles.flex1]}>
<View style={contentContainerStyles}>
<OptionRowTitle
option={option}
tooltipEnabled={showTitleTooltip}
numberOfLines={1}
style={[styles.optionDisplayName, textUnreadStyle]}
style={displayNameStyle}
/>

{option.alternateText ? (
<Text
style={[textStyle, styles.optionAlternateText, styles.mt1]}
style={alternateTextStyle}
numberOfLines={1}
>
{option.alternateText}
Expand Down Expand Up @@ -170,6 +198,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;
}
Expand Down
1 change: 1 addition & 0 deletions src/pages/home/sidebar/SidebarLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
/>
<KeyboardSpacer />
</View>
Expand Down
Loading