From 2f25b390632de1c42567a9338c71060377f4a082 Mon Sep 17 00:00:00 2001 From: "kali kaneko (leap communications)" Date: Tue, 31 Aug 2021 21:59:35 +0200 Subject: [ui] fonts + bugfixing --- gui/components/BoldLabel.qml | 15 ++-- gui/components/ErrorBox.qml | 33 +++++++ gui/components/InitErrors.qml | 49 +++++++++++ gui/components/LightLabel.qml | 1 - gui/components/MainView.qml | 4 + gui/components/Splash.qml | 15 +++- gui/components/StatusBox.qml | 89 ++++++++++--------- gui/components/VPNState.qml | 104 +++++++++++----------- gui/gui.qrc | 14 ++- gui/main.qml | 130 ++++++++++++++++------------ gui/resources/alert.svg | 4 + gui/resources/fonts/Montserrat-Regular.ttf | Bin 0 -> 245708 bytes gui/resources/fonts/Montserrat-SemiBold.ttf | Bin 0 -> 243816 bytes 13 files changed, 294 insertions(+), 164 deletions(-) create mode 100644 gui/components/ErrorBox.qml create mode 100644 gui/components/InitErrors.qml create mode 100644 gui/resources/alert.svg create mode 100644 gui/resources/fonts/Montserrat-Regular.ttf create mode 100644 gui/resources/fonts/Montserrat-SemiBold.ttf 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 //+ " " + "" + alertLinkText + "" + 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" @@ -142,6 +120,12 @@ StateGroup { target: statusBoxBackground 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") @@ -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": diff --git a/gui/gui.qrc b/gui/gui.qrc index dde4c8f..c794ef1 100644 --- a/gui/gui.qrc +++ b/gui/gui.qrc @@ -3,6 +3,7 @@ main.qml + themes/themes.js components/MainView.qml components/Splash.qml @@ -23,6 +24,10 @@ components/Icon.qml components/MaterialButton.qml components/VPNState.qml + components/InitErrors.qml + components/ErrorBox.qml + + resources/icon-noshield.svg resources/location.svg resources/settings.svg @@ -43,8 +48,13 @@ resources/riseup-icon.svg resources/spy.gif resources/quit.svg + resources/alert.svg + + + resources/fonts/Montserrat-Regular.ttf + resources/fonts/Montserrat-SemiBold.ttf - + qml/VpnState.qml qml/AboutDialog.qml qml/DonateDialog.qml @@ -57,7 +67,7 @@ qml/VPNSwitch.qml qml/BridgesItem.qml qml/logic.js - + assets/icon/png/black/vpn_off.png assets/icon/png/black/vpn_on.png diff --git a/gui/main.qml b/gui/main.qml index 16677a2..f847377 100644 --- a/gui/main.qml +++ b/gui/main.qml @@ -1,21 +1,23 @@ + + /* TODO (ui rewrite) - [x] add systray - [x] systray status - [x] splash screen - - [ ] splash delay/transitions - - [ ] nested states - - [ ] splash init errors - - [ ] font: monserrat - - [ ] donation dialog - - [ ] add gateway to systray - - [ ] control actions from systray + - [x] splash delay/transitions + - [x] font: monserrat + - [x] nested states + - [x] splash init errors - [ ] minimize/hide from systray - - [ ] parse ctx flags (need dialog, etc) - [ ] gateway selector - [ ] bridges + - [ ] control actions from systray + - [ ] add gateway to systray + - [ ] donation dialog + - [ ] parse ctx flags (need dialog, etc) + - [ ] udp support */ - import QtQuick 2.0 import QtQuick.Controls 2.4 import QtQuick.Dialogs 1.2 @@ -40,6 +42,9 @@ ApplicationWindow { Material.accent: Material.Green property var ctx + property var error: "" + property bool isDonationService: false + property bool showDonationReminder: false property var icons: { "off": "qrc:/assets/icon/png/white/vpn_off.png", @@ -48,64 +53,77 @@ ApplicationWindow { "blocked": "qrc:/assets/icon/png/white/vpn_blocked.png" } + FontLoader { + id: lightFont + source: "qrc:/montserrat-light.ttf" + } + + FontLoader { + id: boldFont + source: "qrc:/montserrat-bold.ttf" + } + + font.family: lightFont.name + Loader { - id: loader - asynchronous: true - anchors.fill: parent + id: loader + asynchronous: true + anchors.fill: parent } Systray { - id: systray + id: systray } + Connections { - target: jsonModel - function onDataChanged() { - ctx = JSON.parse(jsonModel.getJson()) + target: jsonModel + function onDataChanged() { + let j = jsonModel.getJson() if (qmlDebug) { - console.debug(jsonModel.getJson()) + console.debug(j) } - - // FIXME -- use nested state machines for all these cases. - - //gwSelector.model = Object.keys(ctx.locations) - - /* - if (ctx.donateDialog == 'true') { - Logic.setNeedsDonate(true); - } - if (ctx.loginDialog == 'true') { - console.debug(jsonModel.getJson()) - console.debug("DEBUG: should display login") - login.visible = true - } - if (ctx.loginOk == 'true') { - loginOk.visible = true - } - if (ctx.errors) { - login.visible = false - if (ctx.errors == "nohelpers") { - showInitFailure( - qsTr("Could not find helpers. Please check your installation")) - } else if (ctx.errors == "nopolkit") { - showInitFailure(qsTr("Could not find polkit agent.")) - } else { - showInitFailure() - } - } - if (ctx.donateURL) { - donateItem.visible = true - } - - if (ctx.status == "on") { - gwNextConnectionText.visible = false - gwReconnectText.visible = false - } - */ - } + ctx = JSON.parse(j) + if (ctx.errors) { + console.debug("errors, setting root.error") + root.error = ctx.errors + } else { + root.error = "" + } + if (ctx.donateURL) { + isDonationService = true; + } + if (ctx.donateDialog == 'true') { + showDonationReminder = true; + } + //gwSelector.model = Object.keys(ctx.locations) + // TODO check donation + //if (needsDonate && !shownDonate) { + // donate.visible = true; + // shownDonate = true; + // // move this to onClick of "close" for widget + // backend.donateSeen(); + //} + // TODO refactor donate widget into main view (with close window!) + //if (ctx.status == "on") { + // gwNextConnectionText.visible = false + // gwReconnectText.visible = false + // when: vpn.status == "on" + //} + + /* + TODO libraries need login + if (ctx.loginDialog == 'true') { + login.visible = true + } + if (ctx.loginOk == 'true') { + loginOk.visible = true + } + */ + } } - onSceneGraphError: function(error, msg) { + onSceneGraphError: function (error, msg) { console.debug("ERROR while initializing scene") console.debug(msg) } diff --git a/gui/resources/alert.svg b/gui/resources/alert.svg new file mode 100644 index 0000000..cd178eb --- /dev/null +++ b/gui/resources/alert.svg @@ -0,0 +1,4 @@ + + + + diff --git a/gui/resources/fonts/Montserrat-Regular.ttf b/gui/resources/fonts/Montserrat-Regular.ttf new file mode 100644 index 0000000..8d443d5 Binary files /dev/null and b/gui/resources/fonts/Montserrat-Regular.ttf differ diff --git a/gui/resources/fonts/Montserrat-SemiBold.ttf b/gui/resources/fonts/Montserrat-SemiBold.ttf new file mode 100644 index 0000000..f8a43f2 Binary files /dev/null and b/gui/resources/fonts/Montserrat-SemiBold.ttf differ -- cgit v1.2.3