From 815c26850266eba2e4e5d02509487452624b1c64 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 +++++++++++++++++++++--------------------- 8 files changed, 204 insertions(+), 106 deletions(-) create mode 100644 gui/components/ErrorBox.qml create mode 100644 gui/components/InitErrors.qml (limited to 'gui/components') 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": -- cgit v1.2.3