-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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.
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
fixes [6654] Clicking on user avatar (profile picture) in header doesn't open conversation details #6658
Conversation
Co-authored-by: Fedor Indutny <[email protected]>
Co-authored-by: ayumi-signal <[email protected]>
Co-authored-by: Fedor Indutny <[email protected]>
Brought this up with our designers. This would have to be conditionally applied when the conversation has a story to view. In that case the avatar is rendered with a ring around it and is clickable to view the user's story. |
Co-authored-by: Jamie Kyle <[email protected]>
Co-authored-by: Rashad Sookram <[email protected]>
Co-authored-by: ayumi-signal <[email protected]>
@bhaskarraksahb Thanks for submitting this pr! As a note the change also seems to alter the margins on the top avatar. It would be nice if the margins can be preserved, so the header's avatar can line up on the left with conversation avatars (group chat) or conversation text bubbles (direct chat). See screenshots below. |
Co-authored-by: Fedor Indutny <[email protected]>
Co-authored-by: ayumi-signal <[email protected]>
Co-authored-by: Fedor Indutny <[email protected]>
Co-authored-by: ayumi-signal <[email protected]>
Co-authored-by: Fedor Indutny <[email protected]>
Co-authored-by: Fedor Indutny <[email protected]>
Co-authored-by: ayumi-signal <[email protected]>
@ayumi-signal have updated the component please take a look thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks so much for making changes! It's looking better, and I also confirmed visually and functionally that it's working correctly. With a little refactor I think it can be merged. Please check the review comments.
@@ -242,7 +242,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> { | |||
storyViewMode: StoryViewModeType.User, | |||
}); | |||
} | |||
: undefined | |||
: this.getActionForType() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like this function would be called a duplicate time from renderHeader()
.
Also renderAvatar()
is only called from renderHeader()
.
What if we change renderAvatar()
to take the onClick
handler generated earlier?
It can look like this to indicate it's a fallback handler in case the stories handler isn't needed:
private renderAvatar(onClickFallback: undefined | (() => void)): ReactNode {
Then it will be simpler and we would not recreate the handler function.
@@ -679,7 +679,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> { | |||
); | |||
} | |||
|
|||
private renderHeader(): ReactNode { | |||
private getActionForType() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Combined with the change to renderAvatar()
, we would not need to recreate the onClick
handler.
In that case it's ok to revert this change and keep onClick
generation as part of renderHeader()
.
(As a side note, if hypothetically we wanted to keep this new onClick generator, it's maybe more clear to name it verbosely such as getHeaderOnClickHandler()
because "getActionForType" can be confusing in a complex component.)
|
||
return onClick; | ||
} | ||
private renderHeader(): ReactNode { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above, I think we can revert this change and keep onClick
generation as part of renderHeader()
. Then we can pass the onClick
to renderAvatar()
.
@@ -905,4 +908,4 @@ function OutgoingCallButtons({ | |||
default: | |||
throw missingCaseError(outgoingCallButtonStyle); | |||
} | |||
} | |||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The app's eslint style guide specifies trailing newlines. Can you revert this newline deletion?
Hi @ayumi-signal my bad, i should have thought of refactoring it a little bit before. Thanks Have updated the components please take a look. |
Thanks so much for your work on this! It looks great now. For now, we can leave this PR open. Later it will automatically be marked as merged when we push our internal merge commits to a public branch. |
This has been merged now. Nice work! |
First time contributor checklist:
Contributor checklist:
main
branchyarn ready
run passes successfully (more about tests here)Description
fixes 6654
Updated button tag to be before div tag so that avatar comes inside button.
change.mp4