Commit Graph

301 Commits

Author SHA1 Message Date
Pascal Precht 6789446df3 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
2021-10-15 11:02:41 +02:00
Pascal Precht 5e15cc49f6 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
2021-10-15 11:02:28 +02:00
Pascal Precht 6e10959e40 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
2021-10-15 11:00:30 +02:00
Pascal Precht 0764e25a58 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 {
        ...
    }
}
2021-10-15 11:00:18 +02:00
B.Melnik 5043b0b625
feat(StatusModal): Add edit avatar button
Part of https://github.com/status-im/status-desktop/issues/3734
2021-10-15 10:49:40 +02:00
Pascal Precht 694a4ca1ec
chore: cut 0.11.1 release 2021-10-12 11:34:25 +02:00
Khushboo Mehta c276a90e73 fix(StatusChatInfoButton): StatusChatInfoButton takes up entire available width
fixes #432
2021-10-08 08:37:20 +02:00
Khushboo Mehta dce45c2ff3 fix: Sandbox doesn't build on Linux machines
fixes #423
2021-10-08 08:37:01 +02:00
Khushboo-dev-cpp d9da5bdc1d
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
2021-09-29 15:22:23 -04:00
Pascal Precht b6a6e220f7
chore: cut v0.11.0 release 2021-09-27 10:52:07 +02:00
B.Melnik 478177f25e fix(StatusSpellcheckingMenuItems): Exact menu items order 2021-09-27 10:48:18 +02:00
Pascal Precht 654bd9f284 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.
2021-09-27 10:48:02 +02:00
Pascal Precht a2e3659d99 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.
2021-09-27 10:47:38 +02:00
Eric Mastro 5c3267f7e6
feat: add star icons (#422) 2021-09-23 15:00:04 -04:00
Eric Mastro 0631d500e1 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.
2021-09-23 15:05:17 +02:00
Pascal Precht 8f8cb336c2
chore: cut 0.10.0 release 2021-09-20 08:53:01 +02:00
B.Melnik 3e24b71075 feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2021-09-20 08:52:06 +02:00
Pascal Precht 40c0e48b04 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
2021-09-20 08:51:55 +02:00
Pascal Precht 8820cd89be
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
2021-09-20 08:49:36 +02:00
B.Melnik 1d12d222f3 feat(Spellchecking): Add dictionaries
Closes: #400
2021-09-16 15:37:59 +02:00
Pascal Precht 13dc8ae3b6 feat(StatusInput): introduce `leftPadding` and `rightPadding` properties 2021-09-16 15:37:41 +02:00
Pascal Precht a2ad08e47e feat(StatusInput): introduce `reset` API
This can be used to reset text, error message and validity state of inputs
2021-09-16 15:34:42 +02:00
Alexandra Betouni c83641d2f0
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.
2021-09-16 15:33:12 +02:00
Alexandra Betouni 6e8a36be86
fix(StatusChatInfoToolBar): Right anchored title in StatusChatInfoToolBar
So that elide mode in text can be activated
2021-09-15 11:39:09 +02:00
B.Melnik c65f80d22e feat(Spellchecker): Add Spellchecker class
Closes: #399
2021-09-14 14:34:25 +02:00
B.Melnik f9457ef311 feat(Spellchecking): Add huspell dependency
Closes: #397
2021-09-14 14:33:53 +02:00
Pascal Precht 1374c1933f fix(StatusQ.Controls.Validators): fix bug that addressOrEns validator isn't properly exposed in QML 2021-09-14 14:33:34 +02:00
Khushboo Mehta 1f244f6282 feat(StatusExpandableItem): Correct placement of expandable region in tertiary type 2021-09-14 14:18:59 +02:00
Pascal Precht 80e5b338fd
chore: cut 0.9.0 release 2021-09-13 10:59:02 +02:00
Pascal Precht 019471c804 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
2021-09-13 09:56:24 +02:00
Pascal Precht 88fb57dd3b fix(StatusCheckbox): give checkbox label proper theme color 2021-09-13 09:55:54 +02:00
Pascal Precht a93ef16143 feat(StatusQ.Controls.Validators): introduce `StatusAddressAndEnsValidator` 2021-09-13 09:55:09 +02:00
Pascal Precht 77d0e9b8fd feat(StatusQ.Controls.Validators): introduce `StatusAddressValidator` 2021-09-13 09:55:09 +02:00
Pascal Precht d73a158418 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).
2021-09-13 09:55:09 +02:00
Pascal Precht 1a23cc1912 feat(StatusValidator): allow validators to provide default `errorMessage`
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" : ""
}
```
2021-09-13 09:55:09 +02:00
Pascal Precht 48309d3040
Revert "chore: replace profile icon (#312)"
This reverts commit aab59763e5.
2021-09-09 11:37:45 +02:00
Khushboo Mehta 718171fd7b feat(StatusExpandableItem): Refactored the StatusExpandableSettingsItem to support different types
Renamed StatusExpandableSettingsItem to StatusExpandableItem.
Added support for dofferent types of styles for the item.
Type Primary: Relates to Settings Design
Type Secondary: Relates to Collectibles Design
Type Tertiary: Relates to the Collectibles detailed view design

BREAKING CHANGE: Renamed and expanded features of the  StatusExpandableSettingsItem to StatusExpandableItem
2021-09-08 13:37:03 +02:00
Pascal Precht efe3116610 feat(StatusSearchPopup): introduce forceActiveFocus API
This is used to enforce focus on the search input when the popup
is opened. In fact users decide to override the search popup's
`onOpened` handler, they still get access to this API to make use of it.
2021-09-08 12:36:31 +02:00
Pascal Precht aab44c1e0d feat(Status.Core.Theme): add RobotoMono font
Closes #342
2021-09-08 11:28:07 +02:00
Pascal Precht eabc62f796 fix(StatusModal): don't reserve header subtitle space
Closes #378
2021-09-08 11:21:18 +02:00
Pascal Precht 2971c60737 fix(StatusChatListAndCategories): rely on correct tooltip settings prop
Category tooltip settings were broken in this component due to a mismatching
property name.

This commit fixes it.
2021-09-08 11:19:54 +02:00
B.Melnik 29e9557d5f fix(StatusAppThreePanelLayout): Fix margin between left and center panels
This margin shows because of `handle` width incuded in `SplitView` width. Handle have `Component` type and can't accessable for getting sizes. I add `magic constant` as hotfix.

Closes: #307
2021-09-08 11:19:36 +02:00
B.Melnik 89f54a85c8 refactor(StatusPopupMenu): Refactor bug with reopen menu 2021-09-08 11:18:16 +02:00
Alexandra Betouni 73c77c29c2
feat(StatusInput): exposed edit component
We need to be able to call forceActiveFocus, so
TextEdit component should be somehow accessible

Relates to desktop #3310
2021-09-06 16:51:47 +02:00
Pascal Precht 62e93ecffb
chore: release v0.8.0 2021-09-06 14:54:58 +02:00
Pascal Precht ddfca7a8fa feat(StatusBaseInput): introduce focussed property
We can't alias the property as `focus` because this is a final readonly
property, so we're introducing a `focussed` property instead.

Closes #373
2021-09-06 14:53:15 +02:00
B.Melnik 3187de5449 fix(StatusModal): Remove self-calculating height
Based on Qt docs `contentItem` must have `implicit` sizes.
link to rules: https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html#popup-sizing
2021-09-06 14:51:23 +02:00
Alexandra Betouni d648230d79 feat(StatusInput): Introduced secondaryLabel property
Due to design updates in AddAccount modal, updates are
needed in StatusBaseInput and StatusInput

* Added the possibility of having the icon on the right
  side
* Added secondaryLabel for title
* Added examples in StatusInputPage

Closes #383
2021-09-06 14:50:51 +02:00
Khushboo Mehta 38fb8f61a5 feat(qrc): Add new icon needed for share modal 2021-09-06 11:01:13 +02:00
Khushboo Mehta 8a94fb5412 feat(StatusModal): Add popup menu support for StatusModal
Added logic to support a popup menu to be launched from the StatusModal header.
Added an example in sandbox to demonstrate its usage.

fixes #374
2021-09-06 11:01:13 +02:00