remove ugly on/off buttons

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 {