Commit Graph

5195 Commits

Author SHA1 Message Date
Sale Djenic dc1e0620e6 fix(StatusSearchPopup): replace "#" character with "channel" icon 2022-09-21 18:20:03 +02:00
Sale Djenic 9396bd208c feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection
New methods added `resetSearchSelection` and `setSearchSelection` for resetting
and setting selected location.
2022-09-21 18:20:03 +02:00
Sale Djenic e10c8f5d16 refactor(StatusSearchLocationMenu): expose a single itemClicked signal
A single `signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)`
with parameters referring to the first level and second level item is exposed
and replaced multiple signals we had before for the same purpose.
2022-09-21 18:20:03 +02:00
Sale Djenic ca7d17ffc6 feat(StatusSearchPopupMenuItem): new API
Status Menu item received new value property.
2022-09-21 18:20:03 +02:00
Sale Djenic 92757be8fd fix(StatusSearchLocationMenu): typo fix
Fixed a typo in StatusSearchLocationMenu.locationModel
2022-09-21 18:20:03 +02:00
Sale Djenic b1a871cd37 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.
2022-09-21 18:20:03 +02:00
Pascal Precht 3a07a9ead8 chore: cut 0.5.0 release 2022-09-21 18:20:03 +02:00
Pascal Precht 2d0febcaae 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
2022-09-21 18:20:03 +02:00
Pascal Precht 91fbc16ee2 feat(StatusBaseInput): enforce `maximumLength` if it's set
Prior to this commit, setting `charLimit` on `StatusInput` would only have a visual effect
(rendering the char limit), however it wouldn't actually enforce this limit.

This was by intended behaviour, because we wanted to leave some room
for possible validators to kick in (for example a max length validator).

If however the char limit is enforce, such a validator would never kick in.
There seems to be consensus in the team that the limit should be enforced though.

This commit enables that.
2022-09-21 18:20:03 +02:00
Pascal Precht 1eedf66fcd feat(StatusIcon): add `play-filled` and `pause-filled` icons
Closes #310
2022-09-21 18:20:03 +02:00
Khushboo Mehta ca9f761251 fix(StatusChatToolBar): Use updated StatusFlatRoundButton
Adapting the StatusChatToolBar with the new StatusFlatRoundButton and initializing it
2022-09-21 18:20:03 +02:00
Khushboo Mehta dc7ae4cce3 feat(StatusFlatRoundButton): Adding tooltip to the button
Adding the StatusToolTip to the StatusFlatRoundButton. This will only function when the tooltip text is set from the outside
2022-09-21 18:20:03 +02:00
Khushboo Mehta c58118a6e2 feat(StatusToolTip): Adding an offset property
Added an offset property with which the arrow position for the tooltip can be adjusted from the outside
2022-09-21 18:20:03 +02:00
Pascal Precht 0954a7d945 chore: cut 0.4.0 release 2022-09-21 18:20:03 +02:00
Alexandra Betouni 11071a903e feat(StatusQ.Popups) Adding SearchPopup component
Closes #264
2022-09-21 18:20:03 +02:00
Pascal Precht 67330d68ae fix(StatusPopupMenu): ensure icon or image settings exist
Fixes #295
2022-09-21 18:20:03 +02:00
RichΛrd b891aa47cc fix(StatusAppNavBar): add profile button (#311) 2022-09-21 18:20:03 +02:00
RichΛrd 5bfc75f50d chore: replace profile icon (#312) 2022-09-21 18:20:03 +02:00
Alexandra Betouni 01b297fe24 fix(StatusChatToolBar) Fixing more menu not closing
The menu has a CloseOnReleaseOutside policy and so it
was closing and immediately re-opened when the kebab icon
was clicked since it's outside the menu area and also was
calling the popup function of the menu. Added dummy bool
property to detect whether the menu is already closed and
not open it again

Closes #308
2022-09-21 18:20:03 +02:00
Pascal Precht 32eeb91cd2 fix(StatusChatListItem): don't signal item selection if already selected
Closes #303
2022-09-21 18:20:03 +02:00
Jonathan Rainville 06e34cc5a1 feat(StatusListItem): add enabled prop to StatusLIneItem (#302) 2022-09-21 18:20:03 +02:00
Pascal Precht 7c4f042e30 feat(StatusQ.Theme.Core): introduce theme colors for StatusChatInput (#299)
There's some usage specific color being added to the chat input (which doesn't live in
StatusQ yet). To make sure we don't lose that change, I'm adding the new
colors to StatusQ theming system and have Status Desktop use it for the time being
until `StatusChatInput` is moved to StatusQ anyways.
2022-09-21 18:20:03 +02:00
Pascal Precht e5d0c0733c chore: cut v0.3.0 release 2022-09-21 18:20:03 +02:00
Alexandra Betouni dec0083793 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
2022-09-21 18:20:03 +02:00
Pascal Precht 567dab012e 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
2022-09-21 18:20:03 +02:00
Alexandra Betouni c15c262602 fix(StatusAppThreePanelLayout): limit center panel width to 300px 2022-09-21 18:20:03 +02:00
Pascal Precht 6a2d3cc80f feat(sandbox): make use of `StatusInput` in chat view 2022-09-21 18:20:03 +02:00
Pascal Precht 53f1baac88 feat(StatusBaseInput): add icon support
Usage:

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

Closes #242
2022-09-21 18:20:03 +02:00
Pascal Precht 97a5c33e6f fix(StatusBaseInput): some minor style adjustment to adhere to design 2022-09-21 18:20:03 +02:00
Pascal Precht fca3386cec 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
2022-09-21 18:20:03 +02:00
Pascal Precht e25fcf79f9 feat(Controls): introduce `StatusInput`
`StatusInput` is a wrapper around `StatusBaseInput` to provide additional
component composition for labels, error messages and alike

Closes #288
2022-09-21 18:20:03 +02:00
Pascal Precht d6119bb4ab fix(StatusBaseInput): ensure input text is selectable with mouse
This also sets the correcrt selection and selected text color.
2022-09-21 18:20:03 +02:00
Pascal Precht 0ffee3f426 feat(StatusBaseInput): add visual validity state
Closes #287
2022-09-21 18:20:03 +02:00
Pascal Precht e966641ed1 fix(StatusBaseInput): ensure clear button has the correct color
Also only render clear button when input has active focus.

Closes #286
2022-09-21 18:20:03 +02:00
Pascal Precht 3755e1fdd6 feat(StatusBaseInput): add hover state visuals
Closes #285
2022-09-21 18:20:03 +02:00
Pascal Precht 11f9d2a8c5 fix(StatusBaseInput): add visuals for disabled state
Closes #284
2022-09-21 18:20:03 +02:00
Pascal Precht 03de7db8ac refactor(StatusBaseInput): change implicitWidth to adhere to design 2022-09-21 18:20:03 +02:00
Pascal Precht 9945454a5d chore(sandbox): introduce StatusInputPage 2022-09-21 18:20:03 +02:00
Pascal Precht 22a2b85948 fix(StatusBaseInput): expose text prop alias 2022-09-21 18:20:03 +02:00
Alexandra Betouni a134ab0d36 fix(StatusAppThreePanelLayout): hide right panel when closed
Brought back opacity condition deleted by mistake
2022-09-21 18:20:03 +02:00
Alexandra Betouni fa8925eba0 feat(StatusQ.Layout): introducing StatusAppThreePanelLayout
Added new component to support a 3 column view

Closes #272
2022-09-21 18:20:03 +02:00
Pascal Precht aadd10c29a fix(StatusListItem): ensure title area wraps text 2022-09-21 18:20:03 +02:00
Pascal Precht c6c9bc6a32 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
2022-09-21 18:20:03 +02:00
Pascal Precht f95e0c9499 feat(Popups): introduce `StatusMenuHeadline` component
This component can be used to group different sections within a popup menu.

Usage:

```qml
StatusPopupMenu {

    StatusMenuItem {
        text: "One"
        icon.name: "info"
    }

    StatusMenuHeadline {
        text: "Some text"
    }

    StatusMenuItem {
        text: "Two"
        icon.name: "info"
    }
}
```
2022-09-21 18:20:03 +02:00
Pascal Precht 55ff4a2362 fix(StatusChatInfoButton): ensure pin icon button is always rendered
Closes #278
2022-09-21 18:20:03 +02:00
Pascal Precht 696eeb322a fix(StatusModal): reset image/identicon width when loader state has changed 2022-09-21 18:20:03 +02:00
Pascal Precht 17a4059452 chore(CHANGELOG): add missing version number 2022-09-21 18:20:03 +02:00
Pascal Precht e432165436 chore: cut 0.2.0 release 2022-09-21 18:20:03 +02:00
Pascal Precht ad494560fc feat(StatusToolTip): expose `arrow` for fine-grain control
There's cases where the arrow on the tooltip needs to be repositioned, for example
when the tooltip doesn't fit into the viewport anymore but is centered below a button.
2022-09-21 18:20:03 +02:00
Pascal Precht 92dd998c4f feat(StatusListItem): support tertiaryTitle
Usage:

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

Closes #275
2022-09-21 18:20:03 +02:00