Commit Graph

5310 Commits

Author SHA1 Message Date
Pascal Precht cebfe60d50 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.
2022-09-21 18:20:03 +02:00
Alexandra Betouni c4aa67a751 fix(StatusAppThreePanelLayout): increase minimum width in right panel
This is to ensure it also inlcludes right margin.
2022-09-21 18:20:03 +02:00
khushboo-dev-cpp e33e51f11a feat(StatusPopupMenu): changed close policy
Close on press outside added to closing policy as the I found old one to be buggy on mac. Causes no side effects.
2022-09-21 18:20:03 +02:00
B.Melnik a8cd4be5a5 fix(StatusBaseInput): fix click to focus
Closes: #325
2022-09-21 18:20:03 +02:00
Pascal Precht 8672141a80 chore: add v0.6.0 changelog 2022-09-21 18:20:03 +02:00
Pascal Precht 591fbdbd4f fix(StatusChatListCategory): emit original mouse event data in clicked signal
This fixes a bug that was introduced in 01da750899 with a breaking change
where `StatusChatListCategoryItem`'s `clicked` signal would no longer receive
a `mouse` event object.

The reason this is happening is because we've introduced a new `clicked` signal
on `StatusListItem`. The idea was to rely on that within `StatusChatListCategoryItem`,
however, we didn't take into account that the new `clicked` signal in `StatusListItem`
doesn't emit a `mouse` event object.

To fix this issue could either reintroduce the custom `clicked` handler on
`StatusChatListCategoryItem`, or listen to the original `sensor.onClicked` and
`onTitleClicked` signals exposed by `StatusListItem` instead, ensuring the required
`mouse` event data exists.

Fixes #333
2022-09-21 18:20:03 +02:00
B.Melnik 85ee81cfa3 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
    ...
}
```
2022-09-21 18:20:03 +02:00
Pascal Precht 67031ad5b1 Revert "fix(StatusChatInputButton) ensure button text is elided correctly"
This reverts commit 38b0207055f81c853830320e8b20e9532e84973b.
2022-09-21 18:20:03 +02:00
Alexandra Betouni dc5e5d648b fix(StatusChatInputButton) ensure button text is elided correctly
Closes #335
2022-09-21 18:20:03 +02:00
Khushboo Mehta bff34a2e21 feat(StatusLetterIdenticon): Expose the text component
Aliased the text compoenent so that its color, text value can be set from outside
2022-09-21 18:20:03 +02:00
Pascal Precht 4fe2d82208 feat(StatusBaseInput): introduce `dirty` and `pristine` properties
These properties can be used to determine whether a user has either
interacted with the form control, or changed its value.

It's also used in initial validation to ensure validation is done but
visually, form controls stay untouched.

Closes #327
2022-09-21 18:20:03 +02:00
Pascal Precht 3c6147c69c fix(StatusInput): ensure validation is performed on initialization
Closes #326
2022-09-21 18:20:03 +02:00
Pascal Precht 01c5557621 fix(StatusInput): remove recursive binding in label height 2022-09-21 18:20:03 +02:00
Pascal Precht 0ddfa6a1c3 fix(StatusBaseInput): ensure wrapmode works as expectefd in multiline mode
Closes #324
2022-09-21 18:20:03 +02:00
Pascal Precht cc96474b8e fix(StatusBaseInput): expose cursorPosition
Fixes #323
2022-09-21 18:20:03 +02:00
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