Commit Graph

5297 Commits

Author SHA1 Message Date
Alexandra Betouni 3c7b498e74 fix(Popups/StatusMenuItemDelegate) adding checks to avoid undefined errors 2022-09-21 18:20:06 +02:00
Khushboo Mehta 32e69e6a8e feat(StatusSmartIdenticon): Created a new StatusQ componnent to accomodate:
1. A StatusRoundedImage
2. StatusRoundIcon
3. LetterIdenticon

Fallback in case of an error in loading Image to the LetterIdenticon
2022-09-21 18:20:06 +02:00
Pascal Precht c1021977d6 fix(StatusModal): ensure `onEditButtonClicked` signal is emitted
Closes #454
2022-09-21 18:20:06 +02:00
Pascal Precht b85ccbfc23 fix(StatusModal): expose `header.editable` property
Fixes #452
2022-09-21 18:20:06 +02:00
Anastasiya S cec89ef605 chore(StatusChatInfoButton): add object name for pin counter for testing purposes 2022-09-21 18:20:06 +02:00
Anastasiya S ffc4598bc5 chore(StatusChatInfoButton): add object name for testing purposes 2022-09-21 18:20:06 +02:00
Pascal Precht 66a8b5c87e chore: cut 0.13.0 release 2022-09-21 18:20:06 +02:00
B.Melnik f6bbd95f13 chore(ForTests): Add ojectName's for modals 2022-09-21 18:20:06 +02:00
Khushboo Mehta 5ab7c91b44 feat(StatusFlatRoundButton): Update the StatusFlatRoundButton to take over button behaviour from StatusIconButton under ui/shared/status
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.
2022-09-21 18:20:06 +02:00
Pascal Precht d27e067e1d fix: use proper double checkmark icon 2022-09-21 18:20:06 +02:00
Pascal Precht 312800ccb9 fix(StatusBaseButton): introduce missing `highlighted` property 2022-09-21 18:20:06 +02:00
Pascal Precht 10a7718011 chore: cut 0.12.0 release 2022-09-21 18:20:06 +02:00
Pascal Precht 19ada77172 chore: ignore cache files 2022-09-21 18:20:06 +02:00
B.Melnik 3f9f3d5b15 feat: Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors 2022-09-21 18:20:06 +02:00
Pascal Precht e2c178ad43 feat(StatusQ.Controls): introduce StatusColorSelector component
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
2022-09-21 18:20:06 +02:00
Pascal Precht b194a1d869 feat(StatusQ.Controls): introduce `StatusAssetSelector` component
This is used for a more complex amount and asset selector component.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAssetSelector {
    assets: ListModel {
        ListElement {
            address: "0x1234"
            name: "Status Network Token"
            value: "20"
            symbol: "SNT"
            fiatBalance: "9992.01"
            fiatBalanceDisplay: "9992.01"
        }
        ListElement {
            address: "0x1234"
            name: "DAI Token"
            value: "20"
            symbol: "DAI"
            fiatBalance: "20"
            fiatBalanceDisplay: "20"
        }
    }
}
```

Closes #442
2022-09-21 18:20:06 +02:00
Pascal Precht 368ede5645 feat(StatusQ.Components): introduce `StatusAddress` component
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
2022-09-21 18:20:06 +02:00
Pascal Precht 9389ee256e feat(StatusQ.Controls): introduce `StatusAccountSelector` component
This commit moves the original `AccountSelector` into StatusQ and makes it
a `StatusAccountSelector`. The API has been preserved. The only difference is
that it's internally relying completely on `StatusQ.Core.Theme` and `StatusQ.Controls`
components instead.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAccountSelector {
    accounts: ListModel {
        ListElement {
            name: "Pascal"
            address: "0x1234567891011"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "1199.02"
        }
        ListElement {
            name: "Boris"
            address: "0x123"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Alexandra"
            address: "0x123"
            iconColor: "yellow"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Khushboo"
            address: "0x123"
            iconColor: "blue"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
    }
}
```

Closes #435
2022-09-21 18:20:06 +02:00
Pascal Precht 03c6da6e9f feat(StatusQ.Controls): introduce `StatusSelect`
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
2022-09-21 18:20:06 +02:00
Pascal Precht ec2aeffc55 feat(StatusQ.Popups): introduce `StatusMenuItemDelegate`
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 {
        ...
    }
}
2022-09-21 18:20:06 +02:00
B.Melnik a0d97fb464 feat(StatusModal): Add edit avatar button
Part of https://github.com/status-im/status-desktop/issues/3734
2022-09-21 18:20:06 +02:00
Pascal Precht a065abf01b chore: cut 0.11.1 release 2022-09-21 18:20:06 +02:00
Khushboo Mehta fb290392b4 fix(StatusChatInfoButton): StatusChatInfoButton takes up entire available width
fixes #432
2022-09-21 18:20:05 +02:00
Khushboo Mehta c86d1d63df fix: Sandbox doesn't build on Linux machines
fixes #423
2022-09-21 18:20:05 +02:00
Khushboo-dev-cpp 315f91d737 feature(StatusSelectableText): Added a selectable text component (#431)
Features:
1. Select text and copy it
2. Custom highlight on selection
3. Highlight on links
4. Support for multiline text
2022-09-21 18:20:05 +02:00
Pascal Precht 0ca798c891 chore: cut v0.11.0 release 2022-09-21 18:20:05 +02:00
B.Melnik f0004ffc4c fix(StatusSpellcheckingMenuItems): Exact menu items order 2022-09-21 18:20:05 +02:00
Pascal Precht a30cd474d9 fix(StatusSearchPopup): use correct theme color for search result text
This used `Theme.palette.black` before which doesn't work across differen themes.
`Theme.palette.directColor1` is the correct one to use here.
2022-09-21 18:20:05 +02:00
Pascal Precht 86c1f69723 fix(StatusChatList): ensure right click popup opens in correct position
This broke because the emitted `mouse` coordinates where no longer correct
after we've moved the chat list item into a delegate model.
2022-09-21 18:20:05 +02:00
Eric Mastro fd92ad5e28 feat: add star icons (#422) 2022-09-21 18:20:05 +02:00
Eric Mastro 567983b7d8 fix: track category opened state
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.
2022-09-21 18:20:05 +02:00
Pascal Precht 3bdc2a4c34 chore: cut 0.10.0 release 2022-09-21 18:20:05 +02:00
B.Melnik 79769c165e feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2022-09-21 18:20:05 +02:00
Pascal Precht 48bd006d05 feat(StatusChatList): expose `statusChatListItems` Repeater
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
2022-09-21 18:20:05 +02:00
Pascal Precht 581dd15f14 feat(StatusInput): add support for asynchronous validators
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
2022-09-21 18:20:05 +02:00
B.Melnik 540cd79618 feat(Spellchecking): Add dictionaries
Closes: #400
2022-09-21 18:20:05 +02:00
Pascal Precht 8e4b5e2c09 feat(StatusInput): introduce `leftPadding` and `rightPadding` properties 2022-09-21 18:20:04 +02:00
Pascal Precht ada657fab6 feat(StatusInput): introduce `reset` API
This can be used to reset text, error message and validity state of inputs
2022-09-21 18:20:04 +02:00
Alexandra Betouni 56212c547a fix(StatusChatListCategoryItem): Disable sensor when chevron clicked
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.
2022-09-21 18:20:04 +02:00
Alexandra Betouni 0c0d9bf919 fix(StatusChatInfoToolBar): Right anchored title in StatusChatInfoToolBar
So that elide mode in text can be activated
2022-09-21 18:20:04 +02:00
B.Melnik b9b4ecae21 feat(Spellchecker): Add Spellchecker class
Closes: #399
2022-09-21 18:20:04 +02:00
B.Melnik 556de60a8d feat(Spellchecking): Add huspell dependency
Closes: #397
2022-09-21 18:20:04 +02:00
Pascal Precht 2bb282bb2c fix(StatusQ.Controls.Validators): fix bug that addressOrEns validator isn't properly exposed in QML 2022-09-21 18:20:03 +02:00
Khushboo Mehta 45dd8147ad feat(StatusExpandableItem): Correct placement of expandable region in tertiary type 2022-09-21 18:20:03 +02:00
Pascal Precht 36b75b8beb chore: cut 0.9.0 release 2022-09-21 18:20:03 +02:00
Pascal Precht 74a88a70b3 feat(StatusBaseInput): introduce `component` property
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
2022-09-21 18:20:03 +02:00
Pascal Precht 1b5d407e93 fix(StatusCheckbox): give checkbox label proper theme color 2022-09-21 18:20:03 +02:00
Pascal Precht ff549d2822 feat(StatusQ.Controls.Validators): introduce `StatusAddressAndEnsValidator` 2022-09-21 18:20:03 +02:00
Pascal Precht f979011323 feat(StatusQ.Controls.Validators): introduce `StatusAddressValidator` 2022-09-21 18:20:03 +02:00
Pascal Precht af8d2036f3 feat(StatusInput): introduce `ValidationMode`
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).
2022-09-21 18:20:03 +02:00