From 0dda8bd96dab66edd0a922d219a10431247f41ff Mon Sep 17 00:00:00 2001 From: "kali kaneko (leap communications)" Date: Fri, 17 Sep 2021 20:34:32 +0200 Subject: [ui] more dialogs icons, new font --- gui/components/About.qml | 95 +++++++++++++++++++++++++++++ gui/components/BoldLabel.qml | 2 +- gui/components/Footer.qml | 6 +- gui/components/Help.qml | 29 ++++----- gui/components/InitErrors.qml | 4 +- gui/components/Locations.qml | 2 + gui/components/MainView.qml | 56 ++++++++++++++--- gui/components/Splash.qml | 5 +- gui/components/StatusBox.qml | 10 +-- gui/gui.qrc | 6 +- gui/main.qml | 30 ++++++--- gui/providers/providers.json | 2 +- gui/resources/donate.svg | 16 ++++- gui/resources/fonts/Montserrat-Regular.ttf | Bin 245708 -> 0 bytes gui/resources/fonts/Poppins-Light.ttf | Bin 0 -> 159848 bytes gui/resources/fonts/Poppins-Thin.ttf | Bin 0 -> 161600 bytes gui/resources/help.svg | 5 +- gui/themes/themes.js | 2 +- 18 files changed, 217 insertions(+), 53 deletions(-) create mode 100644 gui/components/About.qml delete mode 100644 gui/resources/fonts/Montserrat-Regular.ttf create mode 100644 gui/resources/fonts/Poppins-Light.ttf create mode 100644 gui/resources/fonts/Poppins-Thin.ttf diff --git a/gui/components/About.qml b/gui/components/About.qml new file mode 100644 index 0000000..8642578 --- /dev/null +++ b/gui/components/About.qml @@ -0,0 +1,95 @@ +import QtQuick 2.9 +import QtQuick.Controls 2.2 +import QtQuick.Controls.Material 2.1 + +import "../themes/themes.js" as Theme + +ThemedPage { + + title: qsTr("About") + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + width: root.appWidth * 0.9 + height: root.appHeight - 100 + radius: 10 + color: "white" + + anchors { + fill: parent + margins: 10 + } + + Column { + id: aboutCol + padding: 20 + width: parent.width + + Text { + width: parent.width - 40 + font.pixelSize: 11 + wrapMode: Label.Wrap + text: getText() + anchors.horizontalCenter: parent.horizontalCenter + onLinkActivated: Qt.openUrlExternally(link) + } + + VerticalSpacer { + visible: true + height: 20 + } + + Image { + height: 80 + source: "../resources/icon-noshield.svg" + fillMode: Image.PreserveAspectFit + anchors.horizontalCenter: parent.horizontalCenter + } + + TextEdit { + width: parent.width - 40 + font.pixelSize: 10 + readOnly: true + selectByMouse: true + text: getVersion() + anchors.horizontalCenter: parent.horizontalCenter + } + + VerticalSpacer { + visible: true + height: 50 + } + } // end column + } // end rectangle + + function getText() { + var _name = ctx ? ctx.appName : "vpn" + var _provider = ctx ? ctx.provider : "unknown" + var _donateURL = ctx ? ctx.donateURL : "" + var _tosURL = ctx ? ctx.tosURL : "…" + var _donateTXT = "" + if (_donateURL) { + //: donation text of the about dialog + _donateTXT = qsTr( + "

This service is paid for entirely by donations from users like you. Please donate.

").arg( + _donateURL) + } + //: about dialog + //: %1 -> application name + //: %2 -> provider name + //: %3 -> donation text if activated + var _txt = qsTr( + "

%1 is an easy, fast, and secure VPN service from %2. %1 does not require a user account, keep logs, or track you in any way.

%3

By using this application, you agree to the Terms of Service. This service is provided as-is, without any warranty, and is intended for people who work to make the world a better place.

").arg( + _name).arg(_provider).arg(_donateTXT).arg(_tosURL) + return _txt + } + + function getVersion() { + var _name = ctx ? ctx.appName : "vpn" + var _ver = ctx ? ctx.version : "unknown" + //: %1 -> application name + //: %2 -> version string + var _txt = qsTr("%1 version: %2").arg(_name).arg(_ver) + return _txt + } +} diff --git a/gui/components/BoldLabel.qml b/gui/components/BoldLabel.qml index d4a6ba3..3c46998 100644 --- a/gui/components/BoldLabel.qml +++ b/gui/components/BoldLabel.qml @@ -8,7 +8,7 @@ Label { font { pixelSize: Theme.fontSize * 1.5 - family: boldFont.name + family: boldFontMonserrat.name bold: true } diff --git a/gui/components/Footer.qml b/gui/components/Footer.qml index 893f4cf..1b0d8fa 100644 --- a/gui/components/Footer.qml +++ b/gui/components/Footer.qml @@ -21,9 +21,12 @@ ToolBar { ToolButton { id: gwButton visible: hasMultipleGateways() + anchors { verticalCenter: parent.verticalCenter - leftMargin: 20 + leftMargin: 10 + // TODO discuss where this should be aligned + //leftMargin: 22 left: parent.left verticalCenterOffset: 5 } @@ -40,6 +43,7 @@ ToolBar { Label { id: locationLabel anchors.left: gwButton.right + anchors.leftMargin: -7 anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 7 text: locationStr() diff --git a/gui/components/Help.qml b/gui/components/Help.qml index aced273..460dde4 100644 --- a/gui/components/Help.qml +++ b/gui/components/Help.qml @@ -1,32 +1,33 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 -Page { +ThemedPage { title: qsTr("Help") + property var issueTracker: "https://0xacab.org/leap/bitmask-vpn/issues" Column { anchors.centerIn: parent spacing: 10 - Button { + Text { + font.pixelSize: 14 anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Donate") - onClicked: stackView.push("Donate.qml") + text: getDummyLink(qsTr("Troubleshooting and support")) + onLinkActivated: Qt.openUrlExternally(ctx.helpURL) } - Button { + Text { + font.pixelSize: 14 anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Terms of Service") - onClicked: stackView.push("Donate.qml") + text: getDummyLink(qsTr("Report a bug")) + onLinkActivated: Qt.openUrlExternally(issueTracker) } Button { anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Contact Support") - onClicked: stackView.push("Donate.qml") - } - Button { - anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Report bug") - onClicked: stackView.push("Donate.qml") + text: qsTr("Open logs") } } + + function getDummyLink(text) { + return "" + text + "" + } } diff --git a/gui/components/InitErrors.qml b/gui/components/InitErrors.qml index 2859168..1f1f439 100644 --- a/gui/components/InitErrors.qml +++ b/gui/components/InitErrors.qml @@ -11,7 +11,7 @@ ErrorBox { name: "noerror" when: root.error == "" PropertyChanges { - target: splashSpinner + target: splashProgress visible: true } PropertyChanges { @@ -23,7 +23,7 @@ ErrorBox { name: "nohelpers" when: root.error == "nohelpers" PropertyChanges { - target: splashSpinner + target: splashProgress visible: false } PropertyChanges { diff --git a/gui/components/Locations.qml b/gui/components/Locations.qml index 955da26..a0e7a30 100644 --- a/gui/components/Locations.qml +++ b/gui/components/Locations.qml @@ -47,11 +47,13 @@ ThemedPage { height: 100 radius: 10 color: "white" + anchors { horizontalCenter: parent.horizontalCenter top: parent.top margins: 10 } + Rectangle { anchors { fill: parent diff --git a/gui/components/MainView.qml b/gui/components/MainView.qml index 5407178..bae34fb 100644 --- a/gui/components/MainView.qml +++ b/gui/components/MainView.qml @@ -51,7 +51,7 @@ Page { text: qsTr("Donate") icon: "../resources/donate.svg" triggered: function () { - aboutDialog.open() + donateDialog.open() } } ListElement { @@ -66,7 +66,8 @@ Page { text: qsTr("About") icon: "../resources/about.svg" triggered: function () { - aboutDialog.open() + stackView.push("About.qml") + settingsDrawer.close() } } ListElement { @@ -90,14 +91,53 @@ Page { } Dialog { - id: aboutDialog - title: qsTr("About") - Label { - anchors.fill: parent - text: qsTr("RiseupVPN\nhttps://riseupvpn.net/vpn") + id: donateDialog + width: 350 + title: qsTr("Please donate!") + standardButtons: Dialog.Ok + + Text { + id: donateText + width: 300 + wrapMode: Text.Wrap horizontalAlignment: Text.AlignHCenter + anchors { + topMargin: 20 + bottomMargin: 40 + horizontalCenter: parent.horizontalCenter + } + font.pixelSize: 12 + text: qsTr("This service is paid for entirely by donations from users like you. The cost of running the VPN is approximately 5 USD per person every month, but every little bit counts.") } - standardButtons: StandardButton.Ok + Label { + id: donateURL + anchors { + top: donateText.bottom + topMargin: 20 + horizontalCenter: parent.horizontalCenter + } + font.pixelSize: 14 + text: getLink(ctx.donateURL) + onLinkActivated: Qt.openUrlExternally(ctx.donateURL) + } + + + Image { + height: 50 + source: "../resources/donate.svg" + fillMode: Image.PreserveAspectFit + anchors { + topMargin: 20 + top: donateURL.bottom + horizontalCenter: parent.horizontalCenter + } + } + + onAccepted: Qt.openUrlExternally(ctx.donateURL) + } + + function getLink(url) { + return "" + url + "" } } diff --git a/gui/components/Splash.qml b/gui/components/Splash.qml index 8cc9bd9..16f1b9d 100644 --- a/gui/components/Splash.qml +++ b/gui/components/Splash.qml @@ -14,7 +14,7 @@ Page { VerticalSpacer { visible: true - height: root.height * 0.10 + height: root.height * 0.25 } Image { @@ -27,10 +27,11 @@ Page { VerticalSpacer { visible: true - height: root.height * 0.22 + height: root.height * 0.05 } ProgressBar { + id: splashProgress anchors.horizontalCenter: parent.horizontalCenter indeterminate: true } diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml index 2f56faf..c4a4a08 100644 --- a/gui/components/StatusBox.qml +++ b/gui/components/StatusBox.qml @@ -29,6 +29,7 @@ Item { height: 300 radius: 10 antialiasing: true + anchors { fill: parent margins: 20 @@ -76,7 +77,7 @@ Item { height: 45 anchors { top: statusBoxBackground.top - topMargin: 40 + topMargin: 25 horizontalCenter: parent.horizontalCenter } BoldLabel { @@ -96,7 +97,7 @@ Item { VerticalSpacer { id: spacerPreImg visible: true - height: 150 + height: 120 } Image { @@ -110,7 +111,8 @@ Item { VerticalSpacer { id: spacerPostImg visible: true - height: 30 + height: 20 + Layout.alignment: Qt.AlignBottom } MaterialButton { @@ -128,7 +130,7 @@ Item { } onClicked: { - if (vpn.state === "on") { + if (vpn.state === "on" | vpn.state === "starting") { backend.switchOff() } else if (vpn.state === "off") { vpn.startingUI = true diff --git a/gui/gui.qrc b/gui/gui.qrc index 7c0a418..67da45c 100644 --- a/gui/gui.qrc +++ b/gui/gui.qrc @@ -11,6 +11,7 @@ components/Home.qml components/Header.qml components/Footer.qml + components/About.qml components/WrappedRadioButton.qml components/StatusBox.qml components/Spinner.qml @@ -54,8 +55,9 @@ resources/alert.svg - resources/fonts/Montserrat-Regular.ttf - resources/fonts/Montserrat-SemiBold.ttf + resources/fonts/Poppins-Thin.ttf + resources/fonts/Poppins-Light.ttf + resources/fonts/Montserrat-SemiBold.ttf qml/VpnState.qml diff --git a/gui/main.qml b/gui/main.qml index 515330a..d8bfb91 100644 --- a/gui/main.qml +++ b/gui/main.qml @@ -9,7 +9,7 @@ - [x] font: monserrat - [x] nested states - [x] splash init errors - - [.] gateway selector + - [x] gateway selector - [ ] bridges - [ ] minimize/hide from systray - [ ] control actions from systray @@ -29,14 +29,19 @@ import "./components" ApplicationWindow { id: root - visible: true - width: 360 - height: 520 - minimumWidth: 300 - maximumWidth: 300 - minimumHeight: 500 - maximumHeight: 500 + + property int appHeight: 460 + property int appWidth: 260 + + width: appWidth + minimumWidth: appWidth + maximumWidth: appWidth + + height: appHeight + minimumHeight: appHeight + maximumHeight: appHeight + title: ctx ? ctx.appName : "VPN" Material.accent: Material.Green @@ -60,12 +65,17 @@ ApplicationWindow { FontLoader { id: lightFont - source: "qrc:/montserrat-light.ttf" + source: "qrc:/poppins-light.ttf" } FontLoader { id: boldFont - source: "qrc:/montserrat-bold.ttf" + source: "qrc:/poppins-bold.ttf" + } + + FontLoader { + id: boldFontMonserrat + source: "qrc:/monserrat-bold.ttf" } font.family: lightFont.name diff --git a/gui/providers/providers.json b/gui/providers/providers.json index 52fcbf9..964599a 100644 --- a/gui/providers/providers.json +++ b/gui/providers/providers.json @@ -15,7 +15,7 @@ "apiURL": "https://api.black.riseup.net/", "geolocationAPI": "https://api.black.riseup.net:9001/json", "caCertString": "-----BEGIN CERTIFICATE-----\nMIIFjTCCA3WgAwIBAgIBATANBgkqhkiG9w0BAQ0FADBZMRgwFgYDVQQKDA9SaXNl\ndXAgTmV0d29ya3MxGzAZBgNVBAsMEmh0dHBzOi8vcmlzZXVwLm5ldDEgMB4GA1UE\nAwwXUmlzZXVwIE5ldHdvcmtzIFJvb3QgQ0EwHhcNMTQwNDI4MDAwMDAwWhcNMjQw\nNDI4MDAwMDAwWjBZMRgwFgYDVQQKDA9SaXNldXAgTmV0d29ya3MxGzAZBgNVBAsM\nEmh0dHBzOi8vcmlzZXVwLm5ldDEgMB4GA1UEAwwXUmlzZXVwIE5ldHdvcmtzIFJv\nb3QgQ0EwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC76J4ciMJ8Sg0m\nTP7DF2DT9zNe0Csk4myoMFC57rfJeqsAlJCv1XMzBmXrw8wq/9z7XHv6n/0sWU7a\n7cF2hLR33ktjwODlx7vorU39/lXLndo492ZBhXQtG1INMShyv+nlmzO6GT7ESfNE\nLliFitEzwIegpMqxCIHXFuobGSCWF4N0qLHkq/SYUMoOJ96O3hmPSl1kFDRMtWXY\niw1SEKjUvpyDJpVs3NGxeLCaA7bAWhDY5s5Yb2fA1o8ICAqhowurowJpW7n5ZuLK\n5VNTlNy6nZpkjt1QycYvNycffyPOFm/Q/RKDlvnorJIrihPkyniV3YY5cGgP+Qkx\nHUOT0uLA6LHtzfiyaOqkXwc4b0ZcQD5Vbf6Prd20Ppt6ei0zazkUPwxld3hgyw58\nm/4UIjG3PInWTNf293GngK2Bnz8Qx9e/6TueMSAn/3JBLem56E0WtmbLVjvko+LF\nPM5xA+m0BmuSJtrD1MUCXMhqYTtiOvgLBlUm5zkNxALzG+cXB28k6XikXt6MRG7q\nhzIPG38zwkooM55yy5i1YfcIi5NjMH6A+t4IJxxwb67MSb6UFOwg5kFokdONZcwj\nshczHdG9gLKSBIvrKa03Nd3W2dF9hMbRu//STcQxOailDBQCnXXfAATj9pYzdY4k\nha8VCAREGAKTDAex9oXf1yRuktES4QIDAQABo2AwXjAdBgNVHQ4EFgQUC4tdmLVu\nf9hwfK4AGliaet5KkcgwDgYDVR0PAQH/BAQDAgIEMAwGA1UdEwQFMAMBAf8wHwYD\nVR0jBBgwFoAUC4tdmLVuf9hwfK4AGliaet5KkcgwDQYJKoZIhvcNAQENBQADggIB\nAGzL+GRnYu99zFoy0bXJKOGCF5XUXP/3gIXPRDqQf5g7Cu/jYMID9dB3No4Zmf7v\nqHjiSXiS8jx1j/6/Luk6PpFbT7QYm4QLs1f4BlfZOti2KE8r7KRDPIecUsUXW6P/\n3GJAVYH/+7OjA39za9AieM7+H5BELGccGrM5wfl7JeEz8in+V2ZWDzHQO4hMkiTQ\n4ZckuaL201F68YpiItBNnJ9N5nHr1MRiGyApHmLXY/wvlrOpclh95qn+lG6/2jk7\n3AmihLOKYMlPwPakJg4PYczm3icFLgTpjV5sq2md9bRyAg3oPGfAuWHmKj2Ikqch\nTd5CHKGxEEWbGUWEMP0s1A/JHWiCbDigc4Cfxhy56CWG4q0tYtnc2GMw8OAUO6Wf\nXu5pYKNkzKSEtT/MrNJt44tTZWbKV/Pi/N2Fx36my7TgTUj7g3xcE9eF4JV2H/sg\ntsK3pwE0FEqGnT4qMFbixQmc8bGyuakr23wjMvfO7eZUxBuWYR2SkcP26sozF9PF\ntGhbZHQVGZUTVPyvwahMUEhbPGVerOW0IYpxkm0x/eaWdTc4vPpf/rIlgbAjarnJ\nUN9SaWRlWKSdP4haujnzCoJbM7dU9bjvlGZNyXEekgeT0W2qFeGGp+yyUWw8tNsp\n0BuC1b7uW/bBn/xKm319wXVDvBgZgcktMolak39V7DVO\n-----END CERTIFICATE-----", - "timeStamp": "2021-08-25 00:56:22" + "timeStamp": "2021-09-16 17:22:20" } ] } \ No newline at end of file diff --git a/gui/resources/donate.svg b/gui/resources/donate.svg index 35d7c2b..67c7f77 100644 --- a/gui/resources/donate.svg +++ b/gui/resources/donate.svg @@ -1,4 +1,14 @@ - - - + + + + + + + + + + + + + diff --git a/gui/resources/fonts/Montserrat-Regular.ttf b/gui/resources/fonts/Montserrat-Regular.ttf deleted file mode 100644 index 8d443d5..0000000 Binary files a/gui/resources/fonts/Montserrat-Regular.ttf and /dev/null differ diff --git a/gui/resources/fonts/Poppins-Light.ttf b/gui/resources/fonts/Poppins-Light.ttf new file mode 100644 index 0000000..2ab0221 Binary files /dev/null and b/gui/resources/fonts/Poppins-Light.ttf differ diff --git a/gui/resources/fonts/Poppins-Thin.ttf b/gui/resources/fonts/Poppins-Thin.ttf new file mode 100644 index 0000000..f5c0fdd Binary files /dev/null and b/gui/resources/fonts/Poppins-Thin.ttf differ diff --git a/gui/resources/help.svg b/gui/resources/help.svg index 06569c8..3d2fdd9 100644 --- a/gui/resources/help.svg +++ b/gui/resources/help.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/gui/themes/themes.js b/gui/themes/themes.js index 0e9293a..1c7a7c8 100644 --- a/gui/themes/themes.js +++ b/gui/themes/themes.js @@ -48,7 +48,7 @@ const blueButton = { "focusBorder": blueFocusBorder, }; -const buttonFontSize = 20; +const buttonFontSize = 18; const buttonColor = "#eeeeee"; const bgColor = "#f3f3f3"; -- cgit v1.2.3