Add icons to sidebar entries and cleanup design

ikinuki_client/__main__.py

@@ -55,7 +55,12 @@ class ProviderImageProvider(QQuickImageProvider):
         print(p_str)
         print(size)
 
-        img = QImage.fromData(self._icon_data.encode("utf-8"))
+        # img = QImage.fromData(self._icon_data.encode("utf-8"))
+        import base64
+
+        data: bytes = base64.b64decode(self._icon_data)
+        img = QImage.fromData(data)
+        # img = QImage.fromData(self._icon_data.encode("utf-8"))
 
         # img = QImage(300, 300, QImage.Format_RGBA8888)
         # img.fill(Qt.red)

layouts/components/ContentViewElementShow.qml

@@ -27,6 +27,7 @@ Column {
             anchors.fill: img
             verticalOffset: 15
             samples: 80
+            opacity: 0.5
             color: "black"
             source: img
         }

layouts/components/Sidebar.qml

@@ -10,6 +10,7 @@ Rectangle {
     width: parent.width * 0.2
     height: parent.height
     color: "#22282A"
+    //color: "#0a3d4a"
     Column {
         anchors.fill: parent
         SidebarHeader {}

layouts/components/SidebarElement.qml

@@ -1,15 +1,29 @@
 import QtQuick 2.12
+import QtGraphicalEffects 1.12
 
 Item {
     property var provider
     property bool selected: false
 
     width: parent.width * 0.9
-    height: parent.height * 0.08
+    height: parent.height * 0.07
     anchors.right: parent.right
+    DropShadow {
+        anchors.fill: selector
+        verticalOffset: 5
+        //horizontalOffset: 5
+        samples: 20
+        color: "black"
+        opacity: 0.5
+        source: selector
+        visible: selected ? true : false
+    }
     Rectangle {
+        id: selector
         color: "white"
-        anchors.fill: parent
+        height: parent.height
+        width: parent.width * 0.95
+        //anchors.fill: parent
         visible: selected ? true : false
         radius: 10
     }
@@ -17,17 +31,41 @@ Item {
         anchors.fill: parent
         Item {
             height: parent.height
-            width: parent.width * 0.02
+            width: parent.width * 0.09
         }
-        Image {
-            source: provider.logo
+        Item {
             anchors.verticalCenter: parent.verticalCenter
+            height: 40
+            width: 40
+            Image {
+                anchors.fill: parent
+                id: logo
+                source: provider.logo
+                //y: parent.y + (parent.height / 2) - height / 2
+                //anchors.top: parent.verticalCenter
+                // anchors.verticalCenter: text.verticalCenter
+                //sourceSize.height: 50
+                //sourceSize.width: 50
+            }
+            ColorOverlay {
+                anchors.fill: logo
+                source: logo
+                color: selected ? "#3c3c3c" : "#99afb4"
+            }
+        }
+        Item {
+            height: parent.height
+            width: parent.width * 0.07
         }
         Text {
-            font.pointSize: 15
+            id: text
+            font.pointSize: 12
             text: provider.name
-            color: selected ? "black" : "white"
+            color: selected ? "#3c3c3c" : "#99afb4"
             anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: 4
+            //verticalAlignment: Text.AlignVCenter
+            //height: parent.height
         }
     }
 }