diff options
Diffstat (limited to 'gui')
| -rw-r--r-- | gui/qml/VpnState.qml | 48 | ||||
| -rw-r--r-- | gui/qml/main.qml | 69 |
2 files changed, 61 insertions, 56 deletions
diff --git a/gui/qml/VpnState.qml b/gui/qml/VpnState.qml index 9ee4ed8..886868f 100644 --- a/gui/qml/VpnState.qml +++ b/gui/qml/VpnState.qml @@ -17,6 +17,10 @@ StateGroup { icon.source: icons["off"] } PropertyChanges { + target: vpntoggle + checked: false + } + PropertyChanges { target: statusItem text: toHuman("off") } @@ -28,14 +32,6 @@ StateGroup { target: mainCurrentGateway text: "" } - PropertyChanges { - target: mainOnBtn - visible: true - } - PropertyChanges { - target: mainOffBtn - visible: false - } }, State { name: "on" @@ -45,6 +41,10 @@ StateGroup { icon.source: icons["on"] } PropertyChanges { + target: vpntoggle + checked: true + } + PropertyChanges { target: statusItem text: toHumanWithLocation("on") } @@ -56,14 +56,6 @@ StateGroup { target: mainCurrentGateway text: qsTr("Connected to ") + ctx.currentLocation } - PropertyChanges { - target: mainOnBtn - visible: false - } - PropertyChanges { - target: mainOffBtn - visible: true - } }, State { name: "starting" @@ -84,14 +76,6 @@ StateGroup { target: mainCurrentGateway text: "" } - PropertyChanges { - target: mainOnBtn - visible: false - } - PropertyChanges { - target: mainOffBtn - visible: true - } }, State { name: "stopping" @@ -112,14 +96,6 @@ StateGroup { target: mainCurrentGateway text: "" } - PropertyChanges { - target: mainOnBtn - visible: true - } - PropertyChanges { - target: mainOffBtn - visible: false - } }, State { name: "failed" @@ -140,14 +116,6 @@ StateGroup { target: mainCurrentGateway text: "" } - PropertyChanges { - target: mainOnBtn - visible: true - } - PropertyChanges { - target: mainOffBtn - visible: false - } } ] } diff --git a/gui/qml/main.qml b/gui/qml/main.qml index bcd1031..a4352e7 100644 --- a/gui/qml/main.qml +++ b/gui/qml/main.qml @@ -2,7 +2,7 @@ import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.4 +import QtQuick.Controls 2.12 import Qt.labs.platform 1.0 @@ -51,22 +51,59 @@ Window { Layout.alignment: Text.AlignHCenter } - Button { - id: mainOnBtn - x: 80 - y: 200 - text: qsTr("on") - visible: true - onClicked: backend.switchOn() - } + SwitchDelegate { + + id: vpntoggle + + text: qsTr("") + checked: false + + Connections { + onCheckedChanged: { + if (vpntoggle.checked == true && ctx.status == "off") { + backend.switchOn() + } + if (vpntoggle.checked === false && ctx.status == "on") { + backend.switchOff() + } + } + } - Button { - id: mainOffBtn - x: 180 - y: 200 - text: qsTr("off") - visible: false - onClicked: backend.switchOff() + contentItem: Text { + rightPadding: vpntoggle.indicator.width + control.spacing + text: vpntoggle.text + font: vpntoggle.font + opacity: enabled ? 1.0 : 0.3 + color: vpntoggle.down ? "#17a81a" : "#21be2b" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + indicator: Rectangle { + implicitWidth: 48 + implicitHeight: 26 + x: vpntoggle.width - width - vpntoggle.rightPadding + y: parent.height / 2 - height / 2 + radius: 13 + color: vpntoggle.checked ? "#17a81a" : "transparent" + border.color: vpntoggle.checked ? "#17a81a" : "#cccccc" + + Rectangle { + x: vpntoggle.checked ? parent.width - width : 0 + width: 26 + height: 26 + radius: 13 + color: vpntoggle.down ? "#cccccc" : "#ffffff" + border.color: vpntoggle.checked ? (vpntoggle.down ? "#17a81a" : "#21be2b") : "#999999" + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + visible: vpntoggle.down || vpntoggle.highlighted + color: vpntoggle.down ? "#bdbebf" : "#eeeeee" + } } ComboBox { |