* feat: Add emoji support
1. StatusChatListItem (only updated parts already done by Jo)
2. StatusListItem
3. StatusInput
* feat(StatusColorSelectorGrid): Added new widget for color selection as needed in wallet
* fix(StatusInput): on reset, valid should be set to true else error mode is shown even though the user hasnt entered a value
* fix(StatusLetterIdenticon): Removed the clicked event out from the LetterIdenticon and added it to the StatusBaseInput as other places that use the letterIdenticon dont need the mouse area is not needed
It creates `StatusPinInput` control that allows customzing its circle diameter, circle spacing and pin length. It contains a `TextInput` object that will provide the component, input text management like validation rules.
It incorporates a blinking animation when the control is focused and feedback (mouse shape changed) when hovering it.
It adds new page in sandbox to play with `StatusPinInput` control.
It adds component documentation.
Also it creates 2 new `StatusValidator` controls with their corresponding documentation:
- `StatusRegularExpressionValidator` which wraps a QML type `RegularExpressionValidator`.
- `StatusIntValidator` which wraps a QML type `IntValidator`.
Closes#524
Created new control `StatusIdenticonRing` and used in `StatusSmartIdenticon` component.
Added property assignments in sandbox models to display the `StatusIdenticonRing` when needed.
Added first documentation approach for `StatusIdenticonRing` and `StatusIdenticonRingSettings`.
Closes#517
Create a password strength indicator component with the corresponding variation.
Create a base StatusProgressBar component.
Add new miscColor12.
Closes#528
* feat(sandbox/controls): Added StatusBanner component in controls view
In order to test StatusBanner.qml ui component it has been added into the Sandbox app as another Control.
* chore(sandbox/controls): Refactor `StatusBanner' component
Create enum to allow selecting StatusBanner type (`Info`, `Danger`, `Success`, `Warning`).
Add new success color with some opacity in ThemePalette.
* chore(Controls/StatusBanner): Use states instead of function
To have a cleaner code, it has been added states to manage type property changes.
* chore(Controls/StatusBanner): Remove unnecessary stuff
Remove unnecessary name property.
Remove successColor3 property.
Also added error handling in case in case that crypto symbol image is not available
Added a way to display the balance in currently selected currency on the widget
To do this the consumer of this widget needs to implement "getCurrencyBalanceString" based on the currently selected currency
fixes#4079
Made slider background and handle to not depend
to root's height so that it covers cases where a
legend is needed thus all should be clickable for
better user experience.
Relates to status-im/status-desktop#3984
There's two ways to signal that a validator emits invalidity on a control:
1. Its `validate()` method returns `false`
2. Its `validate()` method returns an object
Option 2) allows validators to supply the `errors` object with additional data.
Due to latest changes to `errorMessage` handling in validators, those messages
would not be rendered anymore if a validator returns simply `false` instead of an object.
The reason for that is because the code assumed that only option 2) is gonna happen.
This commit ensures that error messages a displayed in both options.
1. Added icon disabledColor property under StatusIconSettings
2. Added Tertiary and Quaternary type to accomodate hovered behavior needed in many buttons
3. Added a missing gif icon.
This is a select component to pick from various supplied colors.
Usage:
```qml
import StatusQ.Controls 0.1
StatusColorSelector {
model: ["red", "blue", "green"]
}
```
Closes#444
This introduces a new `StatusSelect` component which is a select form control.
The `model` property can be used to apply a `ListModel` for dynamic data.
To give users full control over what the menu items look like, `StatusSelect`
exposes a `selectMenu.delegate` property.
Most of the time this should be a `StatusMenuItemDelegate` to get access to the
comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action`
type).
`StatusMenuItemDelegate` derives most of its behaviour by its applied `action`,
so the easiest way to construct a dynamic select with StatusQ menu item look and feel
is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below.
Further more, because `StatusSelect` can't know what the `delegate` is going to look like
it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API,
the `selectedItemComponent` which can be any component. This component can then be accessed
by menu item actions to set corresponding properties.
Usage:
```qml
import StatusQ.Controls 0.1
StatusSelect {
label: "Some label"
model: ListModel {
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name
}
}
}
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent
property string text: ""
StatusBaseText {
text: selectedItem.text
anchors.centerIn: parent
color: Theme.palette.directColor1
}
}
}
```
Closes#436
Allows asynchronous validation, with the ability to track the validated value for use in the StatusInput as a value that is separate from the entered text.
Async operations are debounced internally to the StatusAsyncValidator.
- `validate`: the input value to this function is the value sent to `asyncComplete`, which must be called by the validator. Return true when the value from the async operation is valid.
- `asyncComplete`: signal to be called by the validator after the async operation has completed. It should contain the value returned by the async operation that should be validated in `validate`.
- `validatedValue`: This is the valid value returned from the async operation. It it tracked separately so that the input text on the `StatusInput` can remain as entered by the user. Use this property and the `onValidatedValueChanged` signal handler for the “real” value to be used by other components.
Closes#395
This property enables users to load any component into the input field.
This is useful for rendering a "clearable" icon button, simple icons or
even more complex buttons.
Usage:
```qml
StatusBaseInput {
...
component: StatusIcon {
name: "cancel"
color: Theme.palette.dangerColor1
width: 16
}
}
```
The `clearable` property of `StatusBaseInput` also renders and icon button
on the right hand side. With this new feature, `clearable` is just a short-hand
for:
```qml
StatusBaseInput {
...
component: StatusFlatRoundButton {
visible: edit.text.length != 0 &&
statusBaseInput.clearable &&
!statusBaseInput.multiline &&
edit.activeFocus
type: StatusFlatRoundButton.Type.Secondary
width: 24
height: 24
icon.name: "clear"
icon.width: 16
icon.height: 16
icon.color: Theme.palette.baseColor1
onClicked: {
edit.clear()
}
}
}
```
Closes#380
This allows users to configure how validation is run. There are two modes:
1. `ValidationMode.OnlyWhenDirty`
2. `ValidationMode.Always`
By default, validation happens when the inputs value changes, or on
initial `Component.onCompleted` event. The first mode allows for not
performing validation when the input field is blank and validation.
isn't necessary (yet).
Validators can now define a default `errorMessage` like so:
```qml
StatusValidator {
...
errorMessage: "..."
}
```
Because there's no access to runtime validation errors, `errorMessage` have to
be static. However, if applications wish to provide their own `errorMessage`
they can still override it and make it dynamic:
```qml
SomeValidator {
...
errorMessage: input.errors.someValidator ? "Whoopsie" : ""
}
```
