Improve sidePane expand toggle buttons

Animate them, use an icon that makes more sense, have a componant file

harmonyqml/components/Base/HButton.qml

@@ -3,8 +3,12 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 
 Button {
+    property int horizontalMargin: 0
+    property int verticalMargin: 0
+
     property string iconName: ""
     property var iconDimension: null
+    property var iconTransform: null
     property bool circle: false
 
     property int fontSize: HStyle.fontSize.normal
@@ -59,6 +63,12 @@ Button {
             HIcon {
                 svgName: loading ? "hourglass" : iconName
                 dimension: iconDimension || contentLayout.height
+                transform: iconTransform
+
+                Layout.topMargin: verticalMargin
+                Layout.bottomMargin: verticalMargin
+                Layout.leftMargin: horizontalMargin
+                Layout.rightMargin: horizontalMargin
             }
 
             HLabel {

harmonyqml/components/SidePane/AccountDelegate.qml

@@ -52,13 +52,8 @@ Column {
             }
         }
 
-        HButton {
+        ExpandButton {
-            id: toggleExpand
+            expandableItem: accountDelegate
-            iconName: roomCategoriesList.visible ? "up" : "down"
-            iconDimension: 16
-            backgroundColor: "transparent"
-            onClicked: accountDelegate.expanded = ! accountDelegate.expanded
-
             Layout.preferredHeight: row.height
         }
     }

harmonyqml/components/SidePane/ExpandButton.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import "../Base"
+
+HButton {
+    property var expandableItem: null
+
+    id: expandButton
+    iconName: "expand"
+    iconDimension: 16
+    backgroundColor: "transparent"
+    onClicked: expandableItem.expanded = ! expandableItem.expanded
+
+    iconTransform: Rotation {
+        origin.x: expandButton.iconDimension / 2
+        origin.y: expandButton.iconDimension / 2
+        angle: expandableItem.expanded ? 90 : 180
+        Behavior on angle { NumberAnimation { duration: 100 } }
+    }
+}

harmonyqml/components/SidePane/RoomCategoryDelegate.qml

@@ -24,13 +24,8 @@ Column {
             Layout.fillWidth: true
         }
 
-        HButton {
+        ExpandButton {
-            id: roomCategoryToggleExpand
+            expandableItem: roomCategoryDelegate
-            iconName: roomList.visible ? "up" : "down"
-            iconDimension: 16
-            backgroundColor: "transparent"
-            onClicked:
-                roomCategoryDelegate.expanded = !roomCategoryDelegate.expanded
         }
     }
 

harmonyqml/icons/down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>

harmonyqml/icons/up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>