From dc89381374e240847dd491c6ab5459f5919cae3c Mon Sep 17 00:00:00 2001
From: Anton Thomasson <antonthomasson@gmail.com>
Date: Sat, 10 Oct 2020 13:01:56 +0200
Subject: [PATCH] Add glass-effect graphs

---
 harbour-seaprint.pro             |  1 +
 qml/components/CylinderGraph.qml | 44 ++++++++++++++++++++++++++++++++
 qml/components/SupplyItem.qml    |  7 ++---
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 qml/components/CylinderGraph.qml

diff --git a/harbour-seaprint.pro b/harbour-seaprint.pro
index a662fd0..b179a2e 100644
--- a/harbour-seaprint.pro
+++ b/harbour-seaprint.pro
@@ -45,6 +45,7 @@ SOURCES += src/harbour-seaprint.cpp \
     ppm2pwg/bytestream/bytestream.cpp
 
 DISTFILES += qml/harbour-seaprint.qml \
+    qml/components/CylinderGraph.qml \
     qml/components/LargeChoiceDialog.qml \
     qml/components/SupplyItem.qml \
     qml/cover/CoverPage.qml \
diff --git a/qml/components/CylinderGraph.qml b/qml/components/CylinderGraph.qml
new file mode 100644
index 0000000..99194d6
--- /dev/null
+++ b/qml/components/CylinderGraph.qml
@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Item {
+    id: cylinderGraph
+    property color color
+    property real value
+    width: Theme.itemSizeSmall/2
+    height: Theme.itemSizeSmall
+    anchors.verticalCenter: parent.verticalCenter
+
+    Rectangle {
+        id: effect
+        z: 1
+        anchors.centerIn: parent
+
+        width: Theme.itemSizeSmall*0.66
+        height: Theme.itemSizeSmall/3*0.66
+        rotation: 90
+        transformOrigin: Item.Center
+
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#80000000"}
+            GradientStop { position: 0.2; color: "#40FFFFFF"}
+            GradientStop { position: 0.4; color: "#00000000"}
+            GradientStop { position: 0.8; color: "#00000000"}
+            GradientStop { position: 0.9; color: "#40FFFFFF"}
+            GradientStop { position: 1.0; color: "#80000000"}
+        }
+    }
+    Rectangle {
+        width: Theme.itemSizeSmall*0.66*parent.value
+        height: Theme.itemSizeSmall/3*0.66
+        rotation: 90
+        transformOrigin: Item.Center
+
+        anchors.horizontalCenter: effect.horizontalCenter
+        anchors.bottom: effect.bottom
+        anchors.bottomMargin: -1*(Theme.itemSizeSmall*0.66-width)/2
+        color: cylinderGraph.color
+//        opacity: 0.7
+    }
+
+}
diff --git a/qml/components/SupplyItem.qml b/qml/components/SupplyItem.qml
index 309ac5a..49b3f7b 100644
--- a/qml/components/SupplyItem.qml
+++ b/qml/components/SupplyItem.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.6
 import Sailfish.Silica 1.0
+import "../components"
 
     Row
     {
@@ -14,11 +15,11 @@ import Sailfish.Silica 1.0
         spacing: Theme.paddingMedium
         bottomPadding: Theme.paddingMedium
 
-        Icon
+        CylinderGraph
         {
             anchors.verticalCenter: parent.verticalCenter
-            source: "image://theme/icon-s-clear-opaque-background"
-            color: item.color
+            color: parent.color
+            value: (level/high_level)
         }
         Label
         {