[ui] fonts + bugfixing

8 files changed, 204 insertions, 106 deletions

diff --git a/gui/components/BoldLabel.qml b/gui/components/BoldLabel.qml
index 6c6c3c3..d4a6ba3 100644
--- a/gui/components/BoldLabel.qml
+++ b/gui/components/BoldLabel.qml
@@ -4,18 +4,15 @@ import "../themes/themes.js" as Theme
 import "../themes"
 
 Label {
-    FontLoader {
-        id: boldFont
-        source: "qrc:/oxanium-bold.ttf"
+    color: "black"
+
+    font {
+        pixelSize: Theme.fontSize * 1.5
+        family: boldFont.name
+        bold: true
     }
 
-    font.pixelSize: Theme.fontSize * 1.55555
-    //font.family: boldFont.name
-    font.bold: true
-    //color: Theme.fontColorDark
-    color: "black"
     text: parent.text
-    //wrapMode: Text.WordWrap
     Accessible.name: text
     Accessible.role: Accessible.StaticText
 }
diff --git a/gui/components/ErrorBox.qml b/gui/components/ErrorBox.qml
new file mode 100644
index 0000000..40c12d0
--- /dev/null
+++ b/gui/components/ErrorBox.qml
@@ -0,0 +1,33 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+import "../themes/themes.js" as Theme
+
+Item {
+    id: errorBox
+    width: parent.width
+    property var errorText: ""
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.top: connectionImage.bottom
+
+    // TODO alert icon, by type
+
+    Rectangle {
+
+        id: labelWrapper
+        color: "transparent"
+        height: label.paintedHeight + Theme.windowMargin
+        width: parent.width
+        anchors.verticalCenter: parent.verticalCenter
+
+        Label {
+            id: label
+            width: labelWrapper.width - Theme.windowMargin
+            anchors.centerIn: parent
+            text: errorBox.errorText //+ " " + "<b><u>" + alertLinkText + "</b></u>"
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.Wrap
+            font.pixelSize: Theme.fontSizeSmall
+         }
+    }
+}
diff --git a/gui/components/InitErrors.qml b/gui/components/InitErrors.qml
new file mode 100644
index 0000000..2859168
--- /dev/null
+++ b/gui/components/InitErrors.qml
@@ -0,0 +1,49 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+
+ErrorBox {
+
+    state: "noerror"
+
+    states: [
+        State {
+            name: "noerror"
+            when: root.error == ""
+            PropertyChanges {
+                target: splashSpinner
+                visible: true
+            }
+            PropertyChanges {
+                target: splashErrorBox
+                visible: false
+            }
+        },
+        State {
+            name: "nohelpers"
+            when: root.error == "nohelpers"
+            PropertyChanges {
+                target: splashSpinner
+                visible: false
+            }
+            PropertyChanges {
+                target: splashErrorBox
+                errorText: qsTr("Could not find helpers. Please check your installation")
+                visible: true 
+            }
+        },
+        State {
+            name: "nopolkit"
+            when: root.error == "nopolkit"
+            PropertyChanges {
+                target: splashSpinner
+                visible: false
+            }
+            PropertyChanges {
+                target: splashErrorBox
+                errorText: qsTr("Could not find polkit agent.")
+                visible: true 
+            }
+        }
+    ]
+}
diff --git a/gui/components/LightLabel.qml b/gui/components/LightLabel.qml
index 78f82b6..ea723c7 100644
--- a/gui/components/LightLabel.qml
+++ b/gui/components/LightLabel.qml
@@ -11,7 +11,6 @@ Text {
 
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
-    //lineHeightMode: Text.FixedHeight
     wrapMode: Text.Wrap
 
     Accessible.role: Accessible.StaticText
diff --git a/gui/components/MainView.qml b/gui/components/MainView.qml
index 7ce723d..1918c7f 100644
--- a/gui/components/MainView.qml
+++ b/gui/components/MainView.qml
@@ -26,6 +26,10 @@ Page {
             delegate: ItemDelegate {
                 width: parent.width
                 text: model.text
+                visible: {
+                    if (isDonationService) {return true}
+                    return model.text != qsTr("Donate")
+                }
                 highlighted: ListView.isCurrentItem
                 icon.color: "transparent"
                 icon.source: model.icon
diff --git a/gui/components/Splash.qml b/gui/components/Splash.qml
index b494494..6bdd3ab 100644
--- a/gui/components/Splash.qml
+++ b/gui/components/Splash.qml
@@ -5,6 +5,7 @@ import QtGraphicalEffects 1.0
 Page {
     id: splash
     property int timeoutInterval: 1600
+    property alias errors: splashErrorBox
 
     Column {
         width: parent.width * 0.8
@@ -24,7 +25,13 @@ Page {
             fillMode: Image.PreserveAspectFit
         }
 
-        Spinner {}
+        Spinner {
+            id: splashSpinner
+        }
+
+        InitErrors {
+            id: splashErrorBox
+        }
     }
 
     Timer {
@@ -39,10 +46,10 @@ Page {
     }
 
     function loadMainViewWhenReady() {
-        console.debug("ready?")
+        if (root.error != "") {
+            return
+        }
         if (ctx && ctx.isReady) {
-            console.debug("ready?", ctx.isReady)
-            // FIXME check errors == None
             loader.source = "MainView.qml"
         } else {
             delay(100, loadMainViewWhenReady)
diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index fa24cd8..a20b930 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -19,27 +19,33 @@ Item {
 
     Rectangle {
         id: statusBoxBackground
-        anchors.fill: parent
-        anchors.margins: 20
-        anchors.bottomMargin: 30
         height: 300
         radius: 10
         color: Theme.bgColor
-        border.color: Theme.accentOff
-        border.width: 2
         antialiasing: true
+        anchors {
+            fill: parent
+            margins: 20
+            bottomMargin: 30
+        }
+        border {
+            color: Theme.accentOff
+            width: 2
+        }
     }
 
     ToolButton {
         id: settingsButton
         objectName: "settingsButton"
+        font.pixelSize: Qt.application.font.pixelSize * 1.2
         opacity: 1
 
-        font.pixelSize: Qt.application.font.pixelSize * 1.6
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.topMargin: Theme.windowMargin + 10
-        anchors.leftMargin: Theme.windowMargin + 10
+        anchors {
+            top: parent.top
+            left: parent.left
+            topMargin: Theme.windowMargin + 10
+            leftMargin: Theme.windowMargin + 10
+        }
 
         onClicked: {
             if (stackView.depth > 1) {
@@ -51,75 +57,78 @@ Item {
 
         Icon {
             id: settingsImage
-            width: 24
-            height: 24
-            // TODO move arrow left to toolbar top
+            width: 16
+            height: 16
+            anchors.centerIn: settingsButton
             source: stackView.depth
                     > 1 ? "../resources/arrow-left.svg" : "../resources/gear-fill.svg"
-            anchors.centerIn: settingsButton
         }
     }
 
-    Column {
-        id: col
-        anchors.centerIn: parent
-        anchors.topMargin: 24
-        width: parent.width * 0.8
-
+    Rectangle {
+        id: statusLabelWrapper
+        height: 45
+        anchors {
+            top: statusBoxBackground.top
+            topMargin: 40
+            horizontalCenter: parent.horizontalCenter
+        }
         BoldLabel {
             id: connectionState
-            text: ""
+            anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
             horizontalAlignment: Text.AlignHCenter
+            text: ""
         }
+    }
+
+    Column {
+        id: col
+        width: parent.width * 0.8
+        anchors.horizontalCenter: parent.horizontalCenter
 
         VerticalSpacer {
             id: spacerPreImg
-            visible: false
-            height: 40
+            visible: true
+            height: 150
         }
 
         Image {
             id: connectionImage
-            height: 200
+            height: 160
             source: "../resources/spy.gif"
+            anchors.horizontalCenter: parent.horizontalCenter
             fillMode: Image.PreserveAspectFit
         }
 
         VerticalSpacer {
             id: spacerPostImg
-            visible: false
-            height: 35
+            visible: true
+            height: 30
         }
 
         MaterialButton {
             id: toggleVPN
+            spacing: 8
+
             anchors.horizontalCenter: parent.horizontalCenter
             Layout.alignment: Qt.AlignBottom
-            font.capitalization: Font.Capitalize
-            spacing: 8
+
+            font {
+                capitalization: Font.Capitalize
+                family: lightFont.name
+                bold: false
+            }
 
             onClicked: {
                 if (vpn.state === "on") {
-                    console.debug("should turn off")
                     backend.switchOff()
                 } else if (vpn.state === "off") {
-                    console.debug("should turn on")
                     backend.switchOn()
                 } else {
                     console.debug("unknown state")
                 }
             }
-
-
-            /*
-             XXX this hijacks click events, so better no pointing for now.
-            MouseArea {
-                anchors.fill: toggleVPN
-                hoverEnabled: true
-                cursorShape: !hoverEnabled ? Qt.ForbiddenCursor : Qt.PointingHandCursor
-            }
-            */
         }
     }
 }
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index 8856ad4..9d443ce 100644
--- a/gui/components/VPNState.qml
+++ b/gui/components/VPNState.qml
@@ -4,15 +4,21 @@ import QtQuick.Controls 2.12
 import "../themes/themes.js" as Theme
 
 StateGroup {
+    property var initializing: "initializing"
+    property var off: "off"
+    property var on: "on"
+    property var starting: "starting"
+    property var stopping: "stopping"
+    property var failed: "failed"
 
-    state: ctx ? ctx.status : "off"
+    state: ctx ? ctx.status : vpnStates.off
 
     states: [
         State {
-            name: "initializing"
+            name: initializing
         },
         State {
-            name: "off"
+            name: off
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Connection\nUnsecured")
@@ -24,10 +30,6 @@ StateGroup {
             PropertyChanges {
                 target: connectionImage
                 source: "../resources/spy.gif"
-                //anchors.right: parent.right
-                //anchors.rightMargin: -8
-                // XXX need to nulify horizontalcenter somehow,
-                // it gets fixed to parent.center
             }
             PropertyChanges {
                 target: toggleVPN
@@ -42,16 +44,14 @@ StateGroup {
                 text: toHuman("off")
             }
             StateChangeScript {
-                script: {
-
-                }
+                script: {}
             }
         },
         State {
-            name: "on"
+            name: on
             PropertyChanges {
                 target: connectionState
-                text: qsTr("Connection\nSecure")
+                text: qsTr("Connection\nSecured")
             }
             PropertyChanges {
                 target: statusBoxBackground
@@ -60,17 +60,6 @@ StateGroup {
             PropertyChanges {
                 target: connectionImage
                 source: "../resources/riseup-icon.svg"
-                // TODO need to offset the logo or increase the image
-                // to fixed height
-                height: 120
-            }
-            PropertyChanges {
-                target: spacerPreImg
-                visible: true
-            }
-            PropertyChanges {
-                target: spacerPostImg
-                visible: true
             }
             PropertyChanges {
                 target: toggleVPN
@@ -86,20 +75,11 @@ StateGroup {
                 text: toHuman("on")
             }
             StateChangeScript {
-                script: {
-
-                    // TODO check donation
-                    //if (needsDonate && !shownDonate) {
-                    //    donate.visible = true;
-                    //    shownDonate = true;
-                    //    backend.donateSeen();
-                    //}
-                }
+                script: {}
             }
         },
         State {
-            name: "starting"
-            //when: toggleVPN.pressed == true
+            name: starting
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Connecting")
@@ -127,13 +107,11 @@ StateGroup {
                 text: toHuman("connecting")
             }
             StateChangeScript {
-                script: {
-
-                }
+                script: {}
             }
         },
         State {
-            name: "stopping"
+            name: stopping
             PropertyChanges {
                 target: connectionState
                 text: "Switching\nOff"
@@ -143,6 +121,12 @@ StateGroup {
                 border.color: Theme.accentConnecting
             }
             PropertyChanges {
+                // ?? is this image correct?
+                target: connectionImage
+                source: "../resources/birds.svg"
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+            PropertyChanges {
                 target: systray
                 tooltip: toHuman("stopping")
                 icon.source: icons["wait"]
@@ -153,23 +137,39 @@ StateGroup {
             }
         },
         State {
-            name: "failed"
-            // TODO
+            name: failed
         }
     ]
-
-
-    /*
-    transitions: Transition {
-        from: "off"
-        to: "starting"
-        reversible: true
-
-        ParallelAnimation {
-            ColorAnimation { duration: 500 }
+    transitions: [
+        Transition {
+            to: on
+            ColorAnimation {
+                target: statusBoxBackground
+                duration: 500
+            }
+        },
+        Transition {
+            to: off
+            ColorAnimation {
+                target: statusBoxBackground
+                duration: 500
+            }
+        },
+        Transition {
+            to: starting
+            ColorAnimation {
+                target: statusBoxBackground
+                duration: 500
+            }
+        },
+        Transition {
+            to: stopping
+            ColorAnimation {
+                target: statusBoxBackground
+                duration: 500
+            }
         }
-    }
-    */
+    ]
     function toHuman(st) {
         switch (st) {
         case "off":