Commit Graph

86 Commits

Author SHA1 Message Date
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
B.Melnik 44b275f23d
feat(StatusRoundedImage): add loading indicator option
Closes #56
2021-05-27 14:53:49 +02:00
Pascal Precht 82e34d64a6 fix(StatusFlatRoundButton): use correct hover color 2021-05-26 15:33:26 +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
Pascal Precht cb9492abed fix(StatusBadge): use medium font weight for badge text 2021-05-26 15:32:35 +02:00
Pascal Precht 6327566889 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
2021-05-26 10:28:04 +02:00
Pascal Precht a4e62fb2cf 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.
2021-05-26 10:26:08 +02:00
Pascal Precht b40d427d88 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
2021-05-26 10:22:59 +02:00