Commit Graph

118 Commits

Author SHA1 Message Date
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
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
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
B.Melnik 3e24b71075 feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2021-09-20 08:52:06 +02:00
B.Melnik 1d12d222f3 feat(Spellchecking): Add dictionaries
Closes: #400
2021-09-16 15:37:59 +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 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 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
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 eabc62f796 fix(StatusModal): don't reserve header subtitle space
Closes #378
2021-09-08 11:21:18 +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 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
Khushboo Mehta f3ab4ce9c9
feat(StatusExpandableSettingsItem): Added new component for wallet settings
Also added a page in the sandbox to demonstrate its usage.
2021-09-03 10:55:27 +02:00
Pascal Precht d449f0e903
feat(StatusQ.Controls): introduce StatusSwitchTabBar and StatusSwitchTabButton
This commit adds two new components to the StatusQ.Controls module:

- StatusSwitchTabBar
- StatusSwitchTabButton

Usage:

```qml
StatusSwitchTabBar {

    StatusSwitchTabButton {
        text: "Tab 1"
    }

    StatusSwitchTabButton {
        text: "Tab 2"
    }

    StatusSwitchTabButton {
        text: "Tab 3"
    }
}
```

Closes #365
2021-09-03 10:45:45 +02:00
B.Melnik 4a6800ed77
refactor(StatusModal): Remove custom content property
BREAKING CHANGES:
- `content` property removed
- `Loader` inside StatusModal removed
- default `contentItem` property should be used now

Closes: #306
2021-09-02 11:06:32 +02:00
Pascal Precht 0a4d3860ea feat: introduce bigger versions of navbar icons
Turns out the icons used in the navigation bar of the application actually
are designed to be bigger than the usual icons.

We can't just use the original source and scale them up in QML because that
will impact the stroke width of the SVGs as well, hence we need to introduce
a special set of icons that are design bigger but presever the feature ratios.
2021-08-31 13:48:28 +02:00
Pascal Precht a963ef80c8 feat(StatusDescriptionListItem): introduce support for `value`
This adds a new `value` property to the component to set label for a
selected value and also rendering a chevron as an indicator that the list
item becomes clickable.
2021-08-31 11:27:43 +02:00
Sale Djenic 9b3275f327 refactor(StatusSearchPopup): change expected search model shape
This changes the share of the model expected to render search results.

BREAKING CHANGE:
The model has changed in the following way:
- `image` field added
- `color` field added
- `badgeIdenticonColor` field renamed to `badgeIconColor`
- `isLetterIdenticon` field renamed to `badgeIsLetterIdenticon`
2021-08-31 11:23:23 +02:00
Pascal Precht 28e514f927 feat(StatusModal): add ability to set elide config of header titles
There are now two new properties in `StatusModalHeaderSettings`:

- `titleElide`
- `subTitleElide`

These can be used to configure the `elide` property of both header titles.
The default values for both of them is `Text.ElideRight`.

Closes #353
2021-08-31 10:59:56 +02:00
B.Melnik faca4765f4
feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
2021-08-30 09:42:01 +02:00
Pascal Precht 503a07bf5a fix(StatusModal): ensure header and subtitles elide if needed
Closes #256
2021-08-27 23:08:09 +02:00
B.Melnik 7ef61ed3f8 fix(StatusChatInfoButton): Add self-calculated implicitWIdth and elide to texts
This commit add elide flags to text in title and subtitle and add flexibility to width. Now compoents use next rules:
1. If width is set - text should be elided when implicit text  width is more than root object width
2. Component grows if width is not set based on inner elements natural sizes

Closes: #335 and #338
2021-08-27 13:39:36 +02:00
Pascal Precht ee5ec7b3db fix(StatusListItem): don't set width on title item
There was an explicit `width` introduced on `statusListItemTitle`, most likely
to make room for it when `titleAsideText` is supplied.

This unfortunately causes the title get a very small width, resulting in broken
UI.

Since we can assume that there should be enough space for the titleAsideText
when it's used, we probably don't have to calculate a fixed width for the title
in the first place.

This commit therefore removes that explicit setting.
2021-08-27 09:37:06 +02:00
Pascal Precht a4178bd6dc
feat(StatusChatListAndCategories): add drag and drop support for cate… (#349)
* feat(StatusChatListAndCategories): add drag and drop support for categories

This adds support for dragging and dropping chat list categories.
To persist reorder of chat categories, the new `onChatListCategoryReordered`
signal can be leveraged.

Drag and drop of categories is turned off by default and needs to
be turned on using `draggableCategories: true`.

Closes #227

* feat(Status.Core): introduce Utils namespace

This adds a new package for utility related things.
2021-08-26 15:33:45 -04:00
B.Melnik c679854d7d feat(StatusChatList): Add drag and drop support of list items
This implements drag and drop capabilities of chat items within a `StatusChatList`.
The commit introduces a `DelegateModal` to visually reorder chat items
when they're being dragged and dropped onto a `DropArea`.

To persist the new order of chat items, various signals have been introduced to chat
list related components:

```qml
StatusChatList {

    onChatItemReordered: function (id, from, to) {
        // ...
    }
}

StatusChatListAndCategories {

    onChatItemReordered: function (categoryId, chatId, from, to) {
        // ...
    }
}
```

There's no such API on the `StatusChatListCategory` type because that one already
exposes its underlying `StatusChatList` via `chatList`, which makes the signal available.

Dragging and dropping chat items is disabled by default and needs to be turned on
using the `draggableItems` property:

```qml
StatusChatList {
    draggableItems: true
    ...
}
```
2021-08-23 14:16:53 +02:00
Sale Djenic 78edcb3795 feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection
New methods added `resetSearchSelection` and `setSearchSelection` for resetting
and setting selected location.
2021-08-17 10:38:23 +02:00
Sale Djenic b133d10f96 feat(StatusSearchPopupMenuItem): new API
Status Menu item received new value property.
2021-08-17 10:38:23 +02:00
Sale Djenic c306b68296 fix(StatusSearchLocationMenu): typo fix
Fixed a typo in StatusSearchLocationMenu.locationModel
2021-08-17 10:38:23 +02:00
Sale Djenic 01da750899 feat(StatusListItem): introduce itemId and titleId properties and their handlers
A click on the item's title or whole item emits appropriate `titleClicked` or
`clicked` signal with `titleId` or `itemId` value respectively. `titleId` and
`itemId` may or may not defer from their display values, it's up to logic which
is applied.

This is introduced because of need of the issue-2934.
2021-08-17 10:38:23 +02:00
Pascal Precht ba4f27f9ba feat(StatusInput): introduce new validator pipeline
There's a new `validators` property that can be used to add validators to `StatusInput` instances, which are executed in the same order:

```qml
StatusInput {
  text: "Some value"
  validators: [...]
}
```

For convenience StatusQ provides some common validation methods, such as `StatusMinLengthValidator`, StatusMaxLengthValidator` and could be extended to other (e.g. email validation etc):

```qml
StatusInput {
  text: "Some value"
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
}
```

Validators are executed every time the text of the input changes. They are executed in the same order they have been applied, which enables users to create cascading conditions like "First make sure the value is at least 3 characters long, then make sure it matches a certain pattern".

When a validation fails, it sets the validity of the input (`valid: false`) accordingly and optionally exposes additional error information on `StatusInput.errors`:

```qml
StatusInput {
  text: "Fo"
  onTextChanged: {
    if (errors) {
      /**
       * errors now has the following structure:
       * errors: {
       *   minLength: { minValue: 3, actual: ... }
       * }
       * Also, `StatusInput` is now `valid = false`
       **/
       errorMesssage = "Expected " + errors.minLenght.minValue + " but got: "+ errors.minLength.actual; // i18n'able
    }
  }
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
}
```
There can be any number of error objects on the `errors` property, depending on who many validators have been run that failed validation.

Custom validators can be implemented by introducing a new `StatusValidator` type that has to implement a `validate()` function and defines the validators name. The `validate()` function has to return either `true` or `false` depending on whether the value is valid.

Alternatively, the function can return an error object which gets exposed on the underlying input's `errors` property, at which point it's considered invalid as well.

Here's a simple custom validator:

```qml
// HelloValidator.qml
import StatusQ.Controls.Validators 0.1

StatusValidator {

  property string name: "hello"

  validate: function (value) { // `value` is the `text` value of the underlying control
    return value === "hello"
  }
}
```

Applying this validators would look like this:

```qml
StatusInput {
  text: "Some value"
  validators: [
    HelloValidator {}
  ]
  onTextChanged: {
    if (errors.hello) {
      errorMessage = "Doesn't say hello!"
    }
  }
}
```

Alternatively, validators can return error objects to provide more information about what went wrong. Here's the implementation of the `StatusMinLengthValidator` as an example:

```qml
StatusValidator {

    property int minLength: 0

    name: "minLength"

    validate: function (value) {
        return value.length >= minLength ? true : {
            min: minLength,
            actual: value.length
        }
    }
}
```

Because validators as components, they can hold any custom properties they need to be configured.

There has been concern that, with this API, error messages need to be potentially defined in multiple places, given that there could be multiple instances of any validator. This is easily solved by having a centralized function figure out what the error message is, given a certain error object:

```qml
StatusInput {
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
  onTextChanged: {
    if (errors) {
      errorMessage = getErrorMessage(errors) // this function is provided by global or elsewhere
    }
  }
}
```

Closes #298
2021-08-16 09:37:39 +02:00
Alexandra Betouni 30f5ae4b32 feat(StatusQ.Popups) Adding SearchPopup component
Closes #264
2021-08-12 11:35:09 +02:00
Alexandra Betouni d327c51521 fix(StatusAppThreePanelLayout): limit right panel width to 300px
Also added handle in DemoApp as well as hiding text when in minimum
width for right and left panels
2021-07-26 16:49:53 +02:00
Pascal Precht e71bd45c55
chore(sandbox): make app wider due to minimum layout width
There have been minimum layout widths introduced lately which break the
sandbox app's UI. This commit makes it wider by default so this doesn't happen
2021-07-26 15:13:04 +02:00
Pascal Precht 731a0f8c8f feat(sandbox): make use of `StatusInput` in chat view 2021-07-26 15:03:54 +02:00
Pascal Precht c8e903496c feat(StatusBaseInput): add icon support
Usage:

```qml
StatusBaseInput {
    icon.name: "..."
}
```

Closes #242
2021-07-26 15:03:54 +02:00
Pascal Precht 3cf53d0233 feat(StatusInput): implement error message and charlimit APIs
Usage:

```qml
StatusInput {
  label: "Fieldname"
  charLimit: 30
  errorMessage: "Some error occured"

  input.valid: false
  input.text: "Some invalid value"
  input.valid: false
}
```

Closes #289, #290
2021-07-26 15:03:54 +02:00
Pascal Precht 646c00bd3a feat(Controls): introduce `StatusInput`
`StatusInput` is a wrapper around `StatusBaseInput` to provide additional
component composition for labels, error messages and alike

Closes #288
2021-07-26 15:03:54 +02:00
Pascal Precht e8cce72c25 feat(StatusBaseInput): add visual validity state
Closes #287
2021-07-26 15:03:54 +02:00
Pascal Precht de1cec7e51 fix(StatusBaseInput): ensure clear button has the correct color
Also only render clear button when input has active focus.

Closes #286
2021-07-26 15:03:54 +02:00
Pascal Precht a1662adead chore(sandbox): introduce StatusInputPage 2021-07-26 15:03:54 +02:00
Alexandra Betouni ffc6fcb429 feat(StatusQ.Layout): introducing StatusAppThreePanelLayout
Added new component to support a 3 column view

Closes #272
2021-07-23 11:06:41 +02:00
Pascal Precht e3f7931442
fix(StatusListItem): ensure title area wraps text 2021-07-23 10:54:44 +02:00
Pascal Precht 3c4c7f040a feat(StatusPopupMenu): add support for letter identicons, identicons and images
This extends the popup menu to accept image or icon configurations a la `StatusIconSettings`
and `StatusImageSettings` in menu items, as well as nested menus.

Usage:

```qml
StatusPopupMenu {

    StatusMenuItem {
        text: "Custom Image icon"
        image.source: // image source
    }

    StatusMenuItem {
        text: "Custom identicon icon"
        image.source: // identicon source
        image.isIdenticon: true
    }

    StatusMenuItem {
        text: "Custom letter identicon"
        iconSettings.isLetterIdenticon: true
        iconSettings.background.color: "red"
    }
}
```

Few things to note:

- Because `StatusMenuItem` is an `Action` type, we can't extend its `icon` property,
  so we have to introduce our own (`iconSettings`) which can be of type `StatusIconSettings`
- Where possible, `StatusPopupMenu` will prefer `iconSettings.[...]` over `icon.[...]`,
  which means, both would work: `icon.name` and `iconSettings.name`.
  This is for consistency's sake. Consumers can switch completely to `iconSettings` if desired.
- When `isLetterIdenticon` is true, `iconSettings.background.color` must be set, similar
  to how it work in any other StatusQ component that makes use of this configuration type.

Closes #263
2021-07-22 13:24:26 +02:00
Pascal Precht 031319968d feat(StatusListItem): support tertiaryTitle
Usage:

```qml
StatusListItem {
    title: ...
    subTitle: ...
    tertiaryTitle: ...
}
```

Closes #275
2021-07-21 09:57:15 +02:00
Pascal Precht fda9b71f7b feat(StatusModal): introduce support for identicons and letter identicons
Usage:

```qml
StatusModal {

    header.image.isIdenticon: ...

    // or

    header.icon.isLetterIdenticon: ...
    header.icon.background.color: ...
}
```

Closes #269
2021-07-21 09:57:03 +02:00
Pascal Precht 214ef6b021 feat(StatusListItem): add identicon support
Closes #261
2021-07-16 08:55:48 +02:00
Pascal Precht a404ba0782 feat(StatusChatListItem): introduce muted badge visuals
Also ensure title font weight stays `normal` when item is `muted`.

Closes #258, #259
2021-07-16 08:55:34 +02:00
Pascal Precht 58e8f1cd23 feat(StatusFlatRoundButton): introduce `highlighted` color for secondary type
Closes #245
2021-07-15 13:00:58 +02:00