diff options
| author | kali kaneko (leap communications) <kali@leap.se> | 2021-03-18 01:19:55 +0100 |
|---|---|---|
| committer | kali kaneko (leap communications) <kali@leap.se> | 2021-05-04 14:58:39 +0200 |
| commit | d2b276be15f676873238fc0b73af60e938bd5e76 (patch) | |
| tree | cbfbf6656670ba1215143df3d311d72869f5a206 /gui/qml/main.qml | |
| parent | 399360bd48c7690f57d68eb67818bc26065748eb (diff) | |
remove ugly on/off buttons
Diffstat (limited to 'gui/qml/main.qml')
| -rw-r--r-- | gui/qml/main.qml | 69 |
1 files changed, 53 insertions, 16 deletions
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 { |