Updated LHN layout in GSD Priority Mode #2015

parasharrajat · 2021-03-23T18:02:26Z

Please review @shawnborton.

Fixed Issues

Fixes #1914

Tests

Toggle PriorityMode to GSD from Profile preferences and observe the layout change on all platforms.

Tested On

Screenshots

Web

Mobile Web

Desktop

Android

shawnborton · 2021-03-23T18:11:23Z

A couple of pieces of design guidance before I dive in:

The new size of the avatar area should be 28x28:

For multiple avatars, each one should be 18x18:

The border width around the bottom right avatar should be 3:

And notice that the font size inside of that bottom right bubble is 9 - we'll have to create a new fontSize variable for that:

The gap between the avatar and the grouping of the username/preview is 12:

The gap between the username and the message preview is 8:

parasharrajat · 2021-03-23T18:15:12Z

Thanks for the info @shawnborton. Matter of fact, I chose the same size as you mentioned. But still needs to adjust a few. Please review it when I take it out of the draft. Thanks.

shawnborton · 2021-03-23T18:35:24Z

Sounds good, just ping me when it's ready :)

parasharrajat · 2021-03-23T19:04:26Z

Updated @shawnborton.

shawnborton · 2021-03-23T19:35:12Z

Looking good! One small thing that I notice is that the outer border of the bottom right avatar in the avatar group looks strange:

I think this is because the border radius is not large enough, and thus we aren't getting a perfect circle for this outer border. I think this problem might actually already exist today. Anyways, I think if we just bump up the border radius to being something larger than just avatarSize/2, we should be good. Let me know if that makes sense!

parasharrajat · 2021-03-23T19:44:15Z

I think why it is like that.

shawnborton · 2021-03-23T19:49:33Z

Ah interesting. Well that is a strange way to implement that. In the very least, that red portion should be larger.

ctkochan22 · 2021-03-23T22:48:25Z

@shawnborton Code looks ok. Are we still waiting on the change to make the red portion larger?

I'll default to you for final approval and merge

shawnborton · 2021-03-24T09:16:38Z

@parasharrajat let me know if you will be addressing the border issue mentioned above.

parasharrajat · 2021-03-24T09:34:11Z

Yes. I am working on it

parasharrajat · 2021-03-24T12:31:26Z

@shawnborton New border implementation.
borderWidth is 3 for both modes(GSD and Normal)

Web	Android

shawnborton · 2021-03-24T12:43:24Z

Tested and this looks great! I know you didn't introduce this, but one thing I think we could benefit from is to remove the right padding from the wrapper that wraps the avatar + name + preview:

Change that to:

That will give us a little bit of extra room for the message previews to show. Thoughts on that?

parasharrajat · 2021-03-24T14:09:36Z

Yeah I like that. Should I do this only for GSD mode layout?

Now I see one issue as well.

When we hover the row the background border on the multiple Avatars in not adopting the colour. I need to fix that as well.

shawnborton · 2021-03-24T14:21:16Z

Yeah I like that. Should I do this only for GSD mode layout?

I think for both modes is okay.

parasharrajat · 2021-03-24T16:53:32Z

@shawnborton Updated and Fixed the issue as well. Now working well.

BorderRadius

Hover Style (Notice the Border around the second avatar when we hover)

shawnborton · 2021-03-24T18:07:08Z

Cool, thanks for updating. I think you just need to update the screenshots in the original comment above too.

parasharrajat · 2021-03-24T19:39:54Z

Screenshots updated. @shawnborton I think it can be merged now. #2015 (comment)

shawnborton · 2021-03-24T19:42:00Z

@ctkochan22 all you!

OSBotify · 2021-03-26T00:49:59Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

marcaaron

Spotted a few things I think we should clean up here.

marcaaron · 2021-03-26T01:28:11Z

src/pages/home/sidebar/OptionRow.js

@@ -107,20 +128,27 @@ const OptionRow = ({
                                    <MultipleAvatars
                                        avatarImageURLs={option.icons}
                                        optionIsFocused={optionIsFocused}
+                                        size={mode === 'compact' ? 'small' : 'default'}
+                                        styles={hovered && !optionIsFocused && {
+                                            secondAvatar: {


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

src/components/MultipleAvatars.js

src/components/Avatar.js

marcaaron · 2021-03-26T01:34:18Z

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';


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.

marcaaron · 2021-03-26T01:35:18Z

src/components/MultipleAvatars.js

+    avatarImageURLs, optionIsFocused, size, styles,
+}) => {
+    const avatarContainerStyles = [
+        size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar,


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

src/components/MultipleAvatars.js

parasharrajat added 2 commits March 23, 2021 22:58

new: GSD Compact Mdde added

1aff844

new: Row height in GSD Mode

25df511

chg: adjusted the design of GSD LHN layout

d2b98b2

parasharrajat marked this pull request as ready for review March 23, 2021 19:04

parasharrajat requested a review from a team as a code owner March 23, 2021 19:04

botify requested review from ctkochan22 and removed request for a team March 23, 2021 19:04

ctkochan22 assigned ctkochan22 and parasharrajat and unassigned ctkochan22 Mar 23, 2021

ctkochan22 requested a review from shawnborton March 23, 2021 22:44

ctkochan22 previously approved these changes Mar 23, 2021

View reviewed changes

fix: outline for MultipleAvatars

4c0ec7e

parasharrajat dismissed ctkochan22’s stale review via 4c0ec7e March 24, 2021 12:31

parasharrajat added 2 commits March 24, 2021 21:56

chg: Update the option row styles.

fd2bdf2

fix: border styles for the MultipleAvatar on OptionRow Hover

b6a00ed

fix: take care of optionFocused state fro MultipleAvatars

22dc5e2

shawnborton approved these changes Mar 24, 2021

View reviewed changes

ctkochan22 approved these changes Mar 26, 2021

View reviewed changes

ctkochan22 merged commit d3421ad into Expensify:master Mar 26, 2021

marcaaron reviewed Mar 26, 2021

View reviewed changes

parasharrajat mentioned this pull request Mar 26, 2021

cleanup for GSD layout #2104

Merged

5 tasks

shawnborton mentioned this pull request Mar 29, 2021

Group creation - Not enough space between circle and edge #2123

Closed

isagoico mentioned this pull request Apr 6, 2021

Chat - Sent message is hidden for the Group Chat when we use the GSD mode #2235

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updated LHN layout in GSD Priority Mode #2015

Updated LHN layout in GSD Priority Mode #2015

parasharrajat commented Mar 23, 2021 •

edited

Loading

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

ctkochan22 commented Mar 23, 2021

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 •

edited

Loading

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 •

edited

Loading

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 •

edited

Loading

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021

shawnborton commented Mar 24, 2021

OSBotify commented Mar 26, 2021

marcaaron left a comment

marcaaron Mar 26, 2021

marcaaron Mar 26, 2021

marcaaron Mar 26, 2021

Updated LHN layout in GSD Priority Mode #2015

Updated LHN layout in GSD Priority Mode #2015

Conversation

parasharrajat commented Mar 23, 2021 • edited Loading

Fixed Issues

Tests

Tested On

Screenshots

Web

Mobile Web

Desktop

Android

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

parasharrajat commented Mar 23, 2021

shawnborton commented Mar 23, 2021

ctkochan22 commented Mar 23, 2021

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 • edited Loading

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 • edited Loading

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021 • edited Loading

BorderRadius

Hover Style (Notice the Border around the second avatar when we hover)

shawnborton commented Mar 24, 2021

parasharrajat commented Mar 24, 2021

shawnborton commented Mar 24, 2021

OSBotify commented Mar 26, 2021

marcaaron left a comment

Choose a reason for hiding this comment

marcaaron Mar 26, 2021

Choose a reason for hiding this comment

marcaaron Mar 26, 2021

Choose a reason for hiding this comment

marcaaron Mar 26, 2021

Choose a reason for hiding this comment

parasharrajat commented Mar 23, 2021 •

edited

Loading

parasharrajat commented Mar 24, 2021 •

edited

Loading

parasharrajat commented Mar 24, 2021 •

edited

Loading

parasharrajat commented Mar 24, 2021 •

edited

Loading