status-desktop/ui/StatusQ/sandbox/controls/Layout.qml

296 lines
9.8 KiB
QML
Raw Normal View History

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.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
Column {
spacing: 5
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
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.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
}
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
chatInfoButton.pinnedMessagesCount: 1
chatInfoButton.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
}
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1
notificationCount: 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
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
}
}
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
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.visible: true
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: "Chat"
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
}
}
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
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
}
navBarCommunityTabButtons.model: ListModel {
id: buttons
ListElement {
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
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
name: model.name
tooltip.text: model.name
anchors.horizontalCenter: parent.horizontalCenter
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
}
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
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"
}
]
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
}
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
badge.visible: true
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Chat"
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
}
navBarCommunityTabButtons.model: ListModel {
ListElement {
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
}
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
name: model.name
tooltip.text: model.name
anchors.horizontalCenter: parent.horizontalCenter
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
}
navBarTabButtons: [
StatusNavBarTabButton {
icon.name: "wallet"
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "browser"
tooltip.text: "Browser"
}
]
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
}
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
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.visible: true
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: "Chat"
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
}
navBarCommunityTabButtons.model: ListModel {
ListElement {
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
ListElement {
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
ListElement {
name: "Test community"
tooltipText: "Test Community"
}
ListElement {
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
}
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
name: model.name
tooltip.text: model.name
anchors.horizontalCenter: parent.horizontalCenter
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
}
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
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"
}
]
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
}
StatusAppNavBar {
id: test
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
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.visible: true
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: "Chat"
}
navBarCommunityTabButtons.model: ListModel {
ListElement {
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
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"
}
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
}
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
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
tooltip.text: "Profile"
}
]
}
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
}
}