Skip to content

Resolved the Composer text vertical alignment #10394

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

Closed
liyamahendra wants to merge 10 commits into from
Closed

Resolved the Composer text vertical alignment #10394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
45ced1e
Resolved the Composer text vertical alignment
liyamahendra Aug 16, 2022
c9b3f81
Merge branch 'Expensify:main' into 10202
liyamahendra Aug 22, 2022
4cba454
Resolved the alignment issue found on Android
liyamahendra Aug 23, 2022
0ad4afb
Merge branch '10202' of https://github.com/liyamahendra/Expensify int…
liyamahendra Aug 23, 2022
d07cd6a
resolved lint error
liyamahendra Aug 25, 2022
2a9b216
Merge branch 'Expensify:main' into 10202
liyamahendra Aug 25, 2022
5ed5e48
Merge branch 'Expensify:main' into 10202
liyamahendra Sep 3, 2022
3678d76
Resolved the composer border issue on Android
liyamahendra Sep 10, 2022
c3d9ac1
Resolved conflicts
liyamahendra Oct 5, 2022
5525709
Merge branch 'Expensify:main' into 10202
liyamahendra Oct 26, 2022
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
3 changes: 2 additions & 1 deletion src/pages/home/report/ReportActionCompose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,7 +644,8 @@ class ReportActionCompose extends React.Component {
displayFileInModal(file);
this.setState({isDraggingOver: false});
}}
style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.inputComposerPadding]}
defaultValue={this.props.comment}

@Santhosh-Sellavel Santhosh-Sellavel Oct 31, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Why this?

@liyamahendra liyamahendra Nov 1, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Apart from flex4, I had to add more styling and so styles.inputComposerPadding

@Santhosh-Sellavel Santhosh-Sellavel Nov 1, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I'm asking about why defaultValue prop was added here?

maxLines={this.state.maxLines}
onFocus={() => this.setIsFocused(true)}
onBlur={() => this.setIsFocused(false)}
Expand Down
8 changes: 7 additions & 1 deletion src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1417,11 +1417,17 @@ const styles = {
},

textInputComposeSpacing: {
paddingVertical: 6,
paddingVertical: 1,
Comment thread
liyamahendra marked this conversation as resolved.
alignSelf: 'center',
Comment on lines -1420 to +1421

@Santhosh-Sellavel Santhosh-Sellavel Sep 12, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Again adding paddingVertical with alignSelf: 'center'?

Are we sure it won't break anything on other platforms?

@Santhosh-Sellavel Santhosh-Sellavel Sep 12, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I think we could move code to StyleUtils and define platform-specific styles.

cc: @Julesssss What do you think?

@liyamahendra liyamahendra Sep 13, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Are we sure it won't break anything on other platforms?

Yes, I did test out on other platforms!

@Julesssss Julesssss Sep 13, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think we could move code to StyleUtils and define platform-specific styles.

Depends on whether the styling works for all platforms or not... Would prefer to have a single consistent style, if possible

...flex.flexRow,
flex: 1,
},

inputComposerPadding: {
flex: 4,
paddingVertical: 4,
},

chatItemSubmitButton: {
alignSelf: 'flex-end',
borderRadius: 6,
Expand Down