From 52998d687c701f6f2e81d72a501588bd108f1f66 Mon Sep 17 00:00:00 2001
From: "B.Melnik" <b.melnik@restream.rt.ru>
Date: Thu, 20 May 2021 09:14:18 +0300
Subject: [PATCH] feat: add StatusSwitch

Closes #12
---
 sandbox/Controls.qml                    |  4 ++
 sandbox/sandbox.pro                     |  3 +-
 src/StatusQ/Controls/StatusSwitch.qml   | 66 +++++++++++++++++++++++++
 src/StatusQ/Controls/qmldir             |  1 +
 src/StatusQ/Core/Theme/ThemePalette.qml |  2 +
 5 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/StatusQ/Controls/StatusSwitch.qml

diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml
index 1341ff67..e5208f10 100644
--- a/sandbox/Controls.qml
+++ b/sandbox/Controls.qml
@@ -85,4 +85,8 @@ GridLayout {
         tooltip.text: "Chat"
         badge.value: 100
     }
+
+    StatusSwitch {
+
+    }
 }
diff --git a/sandbox/sandbox.pro b/sandbox/sandbox.pro
index 039aa49f..489806db 100644
--- a/sandbox/sandbox.pro
+++ b/sandbox/sandbox.pro
@@ -34,4 +34,5 @@ HEADERS += \
 DISTFILES += \
     ../src/StatusQ/Controls/StatusBaseButton.qml \
     ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml
+    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
+    ../src/StatusQ/Controls/StatusSwitch.qml
diff --git a/src/StatusQ/Controls/StatusSwitch.qml b/src/StatusQ/Controls/StatusSwitch.qml
new file mode 100644
index 00000000..370b8d87
--- /dev/null
+++ b/src/StatusQ/Controls/StatusSwitch.qml
@@ -0,0 +1,66 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Switch {
+    id: statusSwitch
+
+    indicator: Rectangle {
+        id: oval
+        implicitWidth: 52
+        implicitHeight: 28
+        x: statusSwitch.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 14
+        color: statusSwitch.checked ? Theme.palette.primaryColor1
+                               : Theme.palette.directColor8
+
+
+        Rectangle {
+            id: circle
+            y: 4
+            width: 20
+            height: 20
+            radius: 10
+            color: Theme.palette.white
+            layer.enabled: true
+            layer.effect: DropShadow {
+                width: parent.width
+                height: parent.height
+                visible: true
+                verticalOffset: 1
+                fast: true
+                cached: true
+                color: Theme.palette.dropShadow
+            }
+
+            states: [
+                State {
+                    name: "on"
+                    when: statusSwitch.checked
+                    PropertyChanges { target: circle; x: oval.width - circle.width - 4 }
+                },
+                State {
+                    name: "off"
+                    when: !statusSwitch.checked
+                    PropertyChanges { target: circle; x: 4 }
+                }
+            ]
+
+            transitions: Transition {
+                reversible: true
+                NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120; }
+            }
+        }
+    }
+
+    contentItem: StatusBaseText {
+        text: statusSwitch.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: !!statusSwitch.text ? statusSwitch.indicator.width + statusSwitch.spacing : statusSwitch.indicator.width
+    }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index d10d2d81..de217d6a 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -8,4 +8,5 @@ StatusButton 0.1 StatusButton.qml
 StatusFlatButton 0.1 StatusFlatButton.qml
 StatusRoundButton 0.1 StatusRoundButton.qml
 StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
+StatusSwitch 0.1 StatusSwitch.qml
 
diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml
index cfb7e639..14455c63 100644
--- a/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -25,6 +25,8 @@ QtObject {
     property color black: getColor('black')
     property color white: getColor('white')
 
+    property color dropShadow: getColor('black', 0.12)
+
     property color baseColor1
     property color baseColor2
     property color baseColor3