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-11 14:25:46 +00:00
|
|
|
import QtQuick 2.14
|
|
|
|
|
import QtQuick.Controls 2.14
|
|
|
|
|
import QtQuick.Layouts 1.14
|
|
|
|
|
|
|
|
|
|
import StatusQ.Core 0.1
|
|
|
|
|
import StatusQ.Core.Theme 0.1
|
|
|
|
|
import StatusQ.Controls 0.1
|
|
|
|
|
import StatusQ.Layout 0.1
|
|
|
|
|
|
|
|
|
|
GridLayout {
|
|
|
|
|
columns: 6
|
|
|
|
|
columnSpacing: 5
|
|
|
|
|
rowSpacing: 5
|
|
|
|
|
|
|
|
|
|
Button {
|
|
|
|
|
id: btn
|
|
|
|
|
text: "Append"
|
|
|
|
|
onClicked: {
|
|
|
|
|
buttons.append({
|
|
|
|
|
name: "Test community",
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusAppNavBar {
|
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
|
|
|
icon.name: "chat"
|
|
|
|
|
badge.value: 33
|
|
|
|
|
badge.visible: true
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
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-11 14:25:46 +00:00
|
|
|
tooltip.text: "Chat"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusAppNavBar {
|
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
|
|
|
icon.name: "chat"
|
|
|
|
|
badge.value: 33
|
|
|
|
|
badge.visible: true
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
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-11 14:25:46 +00:00
|
|
|
tooltip.text: "Chat"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
|
|
|
id: buttons
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
|
|
|
name: model.name
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarTabButtons: [
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "wallet"
|
|
|
|
|
tooltip.text: "Wallet"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "browser"
|
|
|
|
|
tooltip.text: "Browser"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "status-update"
|
|
|
|
|
tooltip.text: "Timeline"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "profile"
|
|
|
|
|
badge.visible: true
|
|
|
|
|
badge.anchors.rightMargin: 4
|
|
|
|
|
badge.anchors.topMargin: 5
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
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-11 14:25:46 +00:00
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
tooltip.text: "Profile"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusAppNavBar {
|
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
|
|
|
icon.name: "chat"
|
|
|
|
|
badge.value: 33
|
|
|
|
|
badge.visible: true
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
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-11 14:25:46 +00:00
|
|
|
tooltip.text: "Chat"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
|
|
|
name: model.name
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarTabButtons: [
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "wallet"
|
|
|
|
|
tooltip.text: "Wallet"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "browser"
|
|
|
|
|
tooltip.text: "Browser"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusAppNavBar {
|
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
|
|
|
icon.name: "chat"
|
|
|
|
|
badge.value: 33
|
|
|
|
|
badge.visible: true
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
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-11 14:25:46 +00:00
|
|
|
tooltip.text: "Chat"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
|
|
|
name: model.name
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarTabButtons: [
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "wallet"
|
|
|
|
|
tooltip.text: "Wallet"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "browser"
|
|
|
|
|
tooltip.text: "Browser"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "status-update"
|
|
|
|
|
tooltip.text: "Timeline"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "profile"
|
|
|
|
|
badge.visible: true
|
|
|
|
|
badge.anchors.rightMargin: 4
|
|
|
|
|
badge.anchors.topMargin: 5
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
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-11 14:25:46 +00:00
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
tooltip.text: "Profile"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusAppNavBar {
|
|
|
|
|
id: test
|
|
|
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
|
|
|
icon.name: "chat"
|
|
|
|
|
badge.value: 33
|
|
|
|
|
badge.visible: true
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
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-11 14:25:46 +00:00
|
|
|
tooltip.text: "Chat"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
name: "Test community"
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
|
|
|
name: model.name
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navBarTabButtons: [
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "wallet"
|
|
|
|
|
tooltip.text: "Wallet"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "browser"
|
|
|
|
|
tooltip.text: "Browser"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "status-update"
|
|
|
|
|
tooltip.text: "Timeline"
|
|
|
|
|
},
|
|
|
|
|
StatusNavBarTabButton {
|
|
|
|
|
icon.name: "profile"
|
|
|
|
|
badge.visible: true
|
|
|
|
|
badge.anchors.rightMargin: 4
|
|
|
|
|
badge.anchors.topMargin: 5
|
2021-05-26 10:23:24 +00:00
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
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-11 14:25:46 +00:00
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
tooltip.text: "Profile"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|