Commit Graph

85 Commits

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

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

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

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

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

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

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

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

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

Usage:

```qml
StatusPopupMenu {

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

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

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

Few things to note:

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

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

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

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

```qml
StatusModal {

    header.image.isIdenticon: ...

    // or

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

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

Closes #258, #259
2021-07-16 08:55:34 +02:00
Pascal Precht 58e8f1cd23 feat(StatusFlatRoundButton): introduce `highlighted` color for secondary type
Closes #245
2021-07-15 13:00:58 +02:00
Pascal Precht e93dab2ba0 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
2021-07-12 13:18:58 +02:00
Pascal Precht 096d4148cd 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.
2021-07-09 14:56:24 +02:00
Pascal Precht 8155d9a218
feat(StatusListItem): add `Danger` type support
Usage:

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

Closes #248
2021-07-09 11:38:05 +02:00
Pascal Precht 531e54f238 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
2021-07-09 11:34:25 +02:00
Alexandra Betouni 51a345866a [#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
2021-07-09 11:16:04 +02:00
Pascal Precht bd383e8746 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
2021-07-08 11:42:08 +02:00
B.Melnik 1321760442
feat(Controls): introduce StatusBaseInput
Usage: The same interface like TextField

Closes: #106
2021-07-08 11:30:31 +02:00
Pascal Precht 34df0f0dab fix(StatusChatListItem): ensure chat name elides when it's too long
Closes #151
2021-06-29 09:46:08 +02:00
Pascal Precht 141872c2a5 fix(StatusChatListItem): ensure public chat names are prefixed with '#'
Closes #191
2021-06-25 12:42:19 +02:00
Pascal Precht a98bae48dd refactor(StatusPopupMenu): expose category and chat id via open handler
Closes #192
2021-06-25 12:42:08 +02:00
Pascal Precht 7a2648f69f 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
2021-06-24 16:27:25 +02:00
Pascal Precht baa663cea6 feat(Components): introduce `StatusContactRequestsIndicatorListItem`
Usage:

```qml
import StatusQ.Components 0.1

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

Closes #175
2021-06-24 16:09:58 +02:00
Pascal Precht a6262f0a34 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
2021-06-24 16:01:47 +02:00
Pascal Precht 70332a3f41 fix(StatusChatList): expect `model.color` instead of `iconColor` prop 2021-06-24 15:59:45 +02:00
Pascal Precht 34b35318bc fix(StatusListItem): ensure icon background in secondary type works correctly 2021-06-24 15:58:28 +02:00
Pascal Precht 8a684a7d8a
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.
2021-06-22 10:37:59 +02:00
B.Melnik e49b58b94d
feat(Popups): Add StatusModal 2021-06-21 13:04:34 +02:00
Pascal Precht 4588d5976d feat(sandbox): introduce first part of profile view for reference app 2021-06-18 13:51:33 +02:00
Pascal Precht 507703af18 feat(Components): introduce `StatusListSectionHeadline`
Usage:

```qml
import StatusQ.Components 0.1

StatusListSectionHeadline {
    text: "Settings"
}
```

Closes #164
2021-06-18 12:12:04 +02:00
Pascal Precht 40617cd710 feat(Components): introduce `StatusNavigationPanelHeadline`
Component to render navigation panel headlines.

Usage:

```qml
import StatusQ.Components 0.1

StatusNavigationPanelHeadline {
    text: "Profile"
}
```

Closes #162
2021-06-18 12:11:50 +02:00
Pascal Precht 7bca27455f
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
2021-06-16 11:24:18 +02:00
Pascal Precht 9982c3df52 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
2021-06-16 11:11:34 +02:00
Pascal Precht 4f6ff27f90 chore: introduce build script for sandbox app
Closes #148
2021-06-16 11:11:04 +02:00
B.Melnik 1a7c213395
fix: make release build work
I add several files in .qrc file for running app in release mode (CONFIG+=release)
2021-06-16 11:02:52 +02:00
Pascal Precht 454e73a838 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
2021-06-16 11:01:22 +02:00
Pascal Precht 3480609f7a
Revert "Revert "feat: can be used on tablets (#146)""
This reverts commit 59b40c0713.
2021-06-15 11:16:22 +02:00
Pascal Precht 59b40c0713
Revert "feat: can be used on tablets (#146)"
This reverts commit 63be014479.
2021-06-14 16:41:28 +02:00
Boris Melnik 63be014479
feat: can be used on tablets (#146)
Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>
2021-06-14 08:26:16 -04:00
Pascal Precht c9bc9bab11 feat(StatusPopupMenu): make menu items invisible when disabled
Closes #135
2021-06-11 13:54:08 +02:00
Pascal Precht 5e8242dfed 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
2021-06-11 13:53:17 +02:00
Pascal Precht 90bad9e312 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
2021-06-09 09:37:27 +02:00
Pascal Precht f4d211acbb 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
2021-06-08 15:34:15 +02:00
Pascal Precht 916dcc9c7f 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
2021-06-08 13:23:32 +02:00