new battery fml

package/contents/ui/main.qml

@@ -2,6 +2,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.3
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.kirigami 2.14 as Kirigami
 
 Item {
   id: main
@@ -24,34 +25,70 @@ Item {
   Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
 
   Plasmoid.compactRepresentation: Item {
-    Layout.minimumWidth: units.iconSizes.medium
+    Layout.minimumWidth: units.iconSizes.large
+    Layout.alignment: Qt.AlignHCenter
 
-    Image {
+    Rectangle { // battery
+      id: container
       anchors.fill: parent
-      smooth: true
+      anchors.rightMargin: 15
-      fillMode: Image.PreserveAspectFit
+      anchors.topMargin: 2
-      source: batteryIcon()
+      anchors.bottomMargin: 2
+      color: "transparent"
+      border.color: PlasmaCore.Theme.textColor
+      radius: 4
       Plasmoid.toolTipMainText: "battery level: " + batteryLevel()
       Plasmoid.toolTipSubText: "polling rate: " + pollingrate + " seconds"
+
+      Item {
+        anchors.fill: parent
+        anchors.margins: 2
+        Rectangle { // battery fill
+          anchors.left: parent.left
+          anchors.top: parent.top
+          anchors.bottom: parent.bottom
+          color: batteryColor()
+          width: parent.width * Math.max(0, Math.min(batteryPercent, 100)) / 100
+        }
+      }
+    }
+    Rectangle { // battery cap
+      anchors.left: container.right
+      anchors.leftMargin: 1
+      anchors.verticalCenter: parent.verticalCenter
+      radius: 4
+      height: parent.height / 3
+      width: 2
+      color: PlasmaCore.Theme.textColor
+    }
+    Rectangle { // symbol: headset
+      anchors.fill: parent
+      anchors.rightMargin: 23
+      color: "transparent"
+      Kirigami.Icon {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.right
+        height: container.height * 0.45
+        source: "audio-headset-symbolic"
+      }
     }
     
-    function batteryIcon() {
+
-      let iconName = "battery_100"
+    function batteryColor() {
+      let color = "red"
       if(batteryPercent == -1) // charging
-        iconName = "battery_charging"
+        color = "green";
       else if(batteryPercent == -2) // not connected
-        iconName = "battery_nc";
+        color = "red";
       else if(batteryPercent > 80)
-        iconName = "battery_100";
+        color = "green";
       else if(batteryPercent > 60)
-        iconName = "battery_80";
+        color = "green";
       else if(batteryPercent > 40)
-        iconName = "battery_60";
+        color = "yellow";
       else if(batteryPercent > 20)
-        iconName = "battery_40";
+        color = "red";
-      else
+      return color;
-        iconName = "battery_20";
-      return "../icons/" + iconName + ".png";
     }
 
     function batteryLevel() {