search

status-im / status-desktop

Status Desktop client made in Nim & QML
https://status.app
Mozilla Public License 2.0
293 stars 78 forks source link

[UI - Wallet Stability] Create single Amount input component and use it all over the app #14710

Open noeliaSD opened 5 months ago

noeliaSD commented 5 months ago

Description

There are several Amount input components all over the app (currently we have around 7). Anaylse them and just create a unique generic component and use it everywhere.

noeliaSD commented 4 months ago

Please @caybro write the result of your analysis here and we can create a plan to address this technical debt later in the next milestone.

noeliaSD commented 3 months ago

Please @caybro write the result of your analysis here and we can create a plan to address this technical debt later in the next milestone.

Kindly reminder @caybro ;)

caybro commented 3 months ago

Overview of input controls

General and numeric

StatusQ: No. Name Inherits Uses/composes Notes
1 StatusBaseInput QML.Item QML.TextEdit has decorations, large composition, optionally multiline/scrollable
2 StatusInput QML.Item StatusBaseInput adds validators, error messages, etc
3 StatusAmountInput StatusInput --- allows just one decimal place, specific validator
status-desktop: No. Name Inherits Uses/composes Notes
1 StyledTextField QQ2.TextField --- single line, basic, styled control
2 Input QML.Item StyledTextField adds decorations, validators, etc.
3 AmountInput Input --- supports BigInt, DoubleValidator, more decorations
4 AmountInputWithCursor AmountInput --- grows/shrinks with typed text
5 CurrencyAmountInput QQ2.TextField --- basic styled control, optional builtin currency symbol, strict double validator

Special input controls

No. Name Inherits Uses/composes Notes
1 StatusPasswordInput QQ2.TextField --- styled text field with signing phrase decoration
2 StatusChatInput QML.Rectangle QQ2.TextArea THE hammer, swiss army knife, does it all
caybro commented 3 months ago

Please @caybro write the result of your analysis here and we can create a plan to address this technical debt later in the next milestone.

Kindly reminder @caybro ;)

See above for an overview; something to discuss during a meeting :)

noeliaSD commented 3 months ago

Overview of input controls

General and numeric

StatusQ:

No. Name Inherits Uses/composes Notes 1 StatusBaseInput QML.Item QML.TextEdit has decorations, large composition, optionally multiline/scrollable 2 StatusInput QML.Item StatusBaseInput adds validators, error messages, etc 3 StatusAmountInput StatusInput --- allows just one decimal place, specific validator status-desktop:

No. Name Inherits Uses/composes Notes 1 StyledTextField QQ2.TextField --- single line, basic, styled control 2 Input QML.Item StyledTextField adds decorations, validators, etc. 3 AmountInput Input --- supports BigInt, DoubleValidator, more decorations 4 AmountInputWithCursor AmountInput --- grows/shrinks with typed text 5 CurrencyAmountInput QQ2.TextField --- basic styled control, optional builtin currency symbol, strict double validator

Special input controls

No. Name Inherits Uses/composes Notes 1 StatusPasswordInput QQ2.TextField --- styled text field with signing phrase decoration 2 StatusChatInput QML.Rectangle QQ2.TextArea THE hammer, swiss army knife, does it all

Thank you!! We will discuss it and see what the next steps should be, yes!!