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

Jump to bottom

fix: scaffold window insets [WPB-4683] #2218

Merged
merged 12 commits into from
Sep 15, 2023
Merged

fix: scaffold window insets [WPB-4683] #2218

merged 12 commits into from
Sep 15, 2023

Conversation

Garzas
Copy link
Contributor

@Garzas Garzas commented Sep 12, 2023 •
edited by github-actions bot
Loading

TaskWPB-4683 Adapt system UI to Window insets in Compose

PR Submission Checklist for internal contributors

  • The PR Title

    • conforms to the style of semantic commits messages¹ supported in Wire's Github Workflow²
    • contains a reference JIRA issue number like SQPIT-764
    • answers the question: If merged, this PR will: ... ³

  • The PR Description

    • is free of optional paragraphs and you have filled the relevant parts to the best of your ability

What's new in this PR?

Adapter our UI system to use WindowInsets https://developer.android.com/jetpack/compose/layouts/insets

Issues

  • The app's UI components, when setDecorFitsSystemWindows to false, occasionally overlap with system UI elements and the soft keyboard.

Causes (Optional)

  • The default Scaffold in Compose doesn't handle system UI insets and IME (Input Method Editor) paddings dynamically. This limitation causes UI components to overlap with system UI elements, leading to suboptimal user experiences, especially when the soft keyboard is active.

Solutions

  • Introduced the WireScaffold component, an enhanced scaffold tailored for dynamic handling of system UI insets and IME paddings.
    • System UI Insets Handling: WireScaffold applies system UI insets to elements such as topBar and bottomBar, preventing overlaps with status and navigation bars.
    • IME Padding Integration: Incorporated imePadding for the scaffold to adjust dynamically when the soft keyboard is visible.
    • Consistent Padding Behavior: Through Compose's Modifier system, WireScaffold ensures consistent padding behaviors across different UI components.
    • Flexibility: While providing built-in behaviors, WireScaffold still allows developers to fine-tune or override the settings, offering design flexibility.
    • removed also duplicated SnackBarStateHolder to use only one provided either in WireScaffold or in ConversationScreen

Developers are recommended to adopt the WireScaffold for relevant UI components and conduct extensive testing to confirm its effectiveness across devices and OS versions.

Dependencies (Optional)

If there are some other pull requests related to this one (e.g. new releases of frameworks), specify them here.

Needs releases with:

Testing

Test Coverage (Optional)

  • I have added automated test to this contribution

How to Test

Briefly describe how this change was tested and if applicable the exact steps taken to verify that it works as expected.

Notes (Optional)

Specify here any other facts that you think are important for this issue.

Attachments (Optional)

Attachments like images, videos, etc. (drag and drop in the text box)

PR Post Submission Checklist for internal contributors (Optional)

  • Wire's Github Workflow has automatically linked the PR to a JIRA issue

PR Post Merge Checklist for internal contributors

  • If any soft of configuration variable was introduced by this PR, it has been added to the relevant documents and the CI jobs have been updated.
References
  1. https://sparkbox.com/foundry/semantic_commit_messages
  2. https://github.com/wireapp/.github#usage
  3. E.g. feat(conversation-list): Sort conversations by most emojis in the title #SQPIT-764.

@Garzas Garzas self-assigned this Sep 12, 2023
@Garzas Garzas changed the title fix: scaffold paddings with adjust nothing option fix: scaffold paddings with adjust nothing option [WPB-1848] Sep 12, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Sep 12, 2023 •
edited
Loading

Test Results

607 tests  ±0   606 ✔️ ±0   5m 21s ⏱️ +27s
  86 suites ±0       1 💤 ±0 
  86 files   ±0       0 ❌ ±0 

Results for commit bf0cd7f. ± Comparison against base commit e991f26.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 701 succeeded.

The build produced the following APK's:

@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 742 succeeded.

The build produced the following APK's:

@Garzas Garzas changed the title fix: scaffold paddings with adjust nothing option [WPB-1848] fix: scaffold window insets [WPB-1848] Sep 13, 2023
@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 759 succeeded.

The build produced the following APK's:

@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 765 succeeded.

The build produced the following APK's:

@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 766 succeeded.

The build produced the following APK's:

@Garzas Garzas mentioned this pull request Sep 14, 2023
Merged
7 tasks
@Garzas Garzas requested review from saleniuk, alexandreferris and yamilmedina and removed request for saleniuk and alexandreferris September 14, 2023 10:09
@Garzas Garzas changed the title fix: scaffold window insets [WPB-1848] fix: scaffold window insets [WPB-4683] Sep 14, 2023
vitorhugods
vitorhugods approved these changes Sep 14, 2023
View reviewed changes
Copy link
Member

@vitorhugods vitorhugods left a comment

Choose a reason for hiding this comment

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

Code-wise, it looks good to me.

I can't run locally at the moment.

I'd just keep an eye on things regarding the automatic status bar padding. Maybe that's something we don't want when zooming into an image for example. Not sure how it behaves there now.

alexandreferris
alexandreferris reviewed Sep 14, 2023
View reviewed changes
Copy link
Contributor

@alexandreferris alexandreferris left a comment

Choose a reason for hiding this comment

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

Just a small question

app/src/main/kotlin/com/wire/android/ui/common/scaffold/WireScaffold.kt Outdated Show resolved Hide resolved
@AndroidBob
Copy link
Collaborator

Build 799 failed.

@github-actions
Copy link
Contributor

APKs built during tests are available here. Scroll down to Artifacts!

@AndroidBob
Copy link
Collaborator

Build 808 succeeded.

The build produced the following APK's:

@Garzas Garzas merged commit 4a846b9 into fix/message-composer-keyboard Sep 15, 2023
11 checks passed
@Garzas Garzas deleted the fix/ime-padding-in-scaffolds branch September 15, 2023 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@saleniuk saleniuk saleniuk approved these changes

@vitorhugods vitorhugods vitorhugods approved these changes

@yamilmedina yamilmedina Awaiting requested review from yamilmedina

@alexandreferris alexandreferris Awaiting requested review from alexandreferris

Assignees

@Garzas Garzas

Labels
size/XL
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@Garzas @AndroidBob @alexandreferris @vitorhugods @saleniuk