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
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
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
`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.
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.
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
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.
Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61,
this commit introduces `StatusImageSettings` to expose a consisten image
API across components.
This is just temporary until #40 lands, but for now it allows for
the scrollable content to be grow which is needed to make pages
with many components usable.
This commit introduces a `StatusRoundIcon` component which renders
a `StatusIcon` inside a rounded rectangle.
This is similar to `StatusRoundButton`, just that it isn't a clickable
component.
With these changes, we also introduce a new `StatusIconSettings` config
object that can be used across component that need icon configuration.
The configuration includes the following properties:
- `name` - Name of the icon and used to locate the asset
- `width`
- `height`
Closes#53
This commit introduces a loading indicator for cases where `icon.source`
is set (a custom image/icon) to improve UX of the component.
It also falls back to a letter identicon in case loading the image source
wasn't successful.
Usage:
```
StatusIconTabButton {
icon.source: "SOME URL THAT CAN'T BE RESOLVED"
icon.color: "red" // in case fallback is used, icon.color will be gray by default
name: "Some channel" // used to generated letter identicon as fallback
}
```
Closes#37
This commit introduces a new `StatusAppNavBar` component that can be used
to create a Status application's tab bar for dedicated tab sections such as
chat, profile, wallet etc.
The component is build in a way that it support declarative and imperative usage
where necessary.
In its most simple form, a `StatusAppNavBar` comes with a single tab button
for the chat section. Such button has to be of type `StatusNavBarTabButton`:
```qml
import StatusQ.Layout 0.1
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
badge.visible: true
tooltip.text: "Chat"
}
}
```
In addition, it's possible to specify a list of `StatusNavBarTabButton` for
other sections of the application using the `navBarTabButtons` property:
```qml
StatusAppNavBar {
...
navBarTabButtons: [
StatusNavBarTabButton {
icon.name: "wallet"
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "browser"
tooltip.text: "Browser"
},
StatusNavBarTabButton {
icon.name: "status-update"
tooltip.text: "Timeline"
}
]
}
```
Lastly, when desired to render tabs for Status community, which can grow
in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons`
property that can have a `model` and a `delegate`. The `delegate` should also
be a `StatusNavBarTabButton`:
```qml
StatusAppNavBar {
...
navBarCommunityTabButtons.model: someModel.communities
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
name: model.name
tooltip.text: model.name
anchors.horizontalCenter: parent.horizontalCenter
}
}
```
The amount of community tab buttons can grow as they need until their dedicated
area becomes scrollable, at which point all `navBarTabButtons` will stick to the
bottom of `StatusAppNavBar`.
Closes#18
This component is used to render application tabs in the application
nav bar that is yet to be implemented.
`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.
Usage:
```
StatusNavBarTabButton {
checked: true/false // whether or not it's 'active'
name: "string" // used to render a `StatusLetterIdenticon`
badge.value: 30 // `StatusBadge` is exposed as `badge`
tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```
Closes#17
This moves the `StatusToolTip` component into `StatusQ` and applies some of
the changes done by @jrainville in https://github.com/status-im/status-desktop/pull/2447.
Usage:
```
import StatusQ.Controls 0.1
Button {
text: "Hover me!"
StatusToolTip {
visible: parent.hovered
text: "Top"
orientation: StatusToolTip.Orientation.Top // default: Top
}
}
```
Closes#14
Pascal Precht
B.Melnik
