change Widgets to Opaque in qml imports

qml/overlays/BulletinOverlay.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.3
 
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/fonts/Twemoji.js" as T
 import "../opaque/styles"
 import "../utils.js" as Utils
@@ -175,7 +175,7 @@ ColumnLayout {
                         width: parent.width - 50
                     }
 
-                    Widgets.Button {
+                    Opaque.Button {
                         id: replybtn
                         visible: selected
                         text: "reply"
@@ -230,7 +230,7 @@ ColumnLayout {
                 }
 
 
-                Widgets.Button { // SEND MESSAGE BUTTON
+                Opaque.Button { // SEND MESSAGE BUTTON
                     id: btnSend
                     icon: "regular/paper-plane"
                     text: "post"

qml/overlays/ChatOverlay.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/controls" as Awesome
 import "../opaque/fonts/Twemoji.js" as T
 import "../utils.js" as Utils
@@ -129,7 +129,7 @@ Item {
         }
     }
 
-    Widgets.EmojiDrawer {
+    Opaque.EmojiDrawer {
         id: emojiDrawer
         anchors.left: parent.left
         anchors.right: parent.right
@@ -266,7 +266,7 @@ Item {
             spacing: 1
 
 
-            Widgets.Button { // SEND MESSAGE BUTTON
+            Opaque.Button { // SEND MESSAGE BUTTON
                 id: btnSend
                 icon: "regular/paper-plane"
                 text: "send"
@@ -302,7 +302,7 @@ Item {
                 spacing: 1
 
 
-                Widgets.Button { // EMOJI DRAWER BUTTON
+                Opaque.Button { // EMOJI DRAWER BUTTON
                     id: btnEmoji
                     icon: "regular/smile"
                     anchors.right: btnAttach.left
@@ -311,7 +311,7 @@ Item {
                     onClicked: emojiDrawer.visible ? emojiDrawer.slideclosed() : emojiDrawer.slideopen()
                 }
 
-                Widgets.Button {
+                Opaque.Button {
                     id: btnAttach
                     icon: "solid/paperclip"
                     anchors.right: parent.right

qml/overlays/ListOverlay.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls.Material 2.0
 import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/controls" as Awesome
 import "../opaque/fonts/Twemoji.js" as T
 import "../utils.js" as Utils
@@ -204,7 +204,7 @@ ColumnLayout {
                     style: CwtchTextFieldStyle{}
                 }
 
-                Widgets.Button { // SEND MESSAGE BUTTON
+                Opaque.Button { // SEND MESSAGE BUTTON
                     id: btnSend
                     icon: "regular/paper-plane"
                     text: "add"

qml/panes/AddGroupPane.qml

@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 
 ColumnLayout { // settingsPane
@@ -26,7 +26,7 @@ ColumnLayout { // settingsPane
             spacing: 5
             width: root.width
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 //: Server label
                 text: qsTr("server-label") + ":"
             }
@@ -37,7 +37,7 @@ ColumnLayout { // settingsPane
                 text: "2c3kmoobnyghj2zw6pwv7d57yzld753auo3ugauezzpvfak3ahc4bdyd"
             }
 
-            Widgets.ScalingLabel{
+            Opaque.ScalingLabel{
                 //: Group name label
                 text: qsTr("group-name-label") + ":"
             }
@@ -49,7 +49,7 @@ ColumnLayout { // settingsPane
                 text: qsTr("default-group-name")
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 //: create group button
                 text: qsTr("create-group-btn")
 

qml/panes/GroupSettingsPane.qml

@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../utils.js" as Utils
 
@@ -29,7 +29,7 @@ ColumnLayout { // groupSettingsPane
             leftPadding: 10
             spacing: 5
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 text: qsTr("server-label") + ":"
             }
 
@@ -39,7 +39,7 @@ ColumnLayout { // groupSettingsPane
                 readOnly: true
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 icon: "regular/clipboard"
                 text: qsTr("copy-btn")
 
@@ -50,7 +50,7 @@ ColumnLayout { // groupSettingsPane
                 }
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 text: qsTr("invitation-label") + ":"
             }
 
@@ -60,7 +60,7 @@ ColumnLayout { // groupSettingsPane
                 readOnly: true
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 icon: "regular/clipboard"
                 text: qsTr("copy-btn")
 
@@ -71,7 +71,7 @@ ColumnLayout { // groupSettingsPane
                 }
             }
 
-            Widgets.ScalingLabel{
+            Opaque.ScalingLabel{
                 text: qsTr("group-name-label") + ":"
             }
 
@@ -80,7 +80,7 @@ ColumnLayout { // groupSettingsPane
                 style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 }
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 text: qsTr("save-btn")
 
                 onClicked: {
@@ -91,7 +91,7 @@ ColumnLayout { // groupSettingsPane
             }
 
             //: Invite someone to the group
-            Widgets.ScalingLabel { text: qsTr("invite-to-group-label") }
+            Opaque.ScalingLabel { text: qsTr("invite-to-group-label") }
 
             ComboBox {
                 id: cbInvite
@@ -101,7 +101,7 @@ ColumnLayout { // groupSettingsPane
                 style: CwtchComboBoxStyle{}
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 text: qsTr("invite-btn")
 
                 onClicked: {
@@ -109,7 +109,7 @@ ColumnLayout { // groupSettingsPane
                 }
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 icon: "regular/trash-alt"
                 text: qsTr("delete-btn")
 

qml/panes/OverlayPane.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../overlays"
 
@@ -24,7 +24,7 @@ ColumnLayout {
             text: qsTr("accept-group-invite-label") + " " + overlay.name + "?"
         }
 
-        Widgets.Button {
+        Opaque.Button {
             //: Accept group invite button
             text: qsTr("accept-group-btn")
             icon: "regular/heart"
@@ -34,7 +34,7 @@ ColumnLayout {
             }
         }
 
-        Widgets.Button {
+        Opaque.Button {
             //: Reject Group invite button
             text: qsTr("reject-group-btn")
             icon: "regular/trash-alt"
@@ -49,21 +49,21 @@ ColumnLayout {
         id: switcher
 
 
-        Widgets.Button {
+        Opaque.Button {
             text: qsTr("chat-btn")
 
 
             onClicked: overlayStack.overlay = overlayStack.chatOverlay
         }
 
-        Widgets.Button {
+        Opaque.Button {
             text: qsTr("lists-btn")
 
 
             onClicked: overlayStack.overlay = overlayStack.listOverlay
         }
 
-        Widgets.Button {
+        Opaque.Button {
             text: qsTr("bulletins-btn")
 
 

qml/panes/PeerSettingsPane.qml

@@ -7,7 +7,7 @@ import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../opaque/theme"
 
@@ -32,7 +32,7 @@ ColumnLayout { // peerSettingsPane
                 columns: 1
                 width:parent.width * 0.95
                 anchors.horizontalCenter: parent.horizontalCenter
-                Widgets.EllipsisLabel {
+                Opaque.EllipsisLabel {
                     anchors.left:parent.left
                     color: Theme.mainTextColor
                     text: qsTr("address-label")
@@ -40,7 +40,7 @@ ColumnLayout { // peerSettingsPane
                     font.pointSize: 15 * gcd.themeScale
                 }
 
-                Widgets.ButtonTextField {
+                Opaque.ButtonTextField {
                     id: txtOnion
                     anchors.left:parent.left
                     anchors.right:parent.right
@@ -56,13 +56,13 @@ ColumnLayout { // peerSettingsPane
                 }
             }
 
-            Widgets.HLine{}
+            Opaque.HLine{}
 
             GridLayout {
                 columns: 1
                 width:parent.width * 0.95
                 anchors.horizontalCenter: parent.horizontalCenter
-                Widgets.EllipsisLabel {
+                Opaque.EllipsisLabel {
                     anchors.left:parent.left
                     color: Theme.mainTextColor
                     text: qsTr("display-name-label")
@@ -71,7 +71,7 @@ ColumnLayout { // peerSettingsPane
                 }
 
 
-                Widgets.ButtonTextField {
+                Opaque.ButtonTextField {
                     id: txtDisplayName
                     anchors.left:parent.left
                     anchors.right:parent.right
@@ -86,21 +86,21 @@ ColumnLayout { // peerSettingsPane
             }
 
 
-            Widgets.HLine{}
+            Opaque.HLine{}
 
 
             GridLayout {
                 columns: 2
                 width:parent.width * 0.95
                 anchors.horizontalCenter: parent.horizontalCenter
-                Widgets.EllipsisLabel {
+                Opaque.EllipsisLabel {
                     color: Theme.mainTextColor
                     text: qsTr("block-btn")
                     font.styleName: "ExtraBold"
                     font.pointSize: 15 * gcd.themeScale
                 }
 
-                Widgets.ToggleSwitch {
+                Opaque.ToggleSwitch {
                     isToggled: root.blocked // ? qsTr("unblock-btn") : qsTr("block-btn")
                     anchors.right: parent.right
                     onToggled: function() {
@@ -117,11 +117,11 @@ ColumnLayout { // peerSettingsPane
 
             }
 
-            Widgets.HLine{}
+            Opaque.HLine{}
             Column {
                 width:parent.width * 0.95
                 anchors.horizontalCenter: parent.horizontalCenter
-                Widgets.Button {
+                Opaque.Button {
                     icon: "regular/trash-alt"
                     text: qsTr("delete-btn")
                     anchors.right: parent.right

qml/panes/ProfileAddEditPane.qml

@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 //  import "../styles"
 
 ColumnLayout { // Add Profile Pane
@@ -71,23 +71,23 @@ ColumnLayout { // Add Profile Pane
             spacing: 5
             width: profileAddEditPane.width
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 //: Onion
                 text: qsTr("profile-onion-label") + ":"
                 visible: mode == "edit"
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: onionLabel
                 visible: mode == "edit"
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 //: Display name
                 text: qsTr("profile-name") + ":"
             }
 
-            Widgets.TextField {
+            Opaque.TextField {
                 id: txtProfileName
                 Layout.fillWidth: true
                 //style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 }
@@ -100,7 +100,7 @@ ColumnLayout { // Add Profile Pane
             RowLayout {
                 //id: radioButtons
 
-                Widgets.RadioButton {
+                Opaque.RadioButton {
                     id: radioUsePassword
                     checked: true
                     //: Password
@@ -111,7 +111,7 @@ ColumnLayout { // Add Profile Pane
                     }
                 }
 
-                Widgets.RadioButton {
+                Opaque.RadioButton {
                     id: radioNoPassword
                     //: Unencrypted (No password)
                     text: qsTr("radio-no-password")
@@ -122,35 +122,35 @@ ColumnLayout { // Add Profile Pane
                 }
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: noPasswordLabel
                 //: Not using a password on this account means that all data stored locally will not be encrypted
                 text: qsTr("no-password-warning")
                 visible: radioNoPassword.checked
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: currentPasswordLabel
                 //: Current Password
                 text: qsTr("current-password-label") + ":"
                 visible: radioUsePassword.checked && mode == "edit" && tag != "v1-defaultPassword"
             }
 
-            Widgets.TextField {
+            Opaque.TextField {
                 id: txtCurrentPassword
                 Layout.fillWidth: true
                 echoMode: TextInput.Password
                 visible: radioUsePassword.checked && mode == "edit" && tag != "v1-defaultPassword"
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: passwordLabel
                 //: Password
                 text: qsTr("password1-label") + ":"
                 visible: radioUsePassword.checked
             }
 
-            Widgets.TextField {
+            Opaque.TextField {
                 id: txtPassword1
                 Layout.fillWidth: true
                 //style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 }
@@ -163,14 +163,14 @@ ColumnLayout { // Add Profile Pane
             }
 
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: passwordReLabel
                 //: Reenter password
                 text: qsTr("password2-label") + ":"
                 visible: radioUsePassword.checked
             }
 
-            Widgets.TextField {
+            Opaque.TextField {
                 id: txtPassword2
                 Layout.fillWidth: true
                 //style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 }
@@ -178,7 +178,7 @@ ColumnLayout { // Add Profile Pane
                 visible: radioUsePassword.checked
             }
 
-            Widgets.Button {  // ADD or SAVE button
+            Opaque.Button {  // ADD or SAVE button
                 //: Create Profile || Save Profile
                 text: mode == "add" ? qsTr("create-profile-btn") : qsTr("save-profile-btn")
 
@@ -209,7 +209,7 @@ ColumnLayout { // Add Profile Pane
                 }
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: passwordErrorLabel
                 //: Passwords do not match
                 text: qsTr("password-error-match")
@@ -217,7 +217,7 @@ ColumnLayout { // Add Profile Pane
                 color: "red"
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: passwordChangeErrorLabel
                 //: Error changing password: Supplied password rejected
                 text: qsTr("password-change-error")
@@ -227,7 +227,7 @@ ColumnLayout { // Add Profile Pane
 
             // ***** Delete button and confirm flow *****
 
-            Widgets.Button {
+            Opaque.Button {
                 //: Delete Profile
                 text: qsTr("delete-profile-btn")
                 icon: "regular/trash-alt"
@@ -239,21 +239,21 @@ ColumnLayout { // Add Profile Pane
                 }
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 id: deleteConfirmLabel
                 //: Type DELETE to confirm
                 text: qsTr("delete-confirm-label")+ ":"
                 visible: deleting
             }
 
-            Widgets.TextField {
+            Opaque.TextField {
                 id: confirmDeleteTxt
                 Layout.fillWidth: true
                 //style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 }
                 visible: deleting
             }
 
-            Widgets.Button {
+            Opaque.Button {
                 id: confirmDeleteBtn
                 icon: "regular/trash-alt"
 

qml/panes/ProfileManagerPane.qml

@@ -10,7 +10,7 @@ import QtQuick.Controls.Styles 1.4
 
 import "../widgets"
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/controls"
 import "../opaque/styles"
 import "../opaque/theme"
@@ -22,14 +22,14 @@ ColumnLayout {
     //leftPadding: 10
     //spacing: 5
 
-    Widgets.ScalingLabel {
+    Opaque.ScalingLabel {
         anchors.horizontalCenter: parent.horizontalCenter
         wrapMode: TextEdit.Wrap
         //: Please enter password:
         text: qsTr("enter-profile-password")+":"
     }
 
-    Widgets.UnderlineTextField {
+    Opaque.UnderlineTextField {
         id: txtPassword
         anchors.horizontalCenter: parent.horizontalCenter
         Layout.fillWidth: true
@@ -40,7 +40,7 @@ ColumnLayout {
         onAccepted: button.clicked()
     }
 
-    Widgets.ScalingLabel {
+    Opaque.ScalingLabel {
         id: error
         anchors.horizontalCenter: parent.horizontalCenter
         color: "red"
@@ -49,7 +49,7 @@ ColumnLayout {
         visible: false
     }
 
-    Widgets.Button {
+    Opaque.Button {
         id: "button"
         anchors.horizontalCenter: parent.horizontalCenter
 

qml/panes/SettingsPane.qml

@@ -7,7 +7,7 @@ import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/controls"
 
 ColumnLayout { // settingsPane
@@ -28,14 +28,14 @@ ColumnLayout { // settingsPane
             spacing: 5
             width: root.width
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 width: parent.width
                 wrapMode: TextEdit.Wrap
                 //: Version: %1 Built on: %2
                 text: qsTr("version %1 builddate %2").arg(gcd.version).arg(gcd.buildDate)
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 width: parent.width
                 wrapMode: TextEdit.Wrap
                 //: Interface zoom (mostly affects text and button sizes)
@@ -67,26 +67,26 @@ ColumnLayout { // settingsPane
                     }
                 }
                 style: CheckBoxStyle {
-                    label: Widgets.ScalingLabel {
+                    label: Opaque.ScalingLabel {
                         text: qsTr("block-unknown-label")
                     }
                 }
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 wrapMode: TextEdit.Wrap
                 text: qsTr("large-text-label")
                 size: 20
             }
 
-            Widgets.ScalingLabel{
+            Opaque.ScalingLabel{
                 width: parent.width
                 wrapMode: TextEdit.Wrap
                 //: "Default size text (scale factor: "
                 text: qsTr("default-scaling-text") + " " + Math.round(zoomSlider.value * 100) / 100 + ")"
             }
 
-            Widgets.ScalingLabel {
+            Opaque.ScalingLabel {
                 text: qsTr("small-text-label")
                 size: 8
             }

qml/widgets/ContactList.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/theme"
 
 ColumnLayout {
@@ -27,7 +27,7 @@ ColumnLayout {
     }
 
 
-    Widgets.IconTextField {
+    Opaque.IconTextField {
             id: searchAddText
             anchors.horizontalCenter: parent.horizontalCenter
 

qml/widgets/ContactRow.qml

@@ -7,11 +7,11 @@ import CustomQmlTypes 1.0
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../opaque/theme"
 
-Widgets.PortraitRow {
+Opaque.PortraitRow {
     property int status: 0
     property int badge
     property bool loading

qml/widgets/Message.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/controls" as Awesome
 
 Item {
@@ -43,7 +43,7 @@ Item {
     }
 
 
-    Widgets.Portrait {
+    Opaque.Portrait {
         id: imgProfile
         anchors.left: parent.left
         // TODO: currently unused?

qml/widgets/MyProfile.qml

@@ -7,7 +7,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../opaque/theme"
 
@@ -78,7 +78,7 @@ Item {
         id: profile
         color: Theme.backgroundMainColor
 
-        Widgets.Portrait {
+        Opaque.Portrait {
             id: portrait
 
             source: root.image
@@ -105,7 +105,7 @@ Item {
                 id: nameCenter
                 width: name.width + addBtn.width
 
-                Widgets.EllipsisLabel {
+                Opaque.EllipsisLabel {
                     id: name
 
                     anchors.right: undefined
@@ -119,7 +119,7 @@ Item {
                     container: nameRow
                 }
 
-                Widgets.Button { // Add Button
+                Opaque.Button { // Add Button
                     id: addBtn
 
                     anchors.left: name.right

qml/widgets/ProfileList.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/theme"
 
 ColumnLayout {
@@ -103,7 +103,7 @@ ColumnLayout {
                 }
             }
 
-            Widgets.PortraitRow {
+            Opaque.PortraitRow {
                 handle: ""
                 displayName: qsTr("add-new-profile-btn")
                 nameColor: Theme.mainTextColor

qml/widgets/ProfileRow.qml

@@ -7,11 +7,11 @@ import CustomQmlTypes 1.0
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 
-import "../opaque" as Widgets
+import "../opaque" as Opaque
 import "../opaque/styles"
 import "../opaque/theme"
 
-Widgets.PortraitRow {
+Opaque.PortraitRow {
     badgeColor: Theme.portraitProfileBadgeColor
 
     portraitBorderColor: Theme.portraitOnlineBorderColor
@@ -26,7 +26,7 @@ Widgets.PortraitRow {
         width: height
     }
 
-    Widgets.Button {// Edit BUTTON
+    Opaque.Button {// Edit BUTTON
         id: btnEdit
         icon: "solid/user-edit"
 

qml/widgets/Statusbar.qml

@@ -0,0 +1,186 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.4
+
+import "../opaque" as Opaque
+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
+    }
+
+    Opaque.Icon {
+        id: networkStatus
+        opacity: 0
+        anchors.right: connectionStatus.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: 5 * gcd.themeScale
+        height: 18
+        width: 18
+
+    }
+
+    Opaque.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
+        }
+    }
+
+}