Commit Graph

230 Commits

Author SHA1 Message Date
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
Alexandra Betouni 7da4bdee74
fix(StatusAppThreePanelLayout): increase minimum width in right panel
This is to ensure it also inlcludes right margin.
2021-08-26 17:26:03 +02:00
khushboo-dev-cpp 2d8fd576e0 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.
2021-08-26 14:45:41 +02:00
B.Melnik 138458d10c fix(StatusBaseInput): fix click to focus
Closes: #325
2021-08-26 09:43:44 +02:00
Pascal Precht 8e8f70af7c
chore: add v0.6.0 changelog 2021-08-26 09:36:04 +02:00
Pascal Precht 5da9cb06d5 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
2021-08-23 14:17:13 +02: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
Pascal Precht c6952a89ae
Revert "fix(StatusChatInputButton) ensure button text is elided correctly"
This reverts commit 38b0207055.
2021-08-19 19:48:00 +02:00
Alexandra Betouni 38b0207055
fix(StatusChatInputButton) ensure button text is elided correctly
Closes #335
2021-08-19 15:28:26 +02:00
Khushboo Mehta d16719adda feat(StatusLetterIdenticon): Expose the text component
Aliased the text compoenent so that its color, text value can be set from outside
2021-08-18 10:44:05 +02:00
Pascal Precht ea3408012f 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
2021-08-17 10:44:28 +02:00
Pascal Precht 4b107a0ef4 fix(StatusInput): ensure validation is performed on initialization
Closes #326
2021-08-17 10:42:21 +02:00
Pascal Precht 51d8b55b79 fix(StatusInput): remove recursive binding in label height 2021-08-17 10:42:09 +02:00
Pascal Precht 0243852c63 fix(StatusBaseInput): ensure wrapmode works as expectefd in multiline mode
Closes #324
2021-08-17 10:41:57 +02:00
Pascal Precht ea6743a776 fix(StatusBaseInput): expose cursorPosition
Fixes #323
2021-08-17 10:41:44 +02:00
Sale Djenic 2de261c49b fix(StatusSearchPopup): replace "#" character with "channel" icon 2021-08-17 10:38:23 +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 3e134ada18 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.
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 482296c310
chore: cut 0.5.0 release 2021-08-16 09:39:06 +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
Pascal Precht f635bad63c 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.
2021-08-16 09:28:35 +02:00
Pascal Precht 58a3071626 feat(StatusIcon): add `play-filled` and `pause-filled` icons
Closes #310
2021-08-13 15:02:23 +02:00
Khushboo Mehta d24c2e6208 fix(StatusChatToolBar): Use updated StatusFlatRoundButton
Adapting the StatusChatToolBar with the new StatusFlatRoundButton and initializing it
2021-08-12 17:23:47 +02:00
Khushboo Mehta 5a0489ba17 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
2021-08-12 17:23:47 +02:00
Khushboo Mehta ee4296837a feat(StatusToolTip): Adding an offset property
Added an offset property with which the arrow position for the tooltip can be adjusted from the outside
2021-08-12 17:23:47 +02:00
Pascal Precht 87ae7b90e7
chore: cut 0.4.0 release 2021-08-12 12:57:33 +02:00
Alexandra Betouni 30f5ae4b32 feat(StatusQ.Popups) Adding SearchPopup component
Closes #264
2021-08-12 11:35:09 +02:00
Pascal Precht 90aa9d76c0 fix(StatusPopupMenu): ensure icon or image settings exist
Fixes #295
2021-08-10 15:12:28 +02:00
RichΛrd 2e1359c9e2
fix(StatusAppNavBar): add profile button (#311) 2021-08-06 12:47:57 -04:00
RichΛrd aab59763e5
chore: replace profile icon (#312) 2021-08-06 12:47:52 -04:00
Alexandra Betouni a8e830f76c 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
2021-08-05 09:59:39 +02:00
Pascal Precht b345c75a4c fix(StatusChatListItem): don't signal item selection if already selected
Closes #303
2021-08-03 09:48:53 +02:00
Jonathan Rainville 7e03daeaf9
feat(StatusListItem): add enabled prop to StatusLIneItem (#302) 2021-07-29 09:33:32 -04:00
Pascal Precht 556e5ccafc
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.
2021-07-28 16:16:54 -04:00
Pascal Precht 79200f066e
chore: cut v0.3.0 release 2021-07-27 16:22:07 +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
Alexandra Betouni 762ff87bcc fix(StatusAppThreePanelLayout): limit center panel width to 300px 2021-07-26 15:07:06 +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 f16e857c72 fix(StatusBaseInput): some minor style adjustment to adhere to design 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 ab3035930b fix(StatusBaseInput): ensure input text is selectable with mouse
This also sets the correcrt selection and selected text color.
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 e1ebdaae2c feat(StatusBaseInput): add hover state visuals
Closes #285
2021-07-26 15:03:54 +02:00