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.

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

Autocomplete components on mobile #1673

Conversation

joel-jeremy
Copy link
Contributor

@joel-jeremy joel-jeremy commented Sep 8, 2023

Reuse desktop's autocomplete components in mobile.

@trafico-bot trafico-bot bot added the 🚧 WIP label Sep 8, 2023
@netlify
Copy link

netlify bot commented Sep 8, 2023

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 58cfdf5
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/64ff6fc96da6ec000808e75b
😎 Deploy Preview https://deploy-preview-1673.demo.actualbudget.org/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2023

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
16 2.47 MB → 2.47 MB (+2.25 kB) +0.09%
Changeset
File Δ Size
src/components/autocomplete/AccountAutocomplete.js 📈 +710 B (+13.06%) 5.31 kB → 6 kB
src/components/transactions/MobileTransaction.js 📈 +6.25 kB (+12.86%) 48.61 kB → 54.86 kB
src/components/autocomplete/CategoryAutocomplete.tsx 📈 +830 B (+10.09%) 8.04 kB → 8.85 kB
src/components/autocomplete/PayeeAutocomplete.js 📈 +753 B (+4.96%) 14.84 kB → 15.58 kB
src/components/mobile/MobileForms.js 📈 +55 B (+1.89%) 2.85 kB → 2.9 kB
src/components/mobile/MobileAmountInput.js 📉 -21 B (-0.22%) 9.35 kB → 9.33 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/main.js 1.11 MB → 1.11 MB (+2.25 kB) +0.20%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/678.chunk.js 420.74 kB 0%
static/media/Inter-italic.var.woff2 239.29 kB 0%
static/media/Inter-roman.var.woff2 221.86 kB 0%
static/js/713.chunk.js 156.56 kB 0%
static/js/wide-components.chunk.js 125.51 kB 0%
static/js/231.chunk.js 117.37 kB 0%
static/js/narrow-components.chunk.js 34.13 kB 0%
static/js/reports.chunk.js 28.65 kB 0%
static/js/473.chunk.js 13 kB 0%
static/js/389.chunk.js 12.76 kB 0%
static/js/resize-observer-polyfill.chunk.js 8.88 kB 0%
static/css/main.css 7.41 kB 0%
asset-manifest.json 2.07 kB 0%
index.html 1.66 kB 0%
static/media/browser-server.js 903 B 0%

@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2023

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
2 2.22 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.23 MB 0%
xfo.xfo.kcab.worker.js 1014.46 kB 0%

@@ -151,7 +151,7 @@ class AmountInput extends PureComponent {
autoCapitalize="none"
onChange={e => this.onChangeText(e.target.value)}
onBlur={this.onBlur}
onKeyPress={this.onKeyPress}
onKeyUp={this.onKeyUp}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated since onKeyPress is now deprecated.

@joel-jeremy joel-jeremy changed the title [WIP] Autocomplete components on mobile Autocomplete components on mobile Sep 11, 2023
@joel-jeremy joel-jeremy force-pushed the autocomplete-components-on-mobile branch from 7f09f61 to 58cfdf5 Compare September 11, 2023 19:51
@MatissJanis
Copy link
Member

The biggest benefit of the old autocomplete was that it opened up full-screen. Whereas the new one has a very small scroll window. For mobile devices the full-screen view IMO is much better.

WDYT @trevdor ?

Screenshot 2023-09-16 at 13 31 32 Screenshot 2023-09-16 at 13 31 29

@trevdor
Copy link
Contributor

trevdor commented Sep 16, 2023

I agree. The mobile autocomplete should really be a “sheet” in the native sense of the word, not a simple drop down like on desktop.

I suspect we’d better develop the mobile one further to be even more different from desktop rather than unify them.

Apologies for not thinking of this sooner.

@trevdor
Copy link
Contributor

trevdor commented Sep 16, 2023

I suspect we’d better develop the mobile one further to be even more different from desktop rather than unify them.

I suppose this might be achievable in a unified component. But it could also prove too complicated trying to wrangle two very different designs in one.

(and fwiw, in my opinion the existing mobile autocomplete is pretty much the goal—already emulates a sheet, though maybe with some larger touch targets eventually.

@joel-jeremy
Copy link
Contributor Author

Sounds good! Just tried experimenting with it. Closing this PR. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants