From ebfa5352b4517fcc7b50ab259d5af0932d78777f Mon Sep 17 00:00:00 2001 From: erinn Date: Wed, 20 May 2020 13:36:05 -0700 Subject: [PATCH] re-add statusbar --- qml/widgets/Statusbar.qml | 186 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 qml/widgets/Statusbar.qml diff --git a/qml/widgets/Statusbar.qml b/qml/widgets/Statusbar.qml new file mode 100644 index 00000000..9b708e11 --- /dev/null +++ b/qml/widgets/Statusbar.qml @@ -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 + } + } + +}