From 7359f25c3197e10fb116c5902951411da47bddfd Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 12 Aug 2020 11:08:18 +0200
Subject: [PATCH] feat(StatusSlider): introduce StatusSlider component

---
 ui/shared/StatusSlider.qml | 54 ++++++++++++++++++++++++++++++++++++++
 ui/shared/qmldir           |  1 +
 2 files changed, 55 insertions(+)
 create mode 100644 ui/shared/StatusSlider.qml

diff --git a/ui/shared/StatusSlider.qml b/ui/shared/StatusSlider.qml
new file mode 100644
index 0000000000..e2810997e2
--- /dev/null
+++ b/ui/shared/StatusSlider.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.13
+import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.13
+import QtQuick.Controls 1.4 as QQC1
+import "../imports"
+
+QQC1.Slider {
+    id: slider
+    anchors.left: parent.left
+    anchors.right: parent.right
+    stepSize: ((slider.maximumValue - slider.minimumValue) / 10).toFixed(1)
+    style: SliderStyle {
+        groove: Rectangle {
+            implicitHeight: 4
+            color: {
+                if (control.value === control.maximumValue) {
+                    return Style.current.blue
+                }
+                return Style.current.lightBlue
+            }
+            radius: 10
+            Rectangle {
+                radius: 10
+                anchors.fill: parent
+                visible: control.value > control.minimumValue && control.value < control.maximumValue
+                gradient: Gradient {
+                    GradientStop { color: Style.current.blue ; position: 0 }
+                    GradientStop { color: Style.current.lightBlue ; position: (((control.value - control.minimumValue)*100)/(control.maximumValue - control.minimumValue)/100).toFixed(2) }
+                    GradientStop { color: Style.current.blue ; position: (((control.value - control.minimumValue)*100)/(control.maximumValue - control.minimumValue)/100).toFixed(2) }
+                    GradientStop { color: Style.current.lightBlue ; position: 1 }
+                    orientation: Gradient.Horizontal
+                }
+            }
+        }
+        handle: Rectangle {
+            anchors.centerIn: parent
+            color: control.pressed ? Style.current.grey : Style.current.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: "#22000000"
+            }
+        }
+    }
+}
diff --git a/ui/shared/qmldir b/ui/shared/qmldir
index e61bd286fd..97d3d2d49d 100644
--- a/ui/shared/qmldir
+++ b/ui/shared/qmldir
@@ -19,3 +19,4 @@ CopyToClipBoardButton 1.0 CopyToClipBoardButton.qml
 NotificationWindow 1.0 NotificationWindow.qml
 BlockContactConfirmationDialog 1.0 BlockContactConfirmationDialog.qml
 ConfirmationDialog 1.0 ConfirmationDialog.qml
+StatusSlider 1.0 StatusSlider.qml