Commit Graph

1 Commits

Author SHA1 Message Date
Pascal Precht 0dfd39afe2 feat(Layout): introduce StatusAppNavBar
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
2021-05-19 12:00:05 +02:00