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

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

joel-jeremy
Copy link
Contributor

@joel-jeremy joel-jeremy commented Nov 4, 2024

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

@actual-github-bot actual-github-bot bot changed the title [Proof of Concept] Virtual calculator keyboard on mobile transaction edit page [WIP] [Proof of Concept] Virtual calculator keyboard on mobile transaction edit page Nov 4, 2024
Copy link

netlify bot commented Nov 4, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit b9f062f
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/6740b0c49e5ca30008b21c6d
😎 Deploy Preview https://deploy-preview-3790.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.

Copy link
Contributor

github-actions bot commented Nov 4, 2024

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
9 → 10 5.43 MB → 5.45 MB (+29.28 kB) +0.53%
Changeset (largest 100 files by percent change)
File Δ Size
node_modules/react-simple-keyboard/build/index.js 🆕 +106.79 kB 0 B → 106.79 kB
src/components/mobile/transactions/Transaction.jsx 🆕 +6.14 kB 0 B → 6.14 kB
src/components/util/AmountKeyboard.tsx 🆕 +2.75 kB 0 B → 2.75 kB
node_modules/@react-stately/collections/dist/Item.mjs 🆕 +2.45 kB 0 B → 2.45 kB
node_modules/@react-stately/collections/dist/Section.mjs 🆕 +1.79 kB 0 B → 1.79 kB
src/components/mobile/transactions/ListBoxSection.jsx 🆕 +1.47 kB 0 B → 1.47 kB
src/components/mobile/transactions/ListBox.jsx 🆕 +1.13 kB 0 B → 1.13 kB
src/ResponsiveProvider.tsx 🆕 +991 B 0 B → 991 B
src/components/mobile/transactions/Option.jsx 🆕 +764 B 0 B → 764 B
src/hooks/useSchedules.ts 🆕 +88 B 0 B → 88 B
node_modules/react-simple-keyboard/build/index.js?commonjs-module 🆕 +26 B 0 B → 26 B
src/components/sidebar/Sidebar.tsx 📈 +3.28 kB (+119.01%) 2.76 kB → 6.04 kB
src/components/mobile/budget/CategoryTransactions.jsx 📈 +861 B (+29.43%) 2.86 kB → 3.7 kB
src/components/mobile/transactions/FocusableAmountInput.tsx 📈 +1.49 kB (+25.37%) 5.88 kB → 7.37 kB
src/components/settings/Experimental.tsx 📈 +706 B (+16.55%) 4.17 kB → 4.85 kB
home/runner/work/actual/actual/packages/loot-core/src/shared/arithmetic.ts 📈 +387 B (+15.94%) 2.37 kB → 2.75 kB
src/components/util/LoadComponent.tsx 📈 +223 B (+14.88%) 1.46 kB → 1.68 kB
src/hooks/usePreviewTransactions.ts 📈 +135 B (+8.76%) 1.5 kB → 1.64 kB
home/runner/work/actual/actual/packages/loot-core/src/client/data-hooks/filters.ts 📈 +45 B (+7.94%) 567 B → 612 B
src/hooks/useFeatureFlag.ts 📈 +23 B (+6.44%) 357 B → 380 B
src/components/mobile/accounts/AccountTransactions.tsx 📈 +397 B (+5.24%) 7.39 kB → 7.78 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
src/components/manager/ConfigServer.tsx 📈 +245 B (+3.34%) 7.16 kB → 7.4 kB
src/components/mobile/transactions/TransactionListWithBalances.jsx 📈 +177 B (+3.27%) 5.29 kB → 5.46 kB
src/components/App.tsx 📈 +159 B (+2.92%) 5.32 kB → 5.48 kB
node_modules/lodash/_WeakMap.js 📈 +4 B (+2.15%) 186 B → 190 B
src/components/mobile/transactions/TransactionList.jsx 📈 +307 B (+1.93%) 15.5 kB → 15.8 kB
node_modules/lodash/isSymbol.js 📈 +12 B (+1.82%) 661 B → 673 B
package.json 📈 +38 B (+1.22%) 3.05 kB → 3.08 kB
node_modules/@react-aria/button/dist/useButton.mjs 📈 +33 B (+1.06%) 3.03 kB → 3.06 kB
node_modules/lodash/_objectToString.js 📈 +4 B (+0.70%) 574 B → 578 B
home/runner/work/actual/actual/packages/loot-core/src/client/queries.ts 📈 +23 B (+0.31%) 7.27 kB → 7.3 kB
src/components/accounts/Balance.jsx 📈 +7 B (+0.13%) 5.42 kB → 5.43 kB
node_modules/react-i18next/dist/es/useTranslation.js 📈 +4 B (+0.09%) 4.22 kB → 4.23 kB
src/components/budget/SidebarGroup.tsx 📈 +6 B (+0.09%) 6.39 kB → 6.4 kB
src/components/rules/RuleRow.tsx 📉 -3 B (-0.04%) 6.86 kB → 6.86 kB
src/components/modals/AccountMenuModal.tsx 📉 -3 B (-0.05%) 6.23 kB → 6.23 kB
src/components/reports/reports/CustomReportListCards.tsx 📉 -3 B (-0.07%) 4.38 kB → 4.38 kB
src/components/reports/reports/GetCardData.tsx 📉 -3 B (-0.07%) 4.2 kB → 4.19 kB
src/components/Notifications.tsx 📉 -5 B (-0.07%) 6.94 kB → 6.94 kB
src/components/reports/reports/NetWorth.tsx 📉 -6 B (-0.09%) 6.18 kB → 6.18 kB
home/runner/work/actual/actual/packages/loot-core/src/shared/months.ts 📉 -8 B (-0.10%) 7.86 kB → 7.85 kB
src/components/util/AmountInput.tsx 📉 -5 B (-0.12%) 3.93 kB → 3.93 kB
src/components/reports/SaveReportName.tsx 📉 -3 B (-0.13%) 2.25 kB → 2.25 kB
src/components/reports/CategorySelector.tsx 📉 -12 B (-0.14%) 8.38 kB → 8.37 kB
src/components/sidebar/PrimaryButtons.tsx 📉 -3 B (-0.15%) 1.98 kB → 1.98 kB
src/components/common/Modal.tsx 📉 -15 B (-0.15%) 9.54 kB → 9.53 kB
src/components/PrivacyFilter.tsx 📉 -6 B (-0.18%) 3.27 kB → 3.26 kB
src/components/modals/CategoryMenuModal.tsx 📉 -10 B (-0.18%) 5.37 kB → 5.36 kB
src/components/modals/EnvelopeBudgetMenuModal.tsx 📉 -5 B (-0.18%) 2.68 kB → 2.67 kB
src/components/modals/TrackingBudgetMenuModal.tsx 📉 -5 B (-0.18%) 2.68 kB → 2.67 kB
src/components/Titlebar.tsx 📉 -15 B (-0.18%) 8.02 kB → 8.01 kB
src/components/modals/EnvelopeBalanceMenuModal.tsx 📉 -5 B (-0.19%) 2.56 kB → 2.56 kB
src/components/modals/TrackingBalanceMenuModal.tsx 📉 -5 B (-0.20%) 2.5 kB → 2.5 kB
src/components/Notes.tsx 📉 -5 B (-0.20%) 2.49 kB → 2.49 kB
src/components/reports/ReportSidebar.tsx 📉 -39 B (-0.22%) 17.6 kB → 17.56 kB
src/components/schedules/ScheduleDetails.jsx 📉 -72 B (-0.23%) 30.45 kB → 30.38 kB
src/components/NotesButton.tsx 📉 -5 B (-0.24%) 2.07 kB → 2.07 kB
src/components/modals/CategoryGroupMenuModal.tsx 📉 -15 B (-0.24%) 6.2 kB → 6.18 kB
src/components/modals/GoCardlessExternalMsgModal.tsx 📉 -24 B (-0.24%) 9.89 kB → 9.87 kB
src/components/rules/ActionExpression.tsx 📉 -10 B (-0.24%) 4.02 kB → 4.01 kB
src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx 📉 -75 B (-0.24%) 30.12 kB → 30.05 kB
src/components/modals/PayeeAutocompleteModal.tsx 📉 -5 B (-0.28%) 1.72 kB → 1.72 kB
src/components/Modals.tsx 📉 -49 B (-0.31%) 15.43 kB → 15.39 kB
src/components/modals/MergeUnusedPayeesModal.jsx 📉 -20 B (-0.31%) 6.3 kB → 6.28 kB
src/components/schedules/SchedulesTable.tsx 📉 -39 B (-0.32%) 11.81 kB → 11.78 kB
src/components/select/RecurringSchedulePicker.tsx 📉 -55 B (-0.33%) 16.29 kB → 16.24 kB
src/components/rules/Value.tsx 📉 -17 B (-0.35%) 4.79 kB → 4.77 kB
src/components/mobile/transactions/TransactionEdit.jsx 📉 -126 B (-0.36%) 34.28 kB → 34.16 kB
home/runner/work/actual/actual/packages/loot-core/src/client/actions/account.ts 📉 -23 B (-0.38%) 5.86 kB → 5.83 kB
src/components/modals/EditFieldModal.jsx 📉 -30 B (-0.39%) 7.61 kB → 7.58 kB
src/components/settings/Themes.tsx 📉 -10 B (-0.42%) 2.32 kB → 2.31 kB
src/components/modals/CategoryAutocompleteModal.tsx 📉 -10 B (-0.44%) 2.23 kB → 2.22 kB
src/components/accounts/Account.tsx 📉 -213 B (-0.47%) 44.53 kB → 44.32 kB
src/components/reports/ReportTopbar.tsx 📉 -27 B (-0.47%) 5.58 kB → 5.56 kB
src/components/settings/BudgetTypeSettings.tsx 📉 -10 B (-0.49%) 1.98 kB → 1.97 kB
node_modules/lodash/_baseGetTag.js 📉 -4 B (-0.52%) 767 B → 763 B
src/components/transactions/SimpleTransactionsTable.jsx 📉 -35 B (-0.54%) 6.35 kB → 6.31 kB
src/components/settings/UI.tsx 📉 -10 B (-0.54%) 1.81 kB → 1.8 kB
src/components/modals/SelectLinkedAccountsModal.jsx 📉 -45 B (-0.61%) 7.19 kB → 7.14 kB
node_modules/lodash.debounce/index.js 📉 -68 B (-0.62%) 10.73 kB → 10.66 kB
src/components/settings/Format.tsx 📉 -30 B (-0.64%) 4.55 kB → 4.52 kB
src/components/modals/CloseAccountModal.tsx 📉 -64 B (-0.66%) 9.41 kB → 9.35 kB
src/components/mobile/accounts/Accounts.jsx 📉 -49 B (-0.67%) 7.19 kB → 7.15 kB
src/components/mobile/MobileBackButton.tsx 📉 -5 B (-0.68%) 730 B → 725 B
src/components/modals/BudgetListModal.tsx 📉 -10 B (-0.69%) 1.42 kB → 1.41 kB
src/components/settings/index.tsx 📉 -44 B (-0.70%) 6.13 kB → 6.09 kB
src/components/modals/EditRuleModal.jsx 📉 -288 B (-0.71%) 39.65 kB → 39.37 kB
src/components/settings/FixSplits.tsx 📉 -25 B (-0.77%) 3.17 kB → 3.15 kB
node_modules/lodash/now.js 📉 -4 B (-0.79%) 509 B → 505 B
src/components/modals/CreateEncryptionKeyModal.tsx 📉 -70 B (-0.81%) 8.44 kB → 8.37 kB
src/components/mobile/budget/BudgetTable.jsx 📉 -466 B (-0.85%) 53.8 kB → 53.35 kB
src/components/modals/GoCardlessInitialiseModal.tsx 📉 -35 B (-0.88%) 3.91 kB → 3.87 kB
src/components/settings/Export.tsx 📉 -20 B (-0.89%) 2.2 kB → 2.18 kB
node_modules/lodash/debounce.js 📉 -56 B (-0.91%) 6 kB → 5.95 kB
src/components/modals/ConfirmCategoryDeleteModal.tsx 📉 -45 B (-0.92%) 4.79 kB → 4.74 kB
src/components/modals/FixEncryptionKeyModal.tsx 📉 -55 B (-0.93%) 5.8 kB → 5.75 kB
View detailed bundle breakdown

Added

Asset File Size % Changed
static/js/usePreviewTransactions.js 0 B → 1.64 kB (+1.64 kB) -

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 3.44 MB → 3.46 MB (+17.19 kB) +0.49%
static/js/ReportRouter.js 1.49 MB → 1.5 MB (+13.56 kB) +0.89%

Smaller

Asset File Size % Changed
static/js/wide.js 242.81 kB → 239.81 kB (-2.99 kB) -1.23%
static/js/narrow.js 82.68 kB → 82.57 kB (-118 B) -0.14%

Unchanged

Asset File Size % Changed
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/workbox-window.prod.es5.js 5.69 kB 0%
static/js/AppliedFilters.js 21.3 kB 0%

Copy link
Contributor

github-actions bot commented Nov 4, 2024

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.32 MB → 1.27 MB (-48.43 kB) -3.59%
Changeset
File Δ Size
packages/loot-core/src/server/budget/goaltemplates.ts 📈 +111 B (+1.43%) 7.6 kB → 7.71 kB
packages/loot-core/src/server/sheet.ts 📈 +2 B (+0.03%) 6.71 kB → 6.72 kB
packages/loot-core/src/shared/months.ts 📉 -6 B (-0.05%) 11.71 kB → 11.71 kB
packages/loot-core/src/server/main.ts 📉 -234 B (-0.36%) 62.7 kB → 62.47 kB
packages/loot-core/src/server/budget/categoryTemplate.ts 📉 -165 B (-0.93%) 17.36 kB → 17.2 kB
packages/loot-core/src/shared/rules.ts 📉 -128 B (-1.29%) 9.69 kB → 9.57 kB
packages/loot-core/src/server/accounts/transaction-rules.ts 📉 -464 B (-1.53%) 29.55 kB → 29.09 kB
packages/loot-core/src/server/api.ts 📉 -942 B (-4.37%) 21.04 kB → 20.13 kB
packages/loot-core/src/shared/errors.ts 📉 -220 B (-5.29%) 4.06 kB → 3.84 kB
packages/loot-core/src/shared/query.ts 📉 -292 B (-7.50%) 3.8 kB → 3.51 kB
packages/loot-core/src/server/server-config.ts 📉 -154 B (-13.52%) 1.11 kB → 985 B
node_modules/i18next/dist/esm/i18next.js 🔥 -86.8 kB (-100%) 86.8 kB → 0 B
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset File Size % Changed
kcab.worker.js 1.32 MB → 1.27 MB (-48.43 kB) -3.59%

Unchanged

No assets were unchanged

@deathblade666
Copy link
Contributor

deathblade666 commented Nov 4, 2024

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
Copy link
Contributor Author

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
Copy link
Member

youngcw commented Nov 5, 2024

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

@joel-jeremy
Copy link
Contributor Author

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
Copy link

Teprifer commented Nov 6, 2024

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.

Copy link
Contributor

👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.

@github-actions github-actions bot added the Stale label Nov 14, 2024
Copy link
Contributor

This PR was closed because it has been stalled for 5 days with no activity.

@tatsumain
Copy link

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.

not sure if we are talking about the same thing, but it doesn't do auto decimals for number after the operator?

also this might be a personal preference but i don't like the layout that much. i mean, all the calculator / number inputs i've used have had the numbers on the left side and operators etc on the right / on top

Copy link
Contributor

github-actions bot commented Dec 1, 2024

👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.

@github-actions github-actions bot added the Stale label Dec 1, 2024
@joel-jeremy joel-jeremy removed the Stale label Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants