From ebcef0d57b6ecb5a40c6579f6be07182dd3033ba Mon Sep 17 00:00:00 2001 From: "kali kaneko (leap communications)" Date: Mon, 29 Nov 2021 01:45:42 +0100 Subject: [gui] motd/upgrade style --- gui/components/MotdBox.qml | 45 ++++++++++++ gui/components/Preferences.qml | 17 ++--- gui/components/Splash.qml | 152 +++++++++++++++++++++++++++++++++++++++-- gui/gui.qrc | 1 + gui/resources/angle-right.svg | 3 + gui/resources/ravens2.svg | 74 ++++++++++++++++++++ gui/resources/ravens2_01.png | Bin 0 -> 2017 bytes gui/resources/ravens2_02.png | Bin 0 -> 1712 bytes gui/resources/ravens2_03.png | Bin 0 -> 2088 bytes 9 files changed, 279 insertions(+), 13 deletions(-) create mode 100644 gui/components/MotdBox.qml create mode 100644 gui/resources/angle-right.svg create mode 100644 gui/resources/ravens2.svg create mode 100644 gui/resources/ravens2_01.png create mode 100644 gui/resources/ravens2_02.png create mode 100644 gui/resources/ravens2_03.png diff --git a/gui/components/MotdBox.qml b/gui/components/MotdBox.qml new file mode 100644 index 0000000..3d833a3 --- /dev/null +++ b/gui/components/MotdBox.qml @@ -0,0 +1,45 @@ +import QtQuick 2.9 +import QtQuick.Controls 2.2 +import QtGraphicalEffects 1.0 +import "../themes/themes.js" as Theme + +Item { + id: motdBox + width: parent.width + property var motdText: "" + property var motdLink: "" + property var url: "" + anchors.horizontalCenter: parent.horizontalCenter + + 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: motdBox.motdText + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.Wrap + font.pixelSize: Theme.fontSizeSmall - 2 + } + + Label { + id: link + color: Theme.green + width: labelWrapper.width - Theme.windowMargin + anchors.top: label.bottom + anchors.topMargin: 10 + text: motdBox.motdLink + horizontalAlignment: Text.AlignHCenter + wrapMode: Label.Wrap + font.pixelSize: Theme.fontSizeSmall + onLinkActivated: Qt.openUrlExternally(link) + } + } +} diff --git a/gui/components/Preferences.qml b/gui/components/Preferences.qml index fcd742f..3de8acb 100644 --- a/gui/components/Preferences.qml +++ b/gui/components/Preferences.qml @@ -2,6 +2,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.14 import QtQuick.Controls.Material 2.1 +import QtGraphicalEffects 1.0 import "../themes/themes.js" as Theme @@ -52,7 +53,7 @@ ThemedPage { } Label { - text: qsTr("These techniques can bypass censorship, but are slower. Please use them only if needed.") + text: qsTr("These techniques can bypass censorship, but are slower. Use them only when needed") color: "gray" visible: true wrapMode: Text.Wrap @@ -92,8 +93,7 @@ ThemedPage { } Label { - text: qsTr("Traffic is obfuscated to bypass blocks.") - font.family: "Monospace" + text: qsTr("Traffic is obfuscated to bypass blocks") color: "gray" visible: true wrapMode: Text.Wrap @@ -106,8 +106,7 @@ ThemedPage { MaterialCheckBox { id: useSnowflake - //wrapMode: Text.Wrap - text: qsTr("Use Snowflake bootstrap") + text: qsTr("Use Snowflake") enabled: false checked: false HoverHandler { @@ -122,8 +121,7 @@ ThemedPage { } Label { - text: qsTr("Snowflake needs Tor installed in your system.") - font.family: "Monospace" + text: qsTr("Snowflake needs Tor installed in your system") color: "gray" visible: true wrapMode: Text.Wrap @@ -143,7 +141,7 @@ ThemedPage { } Label { - text: qsTr("UDP can make the VPN faster. It might be blocked on certain networks.") + text: qsTr("UDP can make the VPN faster. It might be blocked on some networks") width: parent.width color: "gray" visible: true @@ -259,11 +257,14 @@ ThemedPage { if (ctx && ctx.offersUdp && ctx.udp == "true") { useUDP.checked = true } + // disabled for now, will be on next release + /* if (ctx && ctx.hasTor == "true") { useSnowflake.enabled = true } if (ctx && ctx.hasTor && ctx.snowflake == "true") { useSnowflake.checked = true } + */ } } diff --git a/gui/components/Splash.qml b/gui/components/Splash.qml index cf75108..0d49474 100644 --- a/gui/components/Splash.qml +++ b/gui/components/Splash.qml @@ -1,18 +1,52 @@ -import QtQuick 2.9 +import QtQuick 2.15 import QtQuick.Controls 2.2 import QtGraphicalEffects 1.0 +import "../themes/themes.js" as Theme Page { id: splash property int timeoutInterval: qmlDebug ? 200 : 1600 property alias errors: splashErrorBox + ToolButton { + id: closeButton + visible: false + anchors { + right: parent.right + //rightMargin: -10 + } + icon.source: "../resources/close.svg" + HoverHandler { + cursorShape: Qt.PointingHandCursor + } + onClicked: { + loader.source = "MainView.qml" + } + } + Column { width: parent.width * 0.8 anchors.horizontalCenter: parent.horizontalCenter anchors.topMargin: 24 + MotdBox { + id: motd + visible: false + anchors { + top: parent.top + topMargin: 100 + bottomMargin: 30 + } + } + VerticalSpacer { + id: motdSpacer + visible: false + height: 100 + } + + VerticalSpacer { + id: upperSpacer visible: true height: root.height * 0.25 } @@ -26,6 +60,7 @@ Page { } VerticalSpacer { + id: middleSpacer visible: true height: root.height * 0.05 } @@ -40,12 +75,103 @@ Page { InitErrors { id: splashErrorBox } + } // end Column + + Image { + id: motdImage + visible: false + height: 100 + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + source: "../resources/icon-noshield.svg" + fillMode: Image.PreserveAspectFit } Timer { id: splashTimer } + function hasMotd() { + if (ctx) { + if (isTrue(ctx.canUpgrade)) { + return true + } + return !isEmpty(ctx.motd) + } + return false + } + + function getUpgradeText() { + let t = "" + let platform = Qt.platform.os + if (platform == "windows" || platform == "osx" || platform == "linux") { + t = qsTr("There is a newer version available.") + } + return t + } + + function getUpgradeLink() { + return "" + qsTr("UPGRADE NOW") + ""; + } + + function getLinkURL() { + return "https://downloads.leap.se/RiseupVPN/" + Qt.platform.os + "/" + } + + function showMotd() { + // XXX this is not picking locales configured by LANG or LC_ALL + let isUpgrade = false + let lang = Qt.locale().name.substring(0,2) + let messages = JSON.parse(ctx.motd) + let platform = Qt.platform.os + let textEn = "" + let textLocale = "" + let link = "" + + if (ctx && isTrue(ctx.canUpgrade)) { + isUpgrade = true; + textLocale = getUpgradeText(); + link = getUpgradeLink(); + } else { + // TODO fallback in case upgrade has no text + console.debug("configured locale: " + lang) + console.debug("platform: " + Qt.platform.os) + for (let i=0; i < messages.length; i++) { + let m = messages[i] + if (m.platform == "all" || m.platform == platform) { + for (let k=0; k < m.text.length; k++) { + if (m.text[k].lang == lang) { + textLocale = m.text[k].str + break + } else if (m.text[k].lang == "en") { + testEn = m.text[k].str + } + } + break + } + } + } + if (isUpgrade) { + upperSpacer.height = 100 + } else { + // TODO get proportional to textLocale/textEn + upperSpacer.height = 50 + } + //connectionImage.height = 100 + connectionImage.visible = false + motdImage.visible = true + middleSpacer.visible = false + splashProgress.visible = false + motd.visible = true + motdSpacer.visible = true + motd.motdText = textLocale ? textLocale : textEn + motd.motdLink = link + motd.url = getLinkURL() + // FIXME if no text, just skip to main view + closeButton.visible = true + } + function delay(delayTime, cb) { splashTimer.interval = delayTime splashTimer.repeat = true @@ -54,12 +180,16 @@ Page { } function loadMainViewWhenReady() { - if (root.error != "") { + if (!isEmpty(root.error)) { return } - if (ctx && ctx.isReady || qmlDebug) { + if (ctx && isTrue(ctx.isReady) || qmlDebug) { splashTimer.stop() - loader.source = "MainView.qml" + if (hasMotd()) { + showMotd(); + } else { + loader.source = "MainView.qml" + } } else { if (!splashTimer.running) { console.debug('delay...') @@ -77,5 +207,17 @@ Page { } } - Component.onCompleted: {} + Component.onCompleted: { + } + + function isTrue(val) { + return val == "true"; + } + + function isEmpty(val) { + return val == ""; + } + } + + diff --git a/gui/gui.qrc b/gui/gui.qrc index c36f5c5..82730cc 100644 --- a/gui/gui.qrc +++ b/gui/gui.qrc @@ -60,6 +60,7 @@ resources/spy.gif resources/quit.svg resources/alert.svg + resources/angle-right.svg resources/fonts/Poppins-Thin.ttf diff --git a/gui/resources/angle-right.svg b/gui/resources/angle-right.svg new file mode 100644 index 0000000..7d72524 --- /dev/null +++ b/gui/resources/angle-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/gui/resources/ravens2.svg b/gui/resources/ravens2.svg new file mode 100644 index 0000000..bcad2ed --- /dev/null +++ b/gui/resources/ravens2.svg @@ -0,0 +1,74 @@ + +image/svg+xml + + diff --git a/gui/resources/ravens2_01.png b/gui/resources/ravens2_01.png new file mode 100644 index 0000000..2f881ff Binary files /dev/null and b/gui/resources/ravens2_01.png differ diff --git a/gui/resources/ravens2_02.png b/gui/resources/ravens2_02.png new file mode 100644 index 0000000..1ca06e4 Binary files /dev/null and b/gui/resources/ravens2_02.png differ diff --git a/gui/resources/ravens2_03.png b/gui/resources/ravens2_03.png new file mode 100644 index 0000000..df22283 Binary files /dev/null and b/gui/resources/ravens2_03.png differ -- cgit v1.2.3