From ab6360dd9a32a11fa220b93c7e379aa4367347d9 Mon Sep 17 00:00:00 2001
From: "kali kaneko (leap communications)" <kali@leap.se>
Date: Mon, 27 Sep 2021 18:14:07 +0200
Subject: [PATCH] [ui] round boxes for preferences
---
gui/components/Preferences.qml | 168 +++++++++++++++++++++++----------
1 file changed, 117 insertions(+), 51 deletions(-)
diff --git a/gui/components/Preferences.qml b/gui/components/Preferences.qml
index 720454bb..2b0aae8a 100644
--- a/gui/components/Preferences.qml
+++ b/gui/components/Preferences.qml
@@ -1,5 +1,6 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.14
import QtQuick.Controls.Material 2.1
import "../themes/themes.js" as Theme
@@ -7,69 +8,130 @@ import "../themes/themes.js" as Theme
ThemedPage {
title: qsTr("Preferences")
- Column {
- id: prefCol
- // FIXME checkboxes in Material style force lineHeights too big.
- // need to override the style
- // See: https://bugreports.qt.io/browse/QTBUG-95385
- topPadding: root.width * 0.05
- leftPadding: root.width * 0.1
- rightPadding: root.width * 0.15
+ // TODO - convert "boxed" themedpage with white background into
+ // a QML template.
- Rectangle {
- id: turnOffWarning
- visible: false
- height: 40
- width: 300
- color: Theme.bgColor
+ Rectangle {
+ anchors.horizontalCenter: parent.horizontalCenter
+ width: root.appWidth * 0.80
+ // FIXME - just the needed height
+ height: getBoxHeight()
+ radius: 10
+ color: "white"
+
+ anchors {
+ fill: parent
+ margins: 10
+ }
+
+ ColumnLayout {
+ id: prefCol
+ width: root.appWidth * 0.80
+ // FIXME checkboxes in Material style force lineHeights too big.
+ // need to override the style
+ // See: https://bugreports.qt.io/browse/QTBUG-95385
+
+ Rectangle {
+ id: turnOffWarning
+ visible: false
+ height: 40
+ width: parent.width
+ color: Theme.bgColor
+
+
+ Label {
+ color: "red"
+ text: qsTr("Turn off the VPN to make changes")
+ width: prefCol.width
+ }
+ Layout.topMargin: 10
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ }
- anchors.horizontalCenter: parent.horizontalCenter
Label {
- color: "red"
- text: qsTr("Turn off the VPN to make changes")
- width: prefCol.width
+ id: circumLabel
+ text: qsTr("Censorship circumvention")
+ font.bold: true
+ Layout.topMargin: 10
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
}
- }
+ Label {
+ text: qsTr("These techniques can bypass censorship, but are slower. Please use them only if needed.")
+ color: "gray"
+ visible: true
+ wrapMode: Text.Wrap
+ font.pixelSize: Theme.fontSize - 3
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ Layout.preferredWidth: 240
+ }
- Label {
- text: qsTr("Anti-censorship")
- font.bold: true
- }
+ CheckBox {
+ id: useBridgesCheckBox
+ checked: false
+ text: qsTr("Use obfs4 bridges")
+ // TODO refactor - this sets wrapMode on checkbox
+ contentItem: Label {
+ text: useBridgesCheckBox.text
+ font: useBridgesCheckBox.font
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ leftPadding: useBridgesCheckBox.indicator.width + useBridgesCheckBox.spacing
+ wrapMode: Label.Wrap
+ }
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ onClicked: {
+ // TODO there's a corner case that needs to be dealt with in the backend,
+ // if an user has a manual location selected and switches to bridges:
+ // we need to fallback to "auto" selection if such location does not
+ // offer bridges
+ useBridges(checked)
+ }
+ }
- CheckBox {
- id: useBridgesCheckBox
- checked: false
- text: qsTr("Use obfs4 bridges")
- onClicked: {
- // TODO there's a corner case that needs to be dealt with in the backend,
- // if an user has a manual location selected and switches to bridges:
- // we need to fallback to "auto" selection if such location does not
- // offer bridges
- useBridges(checked)
+ CheckBox {
+ id: useSnowflake
+ //wrapMode: Label.Wrap
+ text: qsTr("Use Snowflake (experimental)")
+ enabled: false
+ checked: false
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
}
- }
- CheckBox {
- id: useSnowflake
- text: qsTr("Use Snowflake (experimental)")
- enabled: false
- checked: false
- }
+ Label {
+ text: qsTr("Transport")
+ font.bold: true
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ }
- Label {
- text: qsTr("Transport")
- font.bold: true
- }
+ Label {
+ text: qsTr("UDP can make the VPN faster")
+ width: parent.width
+ color: "gray"
+ visible: true
+ wrapMode: Text.Wrap
+ font.pixelSize: Theme.fontSize - 3
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ }
- CheckBox {
- id: useUDP
- text: qsTr("UDP")
- enabled: false
- checked: false
- onClicked: {
- doUseUDP(checked)
+ CheckBox {
+ id: useUDP
+ text: qsTr("UDP")
+ enabled: false
+ checked: false
+ Layout.leftMargin: 10
+ Layout.rightMargin: 10
+ onClicked: {
+ doUseUDP(checked)
+ }
}
}
}
@@ -145,6 +207,10 @@ ThemedPage {
}
}
+ function getBoxHeight() {
+ return prefCol.height + 15
+ }
+
Component.onCompleted: {
if (ctx && ctx.transport == "obfs4") {
useBridgesCheckBox.checked = true
--
GitLab