Commit Graph

73 Commits

Author SHA1 Message Date
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
Pascal Precht 1e558b59b0 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
2021-06-08 13:15:20 +02:00
Pascal Precht 09a6f418d7 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
2021-06-04 10:15:02 +02:00
Pascal Precht 092cc9666d chore: add tooltip to theme switch 2021-06-03 16:40:57 +02:00
Pascal Precht 6083fbb1e9 chore: re-introduce reload button 2021-06-03 16:38:34 +02:00
B.Melnik 26aae6d027 fix: update position of window to center, add traffic lights 2021-06-03 16:38:08 +02:00
Pascal Precht 202fb88654 feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
2021-06-01 10:42:34 +02:00
B.Melnik c0ad32a192
feat(Components): Add StatusSlider
Closes: #13
2021-05-28 13:39:32 +02:00
Pascal Precht 1548212e47 refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
2021-05-28 11:57:23 +02:00
Pascal Precht a4421b5b42 feat(Components): introduce `StatusChatToolBar`
Usage:

```qml
import StatusQ.Components 0.1

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

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

Closes #80
2021-05-28 11:56:49 +02:00
Pascal Precht 8a79918284 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
2021-05-28 11:54:50 +02:00
Pascal Precht 4a25ca0270 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
2021-05-27 15:03:54 +02:00
Pascal Precht 041c11fb94 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.
2021-05-26 15:32:59 +02:00