328 Commits

Author SHA1 Message Date
Pascal Precht
9bf98a1ede Revert "feat: can be used on tablets (#146)"
This reverts commit 63be01447930494f2afc61d5212f3c84ee1509e8.
2022-09-21 18:20:02 +02:00
Boris Melnik
7e9a76dbe7 feat: can be used on tablets (#146)
Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>
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
Pascal Precht
cd2fa3d0b7 chore: add tooltip to theme switch 2022-09-21 18:20:02 +02:00
Pascal Precht
aecbb443de chore: re-introduce reload button 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
4e25f584cc feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
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
cea1d68308 refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
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