From c0ad32a192b00bfcbd7c991069e8e4944621f35c Mon Sep 17 00:00:00 2001
From: "B.Melnik" <b.melnik@restream.rt.ru>
Date: Fri, 28 May 2021 13:09:58 +0300
Subject: [PATCH] feat(Components): Add StatusSlider

Closes: #13
---
 sandbox/Controls.qml                  |  7 ++++
 src/StatusQ/Controls/StatusSlider.qml | 60 +++++++++++++++++++++++++++
 src/StatusQ/Controls/qmldir           |  1 +
 3 files changed, 68 insertions(+)
 create mode 100644 src/StatusQ/Controls/StatusSlider.qml

diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml
index 23b7f12c..1895ca69 100644
--- a/sandbox/Controls.qml
+++ b/sandbox/Controls.qml
@@ -134,4 +134,11 @@ GridLayout {
         icon.color: Theme.palette.miscColor7
         type: StatusChatInfoButton.Type.CommunityChat
     }
+
+    StatusSlider {
+        width: 360
+        from: 0
+        to: 100
+        value: 40
+    }
 }
diff --git a/src/StatusQ/Controls/StatusSlider.qml b/src/StatusQ/Controls/StatusSlider.qml
new file mode 100644
index 00000000..6915d447
--- /dev/null
+++ b/src/StatusQ/Controls/StatusSlider.qml
@@ -0,0 +1,60 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Slider {
+    id: statusSlider
+
+    implicitWidth: 360
+    implicitHeight: 4
+
+    leftPadding: 0
+
+    background: Rectangle {
+        implicitHeight: 4
+        implicitWidth: 100
+        color: {
+            if (statusSlider.value === statusSlider.to) {
+                return Theme.palette.primaryColor1
+            }
+            return Theme.palette.primaryColor3
+        }
+        radius: 2
+        Rectangle {
+            radius: 2
+            anchors.fill: parent
+            visible: statusSlider.value > statusSlider.from && statusSlider.value < statusSlider.to
+            gradient: Gradient {
+                GradientStop { color: Theme.palette.primaryColor1 ; position: 0 }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor1 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: 1 }
+                orientation: Gradient.Horizontal
+            }
+        }
+    } // background
+
+    handle: Rectangle {
+        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.palette.white
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: 14
+        layer.enabled: true
+        layer.effect: DropShadow {
+            width: parent.width
+            height: parent.height
+            visible: true
+            verticalOffset: 2
+            samples: 15
+            fast: true
+            cached: true
+            color: Theme.palette.dropShadow
+        }
+    }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index cc4df9ac..796e5c6f 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -12,3 +12,4 @@ StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
+StatusSlider 0.1 StatusSlider.qml