move widgets into the Opaque submodule project #298
|
@ -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