Commit Graph

93 Commits

Author SHA1 Message Date
Pascal Precht de1282b40e
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-15 16:27:39 +02:00
Pascal Precht 9c76688929
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.
2021-06-15 16:10:43 +02:00
Pascal Precht e3d6c7a4fc
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
2021-06-15 16:07:24 +02:00
Pascal Precht ef7a75195e
feat(StatusPopupMenu): introduce `openHandler`
Similar to `closeHandler`, StatusPopupMenu can now have a customized `openHandler`
to run custom logic on open.
2021-06-15 16:04:41 +02:00
Pascal Precht 2db3c30a26
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-15 12:17:51 +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 e5e96af538 fix(StatusListItem): various fixes w.r.t. sensor, icon size etc
This also exposes `statusListItemSubTitle` for more control over
it's appearance, if needed.
2021-06-15 10:48:32 +02:00
Pascal Precht 7c16a9bd3d 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.
2021-06-15 10:47:53 +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 705f140207 fix(StatusNavBarTabButton): fix popup menu positioning 2021-06-14 11:24:03 +02:00
Pascal Precht 040da2a416
fix(StatusNavBarTabButton): ensure click signal is emitted when not menu is provided 2021-06-11 14:11:00 +02: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 175d7a195c 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.
2021-06-11 13:53:06 +02:00
Pascal Precht 1f3aa0bbd5 feat(StatusChatListItem): accept right clicks
Also triggers the context menu in `StatusChatListCategory`.

Fixes #131
2021-06-09 14:55:37 +02:00
Pascal Precht 22eaf6fa99 fix(Components): more popup menu position fine-tuning 2021-06-09 14:55:13 +02:00
Pascal Precht a0fae6ab70 fix: introduce tiny icon versions and make use of them where needed
Closes #128
2021-06-09 14:54:53 +02:00
Pascal Precht 3ea8da0593
fix(StatusChatToolBar): ensure context menu as proper position
Also expose action buttons for more custom control.
2021-06-09 10:42:04 +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 72bdd2d9af feat(StatusChatListCategoryItem): introduce `highlighted` property 2021-06-08 15:34:15 +02:00
Pascal Precht fb51e9d74a feat(StatusPopupMenu): introduce `closeHandler` hook
This enables us to predefine default close handlers for popup
menus.
2021-06-08 15:34:15 +02:00
Pascal Precht 645a3b79a2 feat(StatusChatListCategoryItemButton): introduce `highglighted` property 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 ac80f7f78d fix(StatusChatListItem): use proper font size for chat name 2021-06-08 13:18:35 +02:00
Pascal Precht 3a7a338da8 feat(StatusFlatRoundButton): support icon rotation 2021-06-08 13:18:25 +02:00
Pascal Precht a910d0f2a0 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
}
```
2021-06-08 13:16:15 +02:00
Pascal Precht 341c0ddd0d fix(Core): add missing `rotation` property to `StatusIconSettings` 2021-06-08 13:15:50 +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 70e17b0598 fix(StatusQ.Core.Theme): use correct dropshadow color in dark theme 2021-06-03 15:11:13 +02:00
Pascal Precht 062fe42a81 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
2021-06-03 15:10:52 +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
Pascal Precht b1cbcd256d refactor: make use of `StatusRoundImage`'s built-in loading indicator
Closes #89
2021-06-01 10:42:21 +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 c5ecfe087c fix(StatusNavigationListItem): make click event work again 2021-05-28 11:54:31 +02:00
Pascal Precht 6c84fed783 fix(Core.Theme): ensure proper nav bar colors is used 2021-05-28 11:54:31 +02:00
Pascal Precht b1fe73baa0 fix(StatusNavBarTabButton): don't change checked state implicitly 2021-05-28 11:54:31 +02:00
Pascal Precht d690a0c505 fix(StatusAppNavBar): don't try to render chat button if it doesn't exist 2021-05-28 11:54:31 +02:00
Pascal Precht 98b019463d fix(Controls): ensure round buttons expose `hovered` state
Fixes #88
2021-05-27 16:34:08 +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 af3ca15b7f 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
2021-05-27 15:03:23 +02:00
Pascal Precht 554998dc34 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
2021-05-27 15:01:55 +02:00