[WIP] [Proof of Concept] Virtual calculator keyboard on mobile transaction edit page

[joel-jeremy]

POC for implementing a virtual keyboard on mobile which contains math operators (+, -, ×, ÷) to possibly support doing some calculations on the amount inputs (similar to how we can use math operators in desktop transactions page's amount fields).

Feedback or ideas are welcome!

#1556

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	ce26247
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/672aac381946f80008ec9039
😎 Deploy Preview	https://deploy-preview-3790.demo.actualbudget.org
📱 Preview on mobile	Toggle 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]

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
10	5.34 MB → 5.45 MB (+112.55 kB)	+2.06%

Changeset

File	Δ	Size
node_modules/react-simple-keyboard/build/index.js	🆕 +106.79 kB	0 B → 106.79 kB
src/components/util/AmountKeyboard.tsx	🆕 +2.75 kB	0 B → 2.75 kB
node_modules/react-simple-keyboard/build/index.js?commonjs-module	🆕 +26 B	0 B → 26 B
src/components/mobile/transactions/FocusableAmountInput.tsx	📈 +1.49 kB (+25.37%)	5.88 kB → 7.37 kB
home/runner/work/actual/actual/packages/loot-core/src/shared/arithmetic.ts	📈 +387 B (+15.94%)	2.37 kB → 2.75 kB
src/style/themes/development.ts	📈 +282 B (+3.57%)	7.72 kB → 8 kB
src/style/themes/dark.ts	📈 +282 B (+3.55%)	7.75 kB → 8.02 kB
src/style/themes/light.ts	📈 +282 B (+3.52%)	7.81 kB → 8.09 kB
src/style/themes/midnight.ts	📈 +266 B (+3.49%)	7.45 kB → 7.71 kB
package.json	📈 +38 B (+1.22%)	3.05 kB → 3.08 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/index.js	3.35 MB → 3.46 MB (+112.55 kB)	+3.28%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/workbox-window.prod.es5.js	5.69 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/usePreviewTransactions.js	1.64 kB	0%
static/js/AppliedFilters.js	21.3 kB	0%
static/js/narrow.js	82.57 kB	0%
static/js/wide.js	239.81 kB	0%
static/js/ReportRouter.js	1.5 MB	0%

[github-actions]

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
1	1.27 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.27 MB	0%

[deathblade666]

Not sure if you've checked but when trying to modify things on the budget page the keypad covers nearly the entire modal, it appears to still inout what's typed but you can't see it

[joel-jeremy]

Not sure if you've checked but when trying to modify things on the budget page the keypad covers nearly the entire modal, it appears to still inout what's typed but you can't see it

Nice catch! I haven't noticed that since I was working on this on the mobile transaction page. We'll need to figure out a way to render the keyboard out of the modal.

[youngcw]

I keep looking for an enter key. Could that get added somewhere?

[joel-jeremy]

I keep looking for an enter key. Could that get added somewhere?

Added an Enter key and a bunch more button. Some math operations should also now be supported within the mobile transaction edit page but there are still a few bugs here and there.

[Teprifer]

Hrm, using the enter key saves the transaction, which is a bit awkward since entering the number is the first thing done - means the transaction has to be re-edited to finish adding in the details.

Suggest having the enter key only exit the amount input box and closing the keyboard. Might feel better if it acted as a tab key, at least on transaction input anyway. Elsewhere as an exit box and don't focus another input would make more sense I think, but this behaviour could work on transactions too.

The space button should probably be removed because it only enters zeroes? There's already a zero key - am I missing something?
The comma and . don't make sense on the transaction input since it auto decimals already and we don't enter in thousands separators, rather the UI formats it for you. For the budget table, maybe? But not commenting there as it's obviously not working for that yet.