041c11fb94
`StatusBadge` uses a border with same color as its underlying component to create "fake space" (see `StatusNavTabButton`). The color depends on the parent component background and its state, which the `StatusBadge` doesn't know about by itself, so the border color has to be set explicity whereever it's desired. This commit introduces (default) colors for the border based on where badge is used.
269 lines
8.0 KiB
QML
269 lines
8.0 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Controls 2.14
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Layout 0.1
|
|
|
|
GridLayout {
|
|
columns: 6
|
|
columnSpacing: 5
|
|
rowSpacing: 5
|
|
|
|
Button {
|
|
id: btn
|
|
text: "Append"
|
|
onClicked: {
|
|
buttons.append({
|
|
name: "Test community",
|
|
tooltipText: "Test Community"
|
|
})
|
|
}
|
|
}
|
|
|
|
StatusAppNavBar {
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
icon.name: "chat"
|
|
badge.value: 33
|
|
badge.visible: true
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
tooltip.text: "Chat"
|
|
}
|
|
}
|
|
|
|
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"
|
|
}
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
id: buttons
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
name: model.name
|
|
tooltip.text: model.name
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
navBarTabButtons: [
|
|
StatusNavBarTabButton {
|
|
icon.name: "wallet"
|
|
tooltip.text: "Wallet"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "browser"
|
|
tooltip.text: "Browser"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "status-update"
|
|
tooltip.text: "Timeline"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "profile"
|
|
badge.visible: true
|
|
badge.anchors.rightMargin: 4
|
|
badge.anchors.topMargin: 5
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
|
|
tooltip.text: "Profile"
|
|
}
|
|
]
|
|
}
|
|
|
|
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"
|
|
}
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
name: model.name
|
|
tooltip.text: model.name
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
navBarTabButtons: [
|
|
StatusNavBarTabButton {
|
|
icon.name: "wallet"
|
|
tooltip.text: "Wallet"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "browser"
|
|
tooltip.text: "Browser"
|
|
}
|
|
]
|
|
}
|
|
|
|
StatusAppNavBar {
|
|
navBarChatButton: StatusNavBarTabButton {
|
|
icon.name: "chat"
|
|
badge.value: 33
|
|
badge.visible: true
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
tooltip.text: "Chat"
|
|
}
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
name: model.name
|
|
tooltip.text: model.name
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
navBarTabButtons: [
|
|
StatusNavBarTabButton {
|
|
icon.name: "wallet"
|
|
tooltip.text: "Wallet"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "browser"
|
|
tooltip.text: "Browser"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "status-update"
|
|
tooltip.text: "Timeline"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "profile"
|
|
badge.visible: true
|
|
badge.anchors.rightMargin: 4
|
|
badge.anchors.topMargin: 5
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
|
|
tooltip.text: "Profile"
|
|
}
|
|
]
|
|
}
|
|
|
|
StatusAppNavBar {
|
|
id: test
|
|
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"
|
|
}
|
|
|
|
navBarCommunityTabButtons.model: ListModel {
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
ListElement {
|
|
name: "Test community"
|
|
tooltipText: "Test Community"
|
|
}
|
|
}
|
|
|
|
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
|
name: model.name
|
|
tooltip.text: model.name
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
navBarTabButtons: [
|
|
StatusNavBarTabButton {
|
|
icon.name: "wallet"
|
|
tooltip.text: "Wallet"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "browser"
|
|
tooltip.text: "Browser"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "status-update"
|
|
tooltip.text: "Timeline"
|
|
},
|
|
StatusNavBarTabButton {
|
|
icon.name: "profile"
|
|
badge.visible: true
|
|
badge.anchors.rightMargin: 4
|
|
badge.anchors.topMargin: 5
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
|
|
tooltip.text: "Profile"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|