-
Notifications
You must be signed in to change notification settings - Fork 312
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: fix reply border style #2197
Conversation
borderRightWidth: 0, | ||
}, | ||
}), | ||
borderRightWidth: 0, |
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.
If its 0, if there a need to have this property in the styles anymore?
borderLeftWidth: 0, | ||
}, | ||
}), | ||
borderLeftWidth: 0, |
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.
If its 0, if there a need to have this property in the styles anymore?
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.
Yes, the current structure first passes styles.messageRepliesCurve
with a borderWidth: 1
. Then, we remove the opposite side border within each rightMessageRepliesCurve
or leftMessageRepliesCurve
. I've attached an image if we just remove that line.
![Screenshot 2023-09-03 at 14 38 34](https://private-user-images.githubusercontent.com/45667737/265267837-8b59c17b-2bbd-40e4-ab9e-7d2c903f7415.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5NjM4NTEsIm5iZiI6MTcxODk2MzU1MSwicGF0aCI6Ii80NTY2NzczNy8yNjUyNjc4MzctOGI1OWMxN2ItMmJiZC00MGU0LWFiOWUtN2QyYzkwM2Y3NDE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIxVDA5NTIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc0NmQ5ODk2OTgyZjNmZTU4MDFiNTY4NGQwNzE2Y2RiM2ZkMTg1MTk5NGVmYTg5YzQwNWRlMmI0YjIyYWZhMTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.JrgOcpCiAarLpsY4RpcBaHO5ijhMHcvw7MDv-UhlVMY)
However, if this is not ideal, we could remove the borderWidth: 1
from the styles.messageRepliesCurve
and replace it with borderWithBottom: 1
and then have a left or right borderWidth with each replies curve. This should give the same impact.
Hey @aharwood9, thanks for fixing this and providing your valuable contributions. 馃檶馃徎 |
@khushal87 - sorry one additional comment. Should there be a horizontal margin or not between the curves and the avatars? See the below images. Without margin - ![]() Currently this PR has margin |
Hey @aharwood9, good point. According to the design, there should not be a margin. Can you add the fix? Thanks 馃槃 |
Done 馃憤 if you are happy with my reply to your comment about |
馃帀 This PR is included in version 5.18.0 馃帀 The release is available on: Your semantic-release bot 馃摝馃殌 |
馃幆 Goal
Fix #1982 and the curve wasn't showing on Android at all (hard to tell due to
MessageRepliesAvatars
sitting over it)馃洜 Implementation details
flexDirection: row
to the message-replies container馃帹 UI Changes
iOS
Before -
![Simulator Screenshot - iPhone 14 Plus - 2023-07-24 at 18 14 24](https://private-user-images.githubusercontent.com/45667737/255670720-f591f7eb-be25-4263-b9e0-17429150c0b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5NjM4NTEsIm5iZiI6MTcxODk2MzU1MSwicGF0aCI6Ii80NTY2NzczNy8yNTU2NzA3MjAtZjU5MWY3ZWItYmUyNS00MjYzLWI5ZTAtMTc0MjkxNTBjMGIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIxVDA5NTIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmZDgzN2U3NGE1MjBjYWIxNTc4YzJmNDhhM2QwZGQ2MDE0OGI1NmMzOWE5YWQwN2JmODJmMDJjYTJlMTViMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.A4QyegNeffb5g2dNbVdvqhqleOK0PgpD-lKsFHlXWkg)
![Simulator Screenshot - iPhone 14 Plus - 2023-07-24 at 18 14 18](https://private-user-images.githubusercontent.com/45667737/255670736-0873539a-f1ac-494b-8c67-0d96fedee11a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5NjM4NTEsIm5iZiI6MTcxODk2MzU1MSwicGF0aCI6Ii80NTY2NzczNy8yNTU2NzA3MzYtMDg3MzUzOWEtZjFhYy00OTRiLThjNjctMGQ5NmZlZGVlMTFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIxVDA5NTIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYzYTZjOWRhNDc0MzIxZmNlNWY5NjM2ZGM3Y2UxZDU4NTk3M2Y2OGU0ZTAxNWNkMzlkNjk2ZWU2YTIwODAwMWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.GhHYWHikTHN9UO7h-n40WqtyDq5dnPLiBtQ9vtYODVk)
After -
Android
Before -
After -
馃И Testing
鈽戯笍 Checklist
develop
branch