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 `StatusAddress` component which renders an address
and can be made `expandable` by applying a `width`:
```qml
import StatusQ.Components 0.1
// Simple case
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
}
// Expandable case
Item {
width: 200
height: childrenRect.height
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
expandable: true
width: parent.width
}
}
```
Closes#430
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
This extracts the `MenuItem` delegate used in `StatusPopupMenu` into its
own component so it can be easily reused for cases where simply supplying the
popup menu with `StatusMenuItem` (which is of type `Action`) isn't enough.
Ideally, the `StatusMenuItemDelegate` would be called `StatusMenuItem` but that
would be a breaking change.
Usage:
```qml
StatusPopupMenu {
delegate: StatusMenuItemDelegate {
...
}
}
Category `opened` state is tracked and restored on model change.
Previously, when the model data for categories and channels was changed, all unexpanded, or collapsed categories would automatically expand. This was due to the default state of the category `opened` property being restored (which was set to true) when the model data changed.
With this change in place, the opened state of each category is tracked in the parent component (`StatusChatListAndCategories`), and on each model change, the opened state is restored.
NOTE: it was tempting to the put the changes inside of the `StatusChatListCategory` component, however this would not work as the component is used as a delegate, and all state is wiped on each model change.
Ever since we've moved to `DelegateModel` which is passed to the `Repeater`
which was previously aliased as `chatListItems`, we no longer get access to the
`model.itemAt` method. This is because `DelegateModel` doesn't have such a method.
So in order to restore that access, we have to expose `Repeater` additionally.
The reason this method is needed, is so that apps like Status Desktop can update
individual chat list items based on `Connection` events
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
List items' mouse area was also triggered when chevron
(sub menu) button was clicked so it was unsetting the
opened variable which is responsible for opening/closing
the chats list.
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
