re-add statusbar
This commit is contained in:
parent
f609dcaac4
commit
ebfa5352b4
|
|
@ -0,0 +1,186 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.4
|
||||
|
||||
import "../opaque" as Widgets
|
||||
import "../opaque/theme"
|
||||
|
||||
// Statusbar is a app wide 10-25 tall bar that should be place at the bottom of the app that gives network health information
|
||||
// it changes color and text/icon message based on network health. when netowrk is not healthy it is always in fullsized mode
|
||||
// when network is health it reduces to a minimal color strip unless mouse overed / clicked to reveal the text/icons
|
||||
Rectangle {
|
||||
id: statusbar
|
||||
|
||||
property int status: statusDisconnectedInternet
|
||||
|
||||
readonly property int statusDisconnectedInternet: 0
|
||||
readonly property int statusDisconnectedTor: 1
|
||||
readonly property int statusConnecting: 2
|
||||
readonly property int statusOnline: 3
|
||||
|
||||
readonly property int openHeight: 25
|
||||
readonly property int hideHeight: 10
|
||||
|
||||
property bool isHover: false
|
||||
|
||||
height: openHeight
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
Text {
|
||||
id: statusMessage
|
||||
opacity: 0
|
||||
anchors.right: networkStatus.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: 5 * gcd.themeScale
|
||||
|
||||
font.pixelSize: Theme.statusTextSize * gcd.themeScale
|
||||
}
|
||||
|
||||
Widgets.Icon {
|
||||
id: networkStatus
|
||||
opacity: 0
|
||||
anchors.right: connectionStatus.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: 5 * gcd.themeScale
|
||||
height: 18
|
||||
width: 18
|
||||
|
||||
}
|
||||
|
||||
Widgets.Icon {
|
||||
id: connectionStatus
|
||||
opacity: 0
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: 10 * gcd.themeScale
|
||||
height: 18 * gcd.themeScale
|
||||
width: 18 * gcd.themeScale
|
||||
}
|
||||
|
||||
function changeStatus() {
|
||||
if (status == statusDisconnectedInternet) {
|
||||
statusbar.color = Theme.statusbarDisconnectedInternetColor
|
||||
statusMessage.color = Theme.statusbarDisconnectedInternetFontColor
|
||||
networkStatus.iconColor = Theme.statusbarDisconnectedInternetFontColor
|
||||
networkStatus.source = gcd.assetPath + "core/signal_cellular_off-24px.svg"
|
||||
connectionStatus.iconColor = Theme.statusbarDisconnectedInternetFontColor
|
||||
connectionStatus.source = gcd.assetPath + "core/syncing-03.svg"
|
||||
//: Disconnected from the internet, check your connection
|
||||
statusMessage.text = qsTr("network-status-disconnected")
|
||||
show()
|
||||
} else if (status == statusDisconnectedTor) {
|
||||
statusbar.color = Theme.statusbarDisconnectedTorColor
|
||||
statusMessage.color = Theme.statusbarDisconnectedTorFontColor
|
||||
networkStatus.iconColor = Theme.statusbarDisconnectedTorFontColor
|
||||
networkStatus.source = gcd.assetPath + "core/signal_cellular_connected_no_internet_4_bar-24px.svg"
|
||||
connectionStatus.iconColor = Theme.statusbarDisconnectedTorFontColor
|
||||
connectionStatus.source = gcd.assetPath + "core/syncing-03.svg"
|
||||
//: Attempting to connect to Tor network
|
||||
statusMessage.text = qsTr("network-status-attempting-tor")
|
||||
show()
|
||||
} else if (status == statusConnecting) {
|
||||
statusbar.color = Theme.statusbarConnectingColor
|
||||
statusMessage.color = Theme.statusbarConnectingFontColor
|
||||
networkStatus.iconColor = Theme.statusbarConnectingFontColor
|
||||
networkStatus.source = gcd.assetPath + "core/signal_cellular_connected_no_internet_4_bar-24px.svg"
|
||||
connectionStatus.iconColor = Theme.statusbarConnectingFontColor
|
||||
connectionStatus.source = gcd.assetPath + "core/syncing-02.svg"
|
||||
//: Connecting...
|
||||
statusMessage.text = qsTr("network-status-connecting")
|
||||
show()
|
||||
} else {
|
||||
statusbar.color = Theme.statusbarOnlineColor
|
||||
statusMessage.color = Theme.statusbarOnlineFontColor
|
||||
networkStatus.iconColor = Theme.statusbarOnlineFontColor
|
||||
networkStatus.source = gcd.assetPath + "core/signal_cellular_4_bar-24px.svg"
|
||||
connectionStatus.iconColor = Theme.statusbarOnlineFontColor
|
||||
connectionStatus.source = gcd.assetPath + "core/syncing-01.svg"
|
||||
//: Online
|
||||
statusMessage.text = qsTr("network-status-online")
|
||||
hide()
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: ma
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
|
||||
SequentialAnimation {
|
||||
id: showAnim
|
||||
PropertyAnimation { id: openStatus; target: statusbar; property: "height"; to: openHeight}
|
||||
ParallelAnimation {
|
||||
PropertyAnimation { id: showStatus; target: statusMessage; property: "opacity"; to: 1}
|
||||
PropertyAnimation { id: showNetIcon; target: networkStatus; property: "opacity"; to: 1}
|
||||
PropertyAnimation { id: showConnIcon; target: connectionStatus; property: "opacity"; to: 1}
|
||||
}
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: hideAnim
|
||||
ParallelAnimation {
|
||||
PropertyAnimation { id: hideStatus; target: statusMessage; property: "opacity"; to: 0}
|
||||
PropertyAnimation { id: hideNetIcon; target: networkStatus; property: "opacity"; to: 0}
|
||||
PropertyAnimation { id: hideConnIcon; target: connectionStatus; property: "opacity"; to: 0}
|
||||
}
|
||||
PropertyAnimation { id: closeStatus; target: statusbar; property: "height"; to: hideHeight; duration: 200 }
|
||||
}
|
||||
|
||||
onEntered: {
|
||||
isHover = true
|
||||
show()
|
||||
}
|
||||
|
||||
|
||||
onExited: {
|
||||
isHover = false
|
||||
hide()
|
||||
}
|
||||
|
||||
onPressed: {
|
||||
isHover = true
|
||||
show()
|
||||
}
|
||||
|
||||
onReleased: {
|
||||
isHover = false
|
||||
hide()
|
||||
}
|
||||
}
|
||||
|
||||
function resetHeight() {
|
||||
if (isHover || status != statusOnline) {
|
||||
height = openHeight
|
||||
} else {
|
||||
height = hideHeight
|
||||
}
|
||||
}
|
||||
|
||||
function show() {
|
||||
if (isHover || status != statusOnline) {
|
||||
hideAnim.stop()
|
||||
showAnim.start()
|
||||
}
|
||||
}
|
||||
|
||||
function hide() {
|
||||
if (!isHover && status == statusOnline) {
|
||||
showAnim.stop()
|
||||
hideAnim.start()
|
||||
}
|
||||
}
|
||||
|
||||
onStatusChanged: { changeStatus() }
|
||||
|
||||
Component.onCompleted: { resetHeight() }
|
||||
|
||||
Connections {
|
||||
target: gcd
|
||||
|
||||
onTorStatus: function(code) {
|
||||
status = code
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue