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
|
2021-05-27 14:28:39 +00:00
|
|
|
import StatusQ.Components 0.1
|
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 StatusQ.Layout 0.1
|
2022-02-01 09:11:40 +00:00
|
|
|
import StatusQ.Popups 0.1
|
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
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
Column {
|
2022-05-31 09:21:32 +00:00
|
|
|
spacing: 10
|
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
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusChatToolBar {
|
2022-05-31 09:21:32 +00:00
|
|
|
toolbarComponent: chatInfoButton1
|
|
|
|
|
width: 518
|
|
|
|
|
|
|
|
|
|
Component {
|
|
|
|
|
id: chatInfoButton1
|
|
|
|
|
|
|
|
|
|
StatusChatInfoButton {
|
|
|
|
|
width: Math.min(implicitWidth, parent.width)
|
|
|
|
|
title: "Some contact"
|
|
|
|
|
subTitle: "Contact"
|
|
|
|
|
icon.color: Theme.palette.miscColor7
|
|
|
|
|
type: StatusChatInfoButton.Type.OneToOneChat
|
|
|
|
|
}
|
|
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusChatToolBar {
|
2022-05-31 09:21:32 +00:00
|
|
|
toolbarComponent: chatInfoButton2
|
|
|
|
|
width: 518
|
|
|
|
|
|
|
|
|
|
Component {
|
|
|
|
|
id: chatInfoButton2
|
|
|
|
|
StatusChatInfoButton {
|
|
|
|
|
width: Math.min(implicitWidth, parent.width)
|
|
|
|
|
title: "Some contact"
|
|
|
|
|
subTitle: "Contact"
|
|
|
|
|
icon.color: Theme.palette.miscColor7
|
|
|
|
|
type: StatusChatInfoButton.Type.PublicChat
|
|
|
|
|
pinnedMessagesCount: 1
|
|
|
|
|
muted: true
|
|
|
|
|
}
|
|
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2022-05-31 09:21:32 +00:00
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusChatToolBar {
|
|
|
|
|
notificationCount: 1
|
2022-05-31 09:21:32 +00:00
|
|
|
toolbarComponent: chatInfoButton3
|
|
|
|
|
width: 518
|
|
|
|
|
|
|
|
|
|
Component {
|
|
|
|
|
id: chatInfoButton3
|
|
|
|
|
|
|
|
|
|
StatusChatInfoButton {
|
|
|
|
|
width: Math.min(implicitWidth, parent.width)
|
|
|
|
|
title: "Some contact"
|
|
|
|
|
subTitle: "Contact"
|
|
|
|
|
icon.color: Theme.palette.miscColor7
|
|
|
|
|
type: StatusChatInfoButton.Type.OneToOneChat
|
|
|
|
|
pinnedMessagesCount: 1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusChatToolBar {
|
|
|
|
|
notificationCount: 1
|
|
|
|
|
toolbarComponent: tagSelector
|
|
|
|
|
width: 518
|
|
|
|
|
|
|
|
|
|
Component {
|
|
|
|
|
id: tagSelector
|
|
|
|
|
|
|
|
|
|
StatusTagSelector {
|
|
|
|
|
namesModel: ListModel {
|
|
|
|
|
ListElement {
|
|
|
|
|
publicId: "0x0"
|
|
|
|
|
name: "Maria"
|
|
|
|
|
icon: ""
|
|
|
|
|
isIdenticon: false
|
|
|
|
|
onlineStatus: 3
|
2022-05-31 15:18:28 +00:00
|
|
|
isReadonly: true
|
|
|
|
|
tagIcon: "crown"
|
2022-05-31 09:21:32 +00:00
|
|
|
}
|
|
|
|
|
ListElement {
|
|
|
|
|
publicId: "0x1"
|
|
|
|
|
name: "James"
|
|
|
|
|
icon: ""
|
|
|
|
|
isIdenticon: false
|
|
|
|
|
onlineStatus: 1
|
2022-05-31 15:18:28 +00:00
|
|
|
isReadonly: false
|
|
|
|
|
tagIcon: ""
|
2022-05-31 09:21:32 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
toLabelText: qsTr("To: ")
|
|
|
|
|
warningText: qsTr("USER LIMIT REACHED")
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
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
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
Row {
|
|
|
|
|
spacing: 5
|
|
|
|
|
Button {
|
|
|
|
|
id: btn
|
|
|
|
|
text: "Append"
|
|
|
|
|
onClicked: {
|
|
|
|
|
buttons.append({
|
|
|
|
|
name: "Test community",
|
|
|
|
|
tooltipText: "Test Community"
|
|
|
|
|
})
|
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
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
QtObject {
|
|
|
|
|
id: appSectionType
|
|
|
|
|
readonly property int chat: 0
|
|
|
|
|
readonly property int community: 1
|
|
|
|
|
readonly property int wallet: 2
|
|
|
|
|
readonly property int browser: 3
|
2021-11-26 21:45:42 +00:00
|
|
|
readonly property int nodeManagement: 4
|
|
|
|
|
readonly property int profileSettings: 5
|
2022-02-01 09:11:40 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusAppNavBar {
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
sectionModel: ListModel {
|
|
|
|
|
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
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
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusAppNavBar {
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
communityTypeRole: "sectionType"
|
|
|
|
|
communityTypeValue: appSectionType.community
|
|
|
|
|
sectionModel: ListModel {
|
|
|
|
|
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
2021-11-26 21:45:42 +00:00
|
|
|
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
property bool communityAdded: false
|
|
|
|
|
|
|
|
|
|
filterRegularItem: function(item) {
|
|
|
|
|
if(item.sectionType === appSectionType.community)
|
|
|
|
|
if(communityAdded)
|
|
|
|
|
return false
|
|
|
|
|
else
|
|
|
|
|
communityAdded = true
|
|
|
|
|
|
|
|
|
|
return true
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
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
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterCommunityItem: function(item) {
|
|
|
|
|
return item.sectionType === appSectionType.community
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
2021-05-27 14:28:39 +00:00
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
2022-02-01 09:11:40 +00:00
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
communityNavBarButton: StatusNavBarTabButton {
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
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"
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
|
|
|
|
|
|
StatusMenuItem {
|
|
|
|
|
text: qsTr("Leave Community")
|
2022-08-02 10:40:18 +00:00
|
|
|
icon.name: "arrow-left"
|
2022-02-01 09:11:40 +00:00
|
|
|
type: StatusMenuItem.Type.Danger
|
|
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
2022-02-01 09:11:40 +00:00
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusAppNavBar {
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
communityTypeRole: "sectionType"
|
|
|
|
|
communityTypeValue: appSectionType.community
|
|
|
|
|
sectionModel: ListModel {
|
|
|
|
|
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
property bool communityAdded: false
|
|
|
|
|
|
|
|
|
|
filterRegularItem: function(item) {
|
|
|
|
|
if(item.sectionType === appSectionType.community)
|
|
|
|
|
if(communityAdded)
|
|
|
|
|
return false
|
|
|
|
|
else
|
|
|
|
|
communityAdded = true
|
|
|
|
|
|
|
|
|
|
return true
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterCommunityItem: function(item) {
|
|
|
|
|
return item.sectionType === appSectionType.community
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
2021-05-27 14:28:39 +00:00
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
2022-02-01 09:11:40 +00:00
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
communityNavBarButton: StatusNavBarTabButton {
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
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"
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
|
|
|
|
|
|
StatusMenuItem {
|
|
|
|
|
text: qsTr("Leave Community")
|
2022-08-02 10:40:18 +00:00
|
|
|
icon.name: "arrow-left"
|
2022-02-01 09:11:40 +00:00
|
|
|
type: StatusMenuItem.Type.Danger
|
|
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
2022-02-01 09:11:40 +00:00
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusAppNavBar {
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
communityTypeRole: "sectionType"
|
|
|
|
|
communityTypeValue: appSectionType.community
|
|
|
|
|
sectionModel: ListModel {
|
|
|
|
|
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
2021-11-26 21:45:42 +00:00
|
|
|
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
property bool communityAdded: false
|
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
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterRegularItem: function(item) {
|
|
|
|
|
if(item.sectionType === appSectionType.community)
|
|
|
|
|
if(communityAdded)
|
|
|
|
|
return false
|
|
|
|
|
else
|
|
|
|
|
communityAdded = true
|
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
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
return true
|
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
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterCommunityItem: function(item) {
|
|
|
|
|
return item.sectionType === appSectionType.community
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
2021-05-27 14:28:39 +00:00
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
2022-02-01 09:11:40 +00:00
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
communityNavBarButton: StatusNavBarTabButton {
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
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"
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
|
|
|
|
|
|
StatusMenuItem {
|
|
|
|
|
text: qsTr("Leave Community")
|
2022-08-02 10:40:18 +00:00
|
|
|
icon.name: "arrow-left"
|
2022-02-01 09:11:40 +00:00
|
|
|
type: StatusMenuItem.Type.Danger
|
|
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
2022-02-01 09:11:40 +00:00
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:28:39 +00:00
|
|
|
StatusAppNavBar {
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
communityTypeRole: "sectionType"
|
|
|
|
|
communityTypeValue: appSectionType.community
|
|
|
|
|
sectionModel: ListModel {
|
|
|
|
|
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
|
|
|
|
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
|
|
|
|
|
ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
|
|
|
|
|
ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
|
|
|
|
|
ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
|
|
|
|
|
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
|
|
|
|
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
2021-11-26 21:45:42 +00:00
|
|
|
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
property bool communityAdded: false
|
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
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterRegularItem: function(item) {
|
|
|
|
|
if(item.sectionType === appSectionType.community)
|
|
|
|
|
if(communityAdded)
|
|
|
|
|
return false
|
|
|
|
|
else
|
|
|
|
|
communityAdded = true
|
|
|
|
|
|
|
|
|
|
return true
|
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
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
filterCommunityItem: function(item) {
|
|
|
|
|
return item.sectionType === appSectionType.community
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
2021-05-27 14:28:39 +00:00
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
2022-02-01 09:11:40 +00:00
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
|
|
|
|
|
2022-02-01 09:11:40 +00:00
|
|
|
communityNavBarButton: StatusNavBarTabButton {
|
|
|
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
|
name: model.icon.length > 0? "" : model.name
|
|
|
|
|
icon.name: model.icon
|
|
|
|
|
icon.source: model.image
|
|
|
|
|
tooltip.text: model.name
|
|
|
|
|
autoExclusive: true
|
|
|
|
|
checked: model.active
|
|
|
|
|
badge.value: model.notificationsCount
|
|
|
|
|
badge.visible: model.hasNotification
|
|
|
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
|
|
|
badge.border.width: 2
|
|
|
|
|
|
|
|
|
|
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"
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
|
|
|
|
|
|
StatusMenuItem {
|
|
|
|
|
text: qsTr("Leave Community")
|
2022-08-02 10:40:18 +00:00
|
|
|
icon.name: "arrow-left"
|
2022-02-01 09:11:40 +00:00
|
|
|
type: StatusMenuItem.Type.Danger
|
|
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
2022-02-01 09:11:40 +00:00
|
|
|
}
|
2021-05-27 14:28:39 +00:00
|
|
|
}
|
2022-02-01 09:11:40 +00:00
|
|
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
