Commit Graph

1039 Commits

Author SHA1 Message Date
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 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
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
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
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 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 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
Pascal Precht 97dbebc8aa 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
2022-09-21 18:20:03 +02:00
Pascal Precht 1456bf3a79 chore: add thumbs up/down icons 2022-09-21 18:20:03 +02:00
Pascal Precht f5a5e1ae8c fix(StatusPopupMenu): ensure menu items elide 2022-09-21 18:20:03 +02:00
Pascal Precht 8038a27ca4 feat(StatusModal): render header and footer border by default
This adds a `StatusModalDivider` to the header and footer so they don't
have to be put into `content` and therefore won't scroll out of the viewport
if the content exceeds the modal height.

The footer divider is only rendered when there's indeed action buttons
provided.

Closes #265
2022-09-21 18:20:03 +02:00
Anthony Laibe 43623b3c7b fix(StatusChatListCategory): ensures showActionButtons is taken into account
when showing the menu button and right click
2022-09-21 18:20:03 +02:00
Anthony Laibe 38736ad58a feat(StatusChatListAndCategories): new API showPopupMenu 2022-09-21 18:20:03 +02:00
Anthony Laibe 2b5b56b0fa feat(StatusChatInfoToolBar): make statusMenuButton public 2022-09-21 18:20:03 +02:00
Pascal Precht 5c74322a50 feat(StatusListItem): add identicon support
Closes #261
2022-09-21 18:20:03 +02:00
Pascal Precht c17383ce9c feat(StatusChatListItem): introduce muted badge visuals
Also ensure title font weight stays `normal` when item is `muted`.

Closes #258, #259
2022-09-21 18:20:03 +02:00
Pascal Precht 17d5978fe4 feat(StatusFlatRoundButton): introduce `highlighted` color for secondary type
Closes #245
2022-09-21 18:20:03 +02:00
B.Melnik 4fcdbab22e feat(StatusBaseInput): Add focused state
Closes: #240
2022-09-21 18:20:03 +02:00
Pascal Precht 078c12e796 feat(StatusChatToolBar): add tooltips to action buttons
Closes #244
2022-09-21 18:20:03 +02:00
Pascal Precht ebbc9f2739 feat(StatusChatToolBar): add members and search button
This commit adds the members and search button which are needed for certain
features in Status Desktop. In views where these aren't needed, each button
can be set `visible: false` individually:

```qml
StatusChatToolBar {
    ...
    membersButton.visible: false
    searchButton.visible: false
}
```

Closes #243
2022-09-21 18:20:03 +02:00
Pascal Precht 31023aa462 fix(StatusChatList): ensure badge is also shown for one to one messages 2022-09-21 18:20:03 +02:00
Pascal Precht 78ed4642d6 chore: ensure `StatusChatList` receives the proper value for mentions
This is due to a change in how mentions and unread messages are indicated.
See 7fbccec227 for more information.
2022-09-21 18:20:03 +02:00
B.Melnik 056704f68d fix(StatusBaseInput): Fix focus area
Closes: #241
2022-09-21 18:20:03 +02:00
Pascal Precht 15b8d1e896 feat(StatusListItem): add `Danger` type support
Usage:

```qml
StatusListItem {
    title: "Some title"
    icon.name: "delete"
    type: StatusListItem.Type.Danger
}
```

Closes #248
2022-09-21 18:20:03 +02:00
Pascal Precht c85d626f1e feat(StatusRoundIcon): enable `icon.color` support 2022-09-21 18:20:03 +02:00
Pascal Precht 98783ee559 feat(StatusListItem): support letter identicons
This adds support for letter identicons by using the `icon.isLetterIdenticon`
flag:

```qml
StatusListItem {
    title: "Some name"
    icon.isLetterIdenticon: true
    icon.background.color: "orange"
}
```

Closes #239
2022-09-21 18:20:03 +02:00
Alexandra Betouni dd23ef2990 [#202] Added Picker button
Adding picker button
* As an example it opens Qt's ColorDialog, as soon as
  a color is selected there, the button is colored
  with that. Final color picker to be implemented in
  a seperate task.

Also minor improvements in main.qml and sandbox.pro

Closes #202
2022-09-21 18:20:03 +02:00
Pascal Precht 12b35ba88c feat(StatusModal): expose loaded content
As discussed in #237, this is needed for consumers to access content
children from outside `content`.

Usage:

```qml
StatusModal {
  id: modal
  content: StatusBaseText {
      text: "Foo"
  }

  rightButtons: [
      StatusButton {
          text: "Change text"
          onClicked: {
              modal.contentComponent.text = "Bar"
          }
      }
  ]
}
```

Fixes #237
2022-09-21 18:20:03 +02:00
B.Melnik 1a81ab0924 feat(Controls): introduce StatusBaseInput
Usage: The same interface like TextField

Closes: #106
2022-09-21 18:20:02 +02:00
Pascal Precht 00e2a7406a chore: add safety to satisfy QML 2022-09-21 18:20:02 +02:00
Pascal Precht 82960a912b fix(StatusChatInfoButton): make component identicon aware
Closes #228
2022-09-21 18:20:02 +02:00
Pascal Precht c0c46b6dff fix(StatusChatInfoButton): prefix chat name with "#" if needed
Closes #229
2022-09-21 18:20:02 +02:00
Pascal Precht c08cf4b851 fix(StatusChatInfoButton): vertically center title if no subtitle is provided
Closes #230
2022-09-21 18:20:02 +02:00
Pascal Precht 5aaa5590c7 fix(StatusChatInfoButton): disable hover effects when sensor is disabled
Closes #231
2022-09-21 18:20:02 +02:00
Pascal Precht a3db546dc5 fix(StatusChatListCategory): only try open popup when supplied
Closes #220
2022-09-21 18:20:02 +02:00
Pascal Precht 087adef8df fix(StatusChatListAndCategories): make chat list visibily flag work
Closes #217
2022-09-21 18:20:02 +02:00
Pascal Precht 867be4194d fix(StatusChatList): ensure popupMenu closeHandler don't break
These broke because we were referring to a `highlighted` property that
was wrongly scoped.

Fixes #216
2022-09-21 18:20:02 +02:00
Pascal Precht 2fc884244e fix(StatusChatListAndCategories): ensure chatItemUnmuted event is propagated
Closes #219
2022-09-21 18:20:02 +02:00
Pascal Precht b8e55a946c fix(StatusChatListAndCategories): ensure chat list receives popup menu
Closes #218
2022-09-21 18:20:02 +02:00
Pascal Precht 98ebedc63c feat(StatusChatList): expose hook to lazily calculate chat item names 2022-09-21 18:20:02 +02:00
Pascal Precht 5faebe7002 fix(StatusMenuSeparator): ensure height is 0 when invisible or disabled
Closes #212
2022-09-21 18:20:02 +02:00
Pascal Precht c62e459deb fix(StatusChatList): use fallback property to determine unread message count 2022-09-21 18:20:02 +02:00
B.Melnik 1f875743eb bug(StatusLoadingIndicator): Change Animator to Animation
Closes: #188
2022-09-21 18:20:02 +02:00
Pascal Precht 46876b79b9 fix(StatusChatListItem): ensure chat name elides when it's too long
Closes #151
2022-09-21 18:20:02 +02:00
Pascal Precht 29782dca80 fix(StatusChatListItem): ensure public chat names are prefixed with '#'
Closes #191
2022-09-21 18:20:02 +02:00
Pascal Precht d46130b9a5 refactor(StatusPopupMenu): expose category and chat id via open handler
Closes #192
2022-09-21 18:20:02 +02:00
Pascal Precht dbb8d941a5 feat(StatusRoundedImage): introduce identicon support
This just introduces a new `StatusImageSettings` property `isIdenticon`
which can be used to determine whether a `StatusRoundedImage` should
render with a background + border (which is the case for identicons).

It also updates the `StatusChatList` delegate to consider that property
and have it properly decide how to render the UI.

Closes #173
2022-09-21 18:20:02 +02:00
Pascal Precht 8a2af7e264 feat(StatusChatList): introduce `profileImageFn` property
This property enables users to pass as factory function to `StatusChatList`
component that determines the profile image of a given chat id.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatList {
    ...
    profileImageFn: function (id) {
        // `id` is the model id of the current chat item iterator
        return ... // has to return a profile image url
    }
}
```

In addition to this property, this commit also makes the component
expect an optional `model.identityImage` in case it's already provided.
That way, `profileImageFn` can be omitted.

Closes #174
2022-09-21 18:20:02 +02:00
Pascal Precht 48146b2fcf feat(Components): introduce `StatusContactRequestsIndicatorListItem`
Usage:

```qml
import StatusQ.Components 0.1

StatusContactRequestsIndicatorListItem {
    title: "Contact requests"
    requestsCount: 3
    sensor.onClicked: ...
}
```

Closes #175
2022-09-21 18:20:02 +02:00
Pascal Precht bad322e146 refactor: make chat component enum variants match protocol values
Closes #183
2022-09-21 18:20:02 +02:00
Pascal Precht c2f418205f feat(StatusChatList): introduce `popupMenu` property
Chat list items can open a context on right click as well, so `StatusChatList`
needs to provide an API for users to pass down a `StatusPopupMenu` accordingly.

This is now possible with a dedicated `popupMenu` proporty that can be
used as follows:

```qml
StatusChatList {
    ...
    popupMenu: StatusPopupMenu {

        property string chatId

        openHandler: function () {
            ...
        }

        StatusMenuItem {
            ...
        }
        ...
    }
}
```

As will all `popupMenu` properties in StatusQ component, having this explicit API
option enables us to have control over how triggering components (in this case chat
list items) behave when they open a context menu (e.g. keeping them highlighted as long
as the menu is active).

When defining a `chatId` property, `StatusChatList` will hydrate it with the id of
the chat list item that has triggered the menu.

If there's more logic to be executed upon opening the menu, `openHandler` serves
as a hook similar to other popup menus. Inside the hook, users have access to the
specific `chatId`.

Closes #171
2022-09-21 18:20:02 +02:00
Pascal Precht 4d595221eb fix(StatusModalHeader): ensure header has enough height for children
Closes #185
2022-09-21 18:20:02 +02:00
Pascal Precht 5e127c7194 fix(StatusRoundedImage): ensure images are scaled and positioned properly
Closes #172
2022-09-21 18:20:02 +02:00
Pascal Precht 1a14f9ebe2 fix(StatusChatList): expect `model.color` instead of `iconColor` prop 2022-09-21 18:20:02 +02:00
Pascal Precht c56c0b684d fix(StatusChatList): ensure component provide default `width`
Closes #176
2022-09-21 18:20:02 +02:00
Pascal Precht 7d39fee193 feat(StatusChatListItem): add `highlighted` property
Similar to other controls and components, chat list items can be in a
`highlighted` state, for example when popup menus are active.

Closes #178
2022-09-21 18:20:02 +02:00
Pascal Precht d389196f9e fix(StatusListItem): ensure icon background in secondary type works correctly 2022-09-21 18:20:02 +02:00
Pascal Precht 0d946ea4b0 fix(StatusModal): ensure modal footer uses correct theme color 2022-09-21 18:20:02 +02:00
B.Melnik 977f36ceca feat(StatusIcon): Improvement of Icons 2022-09-21 18:20:02 +02:00
Pascal Precht 11e6429068 refactor: don't make StatusChatList scrollable by default
This is because we ran into issues where some component compositions
caused scrollviews to be nested which rendered them non-functional.

For now we're rolling back the idea of components being smart enough
to become scrollable by themselves and have StatusQ consumers handle
scroll behaviour.
2022-09-21 18:20:02 +02:00
B.Melnik eab95c1c7b feat(Popups): Add StatusModal 2022-09-21 18:20:02 +02:00
Pascal Precht 78d56235af feat(Popups): introduce StatusModalDivider 2022-09-21 18:20:02 +02:00
B.Melnik 4c780c60ec feat(Popups): Add StatusModalFooter 2022-09-21 18:20:02 +02:00
B.Melnik ad90bdf020 feat(Popups): Add status modal header 2022-09-21 18:20:02 +02:00
Pascal Precht 10699d754a feat(StatusListItem): introduce primary and secondary types
Also enable `icon.rotation` via `StatusIconSettings.
2022-09-21 18:20:02 +02:00
Pascal Precht 2a7c3aded7 feat(Components): introduce `StatusListSectionHeadline`
Usage:

```qml
import StatusQ.Components 0.1

StatusListSectionHeadline {
    text: "Settings"
}
```

Closes #164
2022-09-21 18:20:02 +02:00
Pascal Precht 706fe0888d feat(Components): introduce `StatusNavigationPanelHeadline`
Component to render navigation panel headlines.

Usage:

```qml
import StatusQ.Components 0.1

StatusNavigationPanelHeadline {
    text: "Profile"
}
```

Closes #162
2022-09-21 18:20:02 +02:00
Pascal Precht 1b30a45eb8 fix(StatusChatListCategoryItem): don't render menubutton with no popup
Fixes #153
2022-09-21 18:20:02 +02:00
Pascal Precht 209a208455 feat(Components): introduce `StatusChatListAndCategories` component
This is a wrapping component that can be used to render community chat
lists and categories. It takes care of rendering categories, the top
chat list, as well as becominng scrollable in case the content outgrows
the available space.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListAndCategories {

    chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out
    categoryListModel: ... // available categories (need to have `id` and `name`)

    selectedChatId: ...

    showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels

    onChatItemSelected: ... // `id` is available for selected chat id

    categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items

        property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items
        ...
    }

    popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click
}
```

Closes #133
2022-09-21 18:20:02 +02:00
Pascal Precht 4582886d90 feat(StatusChatListCategory): apply chat list filter and expose category id in popup menu
This uses the newly introduced `filterFn` in `StatusChatList` to hide chat items
that don't belong to a given category.

It also optionally exposes the `categoryId` on the provided popup menu, so it has
access to it inside menu item triggers.
2022-09-21 18:20:02 +02:00
Pascal Precht 8081da7fa0 feat(StatusChatList): introduce `filterFn` and `categoryId`
Chat lists can belong to a category inside of communities, so they should
hold a property `categoryId` that represents that. In addition,
this commit introduces a `filterFn` function that can be used to conditionally
show/hide chat list items.

Closes #154
2022-09-21 18:20:02 +02:00
Pascal Precht e1a94cfd84 feat(StatusPopupMenu): introduce `openHandler`
Similar to `closeHandler`, StatusPopupMenu can now have a customized `openHandler`
to run custom logic on open.
2022-09-21 18:20:02 +02:00
Pascal Precht 03f4b4c98b feat(StatusChatListCategory): introduce flag to show/hide buttons
This commit introduces a `showActionButtons` flag that defaults to `false`
and can be used to render the action buttons provided in the chat list category.

This is useful for cases where only admin users should have the right to
create channels inside categories or mutate a category's state.

Settings `showActionButtons: true` will then render the buttons.

Closes #150
2022-09-21 18:20:02 +02:00
Pascal Precht f2de2642ac feat(Components): introduce `StatusChatInfoToolBar` component
Usage:

```qml
import StatusQ.Components 0.1

StatusChatInfoToolBar {
    chatInfoButton.title: "Cryptokitties"
    chatInfoButton.subTitle: "128 Members"
    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    chatInfoButton.icon.color: Theme.palette.miscColor6

    popupMenu: StatusPopupMenu {

        StatusMenuItem {
            text: "Create channel"
            icon.name: "channel"
        }

        StatusMenuItem {
            text: "Create category"
            icon.name: "channel-category"
        }

        StatusMenuSeparator {}

        StatusMenuItem {
            text: "Invite people"
            icon.name: "share-ios"
        }
    }
}
```

Closes #141
2022-09-21 18:20:02 +02:00
Pascal Precht 9085fe72d7 fix(StatusListItem): various fixes w.r.t. sensor, icon size etc
This also exposes `statusListItemSubTitle` for more control over
it's appearance, if needed.
2022-09-21 18:20:02 +02:00
Pascal Precht 04e74609f8 feat(StatusRoundButton): add `highlighted` and `icon.rotation` props
These are needed for some UIs where the icon state may change based on the
user's interaction.
2022-09-21 18:20:02 +02:00
Pascal Precht fde8d17beb fix(StatusNavBarTabButton): fix popup menu positioning 2022-09-21 18:20:02 +02:00
Pascal Precht 1c0c4fdd21 fix(StatusNavBarTabButton): ensure click signal is emitted when not menu is provided 2022-09-21 18:20:02 +02:00
Pascal Precht 7d96ad02ca feat(StatusPopupMenu): make menu items invisible when disabled
Closes #135
2022-09-21 18:20:02 +02:00
Pascal Precht 666908d93a feat(StatusNavBarTabButton): introduce `popupMenu` property
This enables users to apply a `StatusPopupMenu` to the button which automatically
positions itself and takes care of highlighting the activated button.

Usage:

```qml
StatusNavBarTabButton {
    ...
    popupMenu: StatusPopupMenu {

        StatusMenuItem {
            text: qsTr("Invite People")
            icon.name: "share-ios"
        }

        StatusMenuItem {
            text: qsTr("View Community")
            icon.name: "group"
        }

        StatusMenuItem {
            text: qsTr("Edit Community")
            icon.name: "edit"
        }
    }
}
```

Closes #137
2022-09-21 18:20:02 +02:00
Pascal Precht b81f0ecd41 fix(StatusAppNavBar): don't rely on `undefined` property
This turned out to be a bug. `model.count` isn't defined on `Repeater`
types.

Also, set `ScrollView` height to `0` if there are not community
tab buttons. This is needed because the columns implicit height
comes with spacing, resulting in some height.
2022-09-21 18:20:02 +02:00
Pascal Precht afa4739df6 feat(StatusChatListItem): accept right clicks
Also triggers the context menu in `StatusChatListCategory`.

Fixes #131
2022-09-21 18:20:02 +02:00
Pascal Precht 30956a757d fix(Components): more popup menu position fine-tuning 2022-09-21 18:20:02 +02:00
Pascal Precht 33082a761b fix: introduce tiny icon versions and make use of them where needed
Closes #128
2022-09-21 18:20:02 +02:00
Pascal Precht bd280acd83 fix(StatusChatToolBar): ensure context menu as proper position
Also expose action buttons for more custom control.
2022-09-21 18:20:02 +02:00
Pascal Precht ce91db10fe fix(StatusChatToolBar): ensure menu button stays highlighted
This introduces a new `popupMenu` property that can be used to pass
down a `StatusPopupMenu` to `StatusChatToolBar`.

The reason this is done is so that we get control over its `onClosed`
handler, which is used to remove the menu button's `highlighted` state.

The `highlighted` state is activated inside the component as well when
it's clicked.

Existing signals like `menuButtonClicked` still exist and can be leveraged
for further logic.

Closes #125
2022-09-21 18:20:02 +02:00
Pascal Precht b5bc83b871 feat(Components): introduce `StatusChatListCategory`
A component used to render chat list groups.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListCategory {
    categoryId: ...
    name: "Public"
    opened: true // default `true`

    addButton.[...]: ... // `StatusChatListCategoryItemButton`
    menuButton.[...]: ... // `StatusChatListCategoryItemButton`
    toggleButton.[...]: ... // `StatusChatListCategoryItemButton`

    chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList`
    chatList.selectedChatId: ...
    chatList.onChatItemSelected: ...

    popupMenu: StatusPopupMenu {
        ...
    }
}
```

Closes #123
2022-09-21 18:20:02 +02:00
Pascal Precht 6ccc9625ba feat(StatusChatListCategoryItem): introduce `highlighted` property 2022-09-21 18:20:02 +02:00
Pascal Precht 6276a789c3 feat(StatusPopupMenu): introduce `closeHandler` hook
This enables us to predefine default close handlers for popup
menus.
2022-09-21 18:20:02 +02:00
Pascal Precht a1ecb77f19 feat(StatusChatListCategoryItemButton): introduce `highglighted` property 2022-09-21 18:20:02 +02:00
Pascal Precht 9ae468a70b feat(Components): introduce `StatusChatListCategoryItem`
This component is used to render chat list categories.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListCategoryItem {
    title: "Public"
    onClicked: opened = !opened
    onToggleButtonClicked: opened = !opened
    onMenuButtonClicked: ...
    onAddButtonClicked: ...

    addButton.[...]: ... // StatusChatListCategoryItemButton
    menuButton.[...]: ... // StatusChatListCategoryItemButton
    toggleButton.[...]: ... // StatusChatListCategoryItemButton
}
```

The button components are exposed so their tooltips can be configured
with (internationalized) app messages.

Closes #117
2022-09-21 18:20:02 +02:00
Pascal Precht 0fb1818f53 fix(StatusChatListItem): use proper font size for chat name 2022-09-21 18:20:02 +02:00
Pascal Precht 893f96ac88 feat(StatusFlatRoundButton): support icon rotation 2022-09-21 18:20:02 +02:00
Pascal Precht f4005ed52c feat(StatusListItem) expose content children and introduce padding properties
These properties are needed to enable more control over how a list
item implementation can look like.

Content children are exposed as follows:

```qml
StatusListItem {
    statusListItemTitle.[...]: ... // StatusBaseText
    sensor.[...]: ... // MouseArea

    rightPadding: ... // default 16
    leftPadding: .. // default 16
}
```
2022-09-21 18:20:02 +02:00
Pascal Precht ae9c1d810f fix(Core): add missing `rotation` property to `StatusIconSettings` 2022-09-21 18:20:02 +02:00
Pascal Precht 52f5c31b3d feat(Components): introduce `StatusChatList`
This commit introduce a new `StautsChatList` component that can be used
to render `StatusChatListItem`s, typically for chat and community views.

The component expects a `chatListItems.model` that has the following properties:

```qml
ListModel {
		ListElement {
				chatId: "0"
				name: "#status"
				chatType: StatusChatListItem.Type.PublicChat
				muted: false
				hasUnreadMessages: false
				hasMention: false
				unreadMessagesCount: 0
				iconColor: "blue"
		}
		...
}
```

It also emits two possible signals:

- `onChatItemSelected(string id)`
- `onChatItemUnmuted(string id)`

Usage:

```qml
import StatusQ.Components 0.1

StatusChatList {
		selectedChatId: "0"
		chatListItems.model: demoChatListItems

		onChatItemSelected: ...
		onChatItemUnmuted: ...
}
```

Closes #100
2022-09-21 18:20:02 +02:00
Pascal Precht 82643816f6 feat(StatusQ.Popups): introduce StatusPopupMenu component
Usage:

```qml
import StatusQ.Popups 0.1

Button {
    onClicked: simpleMenu.popup()
}

StatusPopupMenu {
    id: simpleMenu
    StatusMenuItem {
        text: "One"
    }

    StatusMenuItem {
        text: "Two"
    }

    StatusMenuItem {
        text: "Three"
    }
}
```

Closes #96 #74
2022-09-21 18:20:02 +02:00
B.Melnik 1acc248c79 fix: update position of window to center, add traffic lights 2022-09-21 18:20:02 +02:00
Pascal Precht 8aa421e6a6 fix(StatusQ.Core.Theme): use correct dropshadow color in dark theme 2022-09-21 18:20:02 +02:00
Pascal Precht 80dbec9fcc fix(Core): don't rotate `ColorOverlay` of `StatusIcon`
As discussed in #109, when using the `rotation` property of `StatusIcon`
it seems to just mirror the underlying image source.

It turns out that using `rotation` on the image source is enough to have
the `ColorOverlay` rotate as well. Adding a `rotation` to the overlay will
rotate the source that's already rotated, resulting in a mirrored result.

To fix this, we're removing the additional `rotation` from the overlay.

Fixes #109
2022-09-21 18:20:02 +02:00
Pascal Precht 93a0b2ae21 refactor: make use of `StatusRoundImage`'s built-in loading indicator
Closes #89
2022-09-21 18:20:02 +02:00
B.Melnik 60d3bdaff4 feat(Components): Add StatusSlider
Closes: #13
2022-09-21 18:20:02 +02:00
Pascal Precht f2df495309 feat(Components): introduce `StatusChatToolBar`
Usage:

```qml
import StatusQ.Components 0.1

StatusChatToolBar {
    chatInfoButton.[...]: ... // StatusChatInfoButton
    notificationCount: 1 // default `0`

    onChatInfoButtonClicked: ...
    onMenuButtonClicked: ...
    onNotificationButtonClicked: ...
}
```

Closes #80
2022-09-21 18:20:02 +02:00
Pascal Precht 272752c0b8 feat(Controls): introduce `StatusChatInfoButton`
Usage:

```qml
StatusChatInfoButton {
		title: "Iuri Matias"
		subTitle: "Contact"
		icon.color: Theme.palette.miscColor7 // identicon used as fallback when image source isn't available
		image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
		type: StatusChatInfoButton.Type.OneToOneChat // PublicChat | GroupChat | CommunityChat
		muted: true // default `false`
		pinnedMessagesCount: 1 // default `0`
}
```

Closes: #79
2022-09-21 18:20:02 +02:00
Pascal Precht a13d12dcab fix(StatusNavigationListItem): make click event work again 2022-09-21 18:20:02 +02:00
Pascal Precht e54c46858b fix(Core.Theme): ensure proper nav bar colors is used 2022-09-21 18:20:02 +02:00
Pascal Precht 3784845366 fix(StatusNavBarTabButton): don't change checked state implicitly 2022-09-21 18:20:02 +02:00
Pascal Precht 39f8eae65b fix(StatusAppNavBar): don't try to render chat button if it doesn't exist 2022-09-21 18:20:02 +02:00
Pascal Precht 6c1cb965eb fix(Controls): ensure round buttons expose `hovered` state
Fixes #88
2022-09-21 18:20:02 +02:00
Pascal Precht 3b48df10b3 feat(Components): introduce `StatusDescriptionListItem`
Usage:

```
import StatusQ.Components 0.1

StatusDescriptionListItem {
    title: "Title"
    subTitle: "Subtitle"
}

StatusDescriptionListItem {
    title: "Title"
    subTitle: "Subtitle"
    tooltip.text: "Tooltip"
    icon.name: "info"
    iconButton.onClicked: tooltip.visible = !tooltip.visible
}
```

Closes: #73
2022-09-21 18:20:02 +02:00
Pascal Precht 5b4a5d780a feat(Layout): introduce `StatusAppTwoPanelLayout`
This is a component to easily render two panel layouts used in different
view of Status Desktop. Designed to be used with `StatusAppLayout`

Usage:

```qml
import StatusQ.Layout 0.1

StatusAppLayout {
    ...
    appView: StackView {
        anchors.fill: parent

        initialItem: Component {

            StatusAppTwoPanelLayout {

                leftPanel: Component {...}
                rightPanel: Component {...}
            }
        }
    }
}
```

Closes: #78
2022-09-21 18:20:02 +02:00
Pascal Precht ce2ec48665 feat(Layout): introduce StatusAppLayout component
This introduces a layout component to quickly scaffold a Status Desktop
ui layout.

Usage:

```qml
import StatusQ.Layout 0.1

StatusAppLayout {
    appNavBar: StatusAppNavBar { ... }
    appView: StackView {
        anchors.fill: parent
        initialItem: Component { ... }
    }
}
```

Closes: #77
2022-09-21 18:20:02 +02:00
B.Melnik 4b9f996d06 feat(StatusRoundedImage): add loading indicator option
Closes #56
2022-09-21 18:20:02 +02:00
Pascal Precht 106936a930 fix(StatusFlatRoundButton): use correct hover color 2022-09-21 18:20:02 +02:00
Pascal Precht 19fc81d42f feat(StatusBadge): introduce `borderColor` and `hoverBorderColor`
`StatusBadge` uses a border with same color as its underlying component
to create "fake space" (see `StatusNavTabButton`).

The color depends on the parent component background and its state,
which the `StatusBadge` doesn't know about by itself, so the border color
has to be set explicity whereever it's desired.

This commit introduces (default) colors for the border based on where
badge is used.
2022-09-21 18:20:02 +02:00
Pascal Precht 98e64d8eec fix(StatusBadge): use medium font weight for badge text 2022-09-21 18:20:02 +02:00
Pascal Precht 1569a8483a feat(Components): introduce StatusNavigationListItem
This introduces the `StatusNavigationListItem` that can be used to render
menu navigation items in secondary panels, such as the profile panel.

Usage:

```
import StatusQ.Components 0.1

StatusNavigationListItem {
    title: "Menu Item"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
    badge.value: 1
}
StatusNavigationListItem {
    title: "Menu Item (selected)"
    selected: true
    icon.name: "info"
    badge.value: 1
}
```

Closes #72
2022-09-21 18:20:02 +02:00
Pascal Precht 419820cb3d feat(Core): introduce StatusIconBackgroundSettings
This is a settings object to complement the existing `StatusIconSettings`.
Some components, like `StatusRoundIcon` need to be able to configure the
surroundings of the icon their rendering.

In such cases, `StatusIconBackgroundSettings` expose an API that give consumers
a way to configure things like background color, width, height and radius.
2022-09-21 18:20:02 +02:00
Pascal Precht e1c9570e89 feat(Components): introduce StatusChatListItem
This introduces the brand new `StatusChatListItem` which can be used
to render channels, one-to-one chats and community channels in Status
applications.

The component can be used as follows:

```qml
import Status.Components 0.1

StatusChatListItem {
    name: "channel-name" // name of channel or user
    type: StatusChatListItem.Type.PublicChat // GroupChat | CommunityChat | OneToOneChat
    image.source: "profile/image/source" // uses letter identicon instead of not supplied
    hasUnreadMessages: true // default `false`
    badge.value: 1 // default `0`
    muted: true // `default `false`
    selected: true // default `false`

    onUnmute: ... // signal when unmute icon is clicked
}
```

Closes #65
2022-09-21 18:20:02 +02:00
Pascal Precht 359787835d fix(Core): disable StatusIcon ColorOverlay if no color is supplied
This is needed to have the underlying SVG's color bleed through and
make use of the image's opacity at the same time.

Using `ColorOverlay` together with (half) transparent colors doesn't
work very well as it makes the underlying SVG color come through,
result in wrong colors.

Applying `opacity` on the image itself cause the `ColorOverlay` to
reduce in opacity as well. So in order to work with transparent
colors, we need a way to turn of the ColorOverlay and work with the
Image's opacity, which is what this change enables.
2022-09-21 18:20:02 +02:00
B.Melnik 770338a658 refactor(Controls): make use of newly introduced StatusIconSettings in button controls
Closes #57
2022-09-21 18:20:02 +02:00
B.Melnik 6dc77f2ec3 fix: hover effect for StatusFlatRoundButton
Closes: #58
2022-09-21 18:20:02 +02:00
Pascal Precht fcb6847cc9 feat(Components): introduce `StatusListItem` component
This introduces a base list item component that is used in many different
places across Status Desktop. The component is configurable and allows for
child component customization.

Usage:

```qml
StatusListItem {
    title: "Title"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
    label: "Some label"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
    label: "Some label"
    components: [
        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }
        ...
    ]
}
```

Closes #19
2022-09-21 18:20:02 +02:00
Pascal Precht ebb0b62005 feat(Core): introduce `StatusImageSettings`
Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61,
this commit introduces `StatusImageSettings` to expose a consisten image
API across components.
2022-09-21 18:20:02 +02:00
Pascal Precht 9cbdf4fa97 feat(Components): introduce `StatusRoundIcon` component
This commit introduces a `StatusRoundIcon` component which renders
a `StatusIcon` inside a rounded rectangle.

This is similar to `StatusRoundButton`, just that it isn't a clickable
component.

With these changes, we also introduce a new `StatusIconSettings` config
object that can be used across component that need icon configuration.

The configuration includes the following properties:

- `name` - Name of the icon and used to locate the asset
- `width`
- `height`

Closes #53
2022-09-21 18:20:02 +02:00
Pascal Precht 8b7911cff9 fix(Components): add proper foreground color for StatusBadge
Fixes #59
2022-09-21 18:20:02 +02:00
Pascal Precht a3525c63e3 feat(StatusIconTabButton): introduce image loading state and fallback
This commit introduces a loading indicator for cases where `icon.source`
is set (a custom image/icon) to improve UX of the component.

It also falls back to a letter identicon in case loading the image source
wasn't successful.

Usage:

```
StatusIconTabButton {
    icon.source: "SOME URL THAT CAN'T BE RESOLVED"
    icon.color: "red" // in case fallback is used, icon.color will be gray by default
    name: "Some channel" // used to generated letter identicon as fallback
}
```

Closes #37
2022-09-21 18:20:02 +02:00
Pascal Precht d7eb4ab4b3 fix(StatusRadioButton): ensure control label as correct color
Closes #51
2022-09-21 18:20:02 +02:00
Pascal Precht 9f6f36f571 refactor(sandbox): rely on global `Theme` instead of theme prop 2022-09-21 18:20:02 +02:00
B.Melnik d7db8dc0df chore: add StatusCheckBox
Closes: #10
2022-09-21 18:20:02 +02:00
B.Melnik 96a5b3b55a chore: add StatusRadioButton
Closes #11
2022-09-21 18:20:02 +02:00
B.Melnik f185b892ea feat: add StatusSwitch
Closes #12
2022-09-21 18:20:02 +02:00
Pascal Precht a1e721bfc3 feat(Layout): introduce StatusAppNavBar
This commit introduces a new `StatusAppNavBar` component that can be used
to create a Status application's tab bar for dedicated tab sections such as
chat, profile, wallet etc.

The component is build in a way that it support declarative and imperative usage
where necessary.

In its most simple form, a `StatusAppNavBar` comes with a single tab button
for the chat section. Such button has to be of type `StatusNavBarTabButton`:

```qml
import StatusQ.Layout 0.1

StatusAppNavBar {
    navBarChatButton: StatusNavBarTabButton {
        icon.name: "chat"
        badge.value: 33
        badge.visible: true
        tooltip.text: "Chat"
    }
}
```

In addition, it's possible to specify a list of `StatusNavBarTabButton` for
other sections of the application using the `navBarTabButtons` property:

```qml

StatusAppNavBar {
    ...
    navBarTabButtons: [
        StatusNavBarTabButton {
            icon.name: "wallet"
            tooltip.text: "Wallet"
        },
        StatusNavBarTabButton {
            icon.name: "browser"
            tooltip.text: "Browser"
        },
        StatusNavBarTabButton {
            icon.name: "status-update"
            tooltip.text: "Timeline"
        }
    ]
}
```

Lastly, when desired to render tabs for Status community, which can grow
in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons`
property that can have a `model` and a `delegate`. The `delegate` should also
be a `StatusNavBarTabButton`:

```qml

StatusAppNavBar {
    ...
    navBarCommunityTabButtons.model: someModel.communities

    navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
        name: model.name
        tooltip.text: model.name
        anchors.horizontalCenter: parent.horizontalCenter
    }
}
```

The amount of community tab buttons can grow as they need until their dedicated
area becomes scrollable, at which point all `navBarTabButtons` will stick to the
bottom of `StatusAppNavBar`.

Closes #18
2022-09-21 18:20:02 +02:00
B.Melnik a3c3091c5d feat:Add buttons components 2022-09-21 18:20:02 +02:00
B.Melnik 65991fe559 chore: remove title bar example
Co-authored-by: Pascal Precht <pascal.precht@gmail.com>
2022-09-21 18:20:02 +02:00
Pascal Precht a9df397e71 feat(Controls): introduce StatusNavBarTabButton
This component is used to render application tabs in the application
nav bar that is yet to be implemented.

`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.

Usage:

```
StatusNavBarTabButton {
    checked: true/false // whether or not it's 'active'
    name: "string" // used to render a `StatusLetterIdenticon`
    badge.value: 30 // `StatusBadge` is exposed as `badge`
    tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
    icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```

Closes #17
2022-09-21 18:20:02 +02:00
Pascal Precht cc6d28b7ce feat(Controls): introduce StatusToolTip component
This moves the `StatusToolTip` component into `StatusQ` and applies some of
the changes done by @jrainville in https://github.com/status-im/status-desktop/pull/2447.

Usage:

```
import StatusQ.Controls 0.1

Button {
    text: "Hover me!"
    StatusToolTip {
        visible: parent.hovered
        text: "Top"
        orientation: StatusToolTip.Orientation.Top // default: Top
    }
}
```

Closes #14
2022-09-21 18:20:02 +02:00
Pascal Precht 791d3e275a feat(Core.Controls): introduce StatusIconTabButton component
This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight
adjustments:

- removes `iconColor` in favour of `icon.color`
- removes `disabledColor` (main reason being that we don't show disabled buttons of this type)

This button handles various cases:

1. Icon tab buttons - An icon button used in Status Desktop for different sections
2. Letter identicon button - Used for community sections that don't have a profile picture
3. Image icon button - Used for community sections that do have a profile picture

Which type is rendered depends on the configuration of the component as shown
in the usage.

Usage:

```
import StatusQ.Controls 0.1

// When `icon.name` is set, it renders a `StatusIcon` button
StatusIconTabButton {
    icon.name: "chat"
}

// When `icon.source` is set, it renders a `StatusRoundedImage` button
StatusIconTabButton {
    icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}

// When `name` is set, it renders a `StatusLetterIdenticon` button
StatusIconTabButton {
    name: "#status"
}

```

Closes #16
2022-09-21 18:20:02 +02:00
Pascal Precht b2576f0e5e feat(Components): introduce StatusBadge component
This component can be used to render badges with additional information
as seen in the navbar tab buttons and menu items.

Here's how it can be used:

```
StatusBadge {
  value: 2
}
```

By default and based on value, StatusBadge will change its width.
If no value is provided, it renders as badge indicator as seen in the profile
tab button.

Closes #15
2022-09-21 18:20:02 +02:00
Pascal Precht 50506b40a1 feat(Components): introduce StatusRoundedImage
A component that renders an image as a circle, given some URL.

Usage:

```
StatusRoundedImage {
    image.source: "..." // some url
}
```

Closes #32
2022-09-21 18:20:02 +02:00
Pascal Precht ac90eff84c feat(Core.Theme): expose solid black and white on `ThemePalette`
Status color palettes don't specify a solid black and white that stay
black and white in both themes.

This commit introduces `black` and `white` as solid colors to `ThemePalette`
so they are automatically inherited in all built-in and custom themes.
2022-09-21 18:20:02 +02:00
Pascal Precht ad5c6c555b fix(Core.Theme): remove redundant theme properties
This slipped through in #31
2022-09-21 18:20:02 +02:00
Pascal Precht 554400e9d2 feat(Components): introduce StatusLetterIdenticon
This introduces the `StatusLetterIdenticon` component to StatusQ.

Usage:

```
import StatusQ.Components 0.1

StatusLetterIdenticon {
    name: "#status"
}
```

Closes #28
2022-09-21 18:20:02 +02:00
Pascal Precht 6f0e63268f fix(Core.Theme): ensure all font weight are available
Turns out, even though we only use one and the same `font.family` name
throughout our components (namely `Inter` and/or `InterStatus`),
`font.weight` properties set to anything other than `Font.Normal` (which is the default),
will not apply unless all font weights have actually been loaded.

Unfortunately we can put a `FontLoader` as direct child in a `ThemePalette`
so we have to make it actual properties.

These properties aren't really used anywhere and merely serve as a place
to load font assets.

Fixes #30
2022-09-21 18:20:02 +02:00
Pascal Precht f999f30d44 feat(Components): introduce StatusLoadingIndicator
A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.

Usage:

```
StatusLoadingIndicator {
    width: 24 // default: 17
    height: 24 // default: 17
    color: "red" // default: loading asset color
}
```

Closes #7
2022-09-21 18:20:01 +02:00
Pascal Precht eac3896a5d feat(Core): introduce StatusBaseText component
Abstract text component that defaults to Status' `Inter` font.
Also known as `StyledText` in Status Desktop.

This will close #20 as it doesn't make sense to implement multiple
components for a single text type. Size and weight of text can be configured
on a per usage basis.

Closes #20
2022-09-21 18:20:01 +02:00
B.Melnik 6c62e1c20b feat: Set up catalog app (sandbox)
Closes #5
2022-09-21 18:20:01 +02:00
Pascal Precht afe2388c1b feat: introduce theming capability
This commit introduces the theming story discussed in #3.
Once this lands, we'll have a new namespace `StatusQ.Core.Theme` which
can be used as follows:

```qml
import StatusQ.Core.Theme

StatusLightTheme {}
StatusDarkTheme {}

Theme.palette.[SOME_THEME_PROP] // as spec'ed in #3
```

Closes #3
2022-09-21 18:20:01 +02:00
Pascal Precht 36d061bdaa chore: move StatusIcon component to StatusQ
Closes #2
2022-09-21 18:20:01 +02:00