From 70d50110cd0faeea164800bc6c655d5040479436 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 17 Sep 2020 18:42:59 +0200
Subject: [PATCH] feat: introduce StatusSwitch component

---
 .../Profile/Sections/AdvancedContainer.qml    |  9 ++--
 .../Profile/Sections/DevicesContainer.qml     |  3 +-
 .../Profile/Sections/PrivacyContainer.qml     |  3 +-
 ui/shared/status/StatusSwitch.qml             | 46 +++++++++++++++++++
 4 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 ui/shared/status/StatusSwitch.qml

diff --git a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
index 57eca7c774..94bfb5d9a3 100644
--- a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 
 Item {
     id: advancedContainer
@@ -34,7 +35,7 @@ Item {
             //% "Wallet Tab"
             text: qsTrId("wallet-tab")
         }
-        Switch {
+        StatusSwitch {
             checked: appSettings.walletEnabled
             onCheckedChanged: function(value) {
                 appSettings.walletEnabled = this.checked
@@ -56,7 +57,7 @@ Item {
             //% "Node Management Tab"
             text: qsTrId("node-management-tab")
         }
-        Switch {
+        StatusSwitch {
             checked: nodeBtn.enabled
             onCheckedChanged: function(value) {
                 nodeBtn.enabled = this.checked
@@ -78,7 +79,7 @@ Item {
             //% "Enable testnet (Ropsten)\nCurrent network: %1"
             text: qsTrId("enable-testnet--ropsten--ncurrent-network---1").arg(profileModel.network)
         }
-        Switch {
+        StatusSwitch {
             checked: profileModel.network === "testnet_rpc"
             onCheckedChanged: {
                 if (checked && profileModel.network === "testnet_rpc" || !checked && profileModel.network === "mainnet_rpc"){
@@ -108,7 +109,7 @@ Item {
             text: qsTrId("ui-components")
         }
 
-        Switch {
+        StatusSwitch {
             checked: uiComponentBtn.enabled
             onCheckedChanged: function(value) {
                 uiComponentBtn.enabled = this.checked
diff --git a/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml b/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml
index 6dba5b9e96..e78293fcdb 100644
--- a/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 
 Item {
     id: syncContainer
@@ -187,7 +188,7 @@ Item {
                     anchors.left: enabledIcon.right
                     anchors.leftMargin: Style.current.padding
                 }
-                Switch { 
+                StatusSwitch { 
                     id: devicePairedSwitch
                     visible: !model.isUserDevice
                     checked: model.isEnabled 
diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
index 8eb887444a..fd91d25f6c 100644
--- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 
 Item {
     id: privacyContainer
@@ -93,7 +94,7 @@ Item {
                 //% "Display images in chat automatically"
                 text: qsTrId("display-images-in-chat-automatically")
             }
-            Switch {
+            StatusSwitch {
                 checked: appSettings.displayChatImages
                 onCheckedChanged: function (value) {
                     appSettings.displayChatImages = this.checked
diff --git a/ui/shared/status/StatusSwitch.qml b/ui/shared/status/StatusSwitch.qml
new file mode 100644
index 0000000000..3468bc0753
--- /dev/null
+++ b/ui/shared/status/StatusSwitch.qml
@@ -0,0 +1,46 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.13
+import "../../imports"
+import "../../shared"
+
+Switch {
+    id: control
+    text: qsTr("Switch")
+
+    indicator: Rectangle {
+        implicitWidth: 52
+        implicitHeight: 28
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 14
+        color: control.checked ? Style.current.blue : Style.current.grey
+
+        Rectangle {
+            x: control.checked ? parent.width - width-4 : 4
+            y: 4
+            width: 20
+            height: 20
+            radius: 10
+            color: Style.current.white
+            layer.enabled: true
+            layer.effect: DropShadow {
+                width: parent.width
+                height: parent.height
+                visible: true
+                verticalOffset: 1
+                fast: true
+                cached: true
+                color: "#22000000"
+            }
+        }
+    }
+
+    contentItem: StyledText {
+        text: control.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}
+