Update SidePane componants, add Base.HColumnLayout

harmonyqml/components/SidePane/AccountDelegate.qml

@@ -3,21 +3,20 @@ import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
 import "../base" as Base
 
-ColumnLayout {
+Base.HColumnLayout {
     id: accountDelegate
-    spacing: 0
     width: parent.width
 
-    RowLayout {
+    property string roomListUserId: userId
+
+    Base.HRowLayout {
         id: row
-        spacing: 0
 
         Base.HAvatar { id: avatar; name: displayName; dimension: 36 }
 
-        ColumnLayout {
+        Base.HColumnLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            spacing: 0
 
             Base.HLabel {
                 id: accountLabel
@@ -29,22 +28,20 @@ ColumnLayout {
                 rightPadding: leftPadding
             }
 
-            TextField {
+            Base.HTextField {
                 id: statusEdit
                 text: statusMessage || ""
                 placeholderText: qsTr("Set status message")
+                font.pixelSize: Base.HStyle.fontSize.small
                 background: null
-                color: "black"
-                selectByMouse: true
-                font.family: "Roboto"
-                font.pixelSize: 12
-                Layout.fillWidth: true
+
                 padding: 0
                 leftPadding: accountLabel.leftPadding
                 rightPadding: leftPadding
+                Layout.fillWidth: true
 
                 onEditingFinished: {
-                    Backend.setStatusMessage(userId, text)
+                    //Backend.setStatusMessage(userId, text)
                     pageStack.forceActiveFocus()
                 }
             }
@@ -65,17 +62,12 @@ ColumnLayout {
         id: roomList
         visible: true
         interactive: false  // no scrolling
-        forUserId: userId
+        userId: roomListUserId
 
-        Layout.minimumHeight:
-            roomList.visible ?
-            roomList.contentHeight :
-            0
-        Layout.maximumHeight: Layout.minimumHeight
+        Layout.preferredHeight: roomList.visible ? roomList.contentHeight : 0
 
-        Layout.minimumWidth:
+        Layout.preferredWidth:
             parent.width - Layout.leftMargin - Layout.rightMargin
-        Layout.maximumWidth: Layout.minimumWidth
 
         Layout.margins: accountList.spacing
         Layout.leftMargin:

harmonyqml/components/SidePane/AccountList.qml

@@ -4,8 +4,13 @@ import QtQuick.Layouts 1.4
 
 ListView {
     id: accountList
-    spacing: 8
-    model:  Backend.models.accounts
-    delegate: AccountDelegate {}
     clip: true
+
+    spacing: 8
+    Layout.leftMargin: spacing
+    topMargin: spacing
+    bottomMargin: spacing
+
+    model: Backend.models.accounts
+    delegate: AccountDelegate {}
 }

harmonyqml/components/SidePane/RoomDelegate.qml

@@ -5,29 +5,32 @@ import "../base" as Base
 import "utils.js" as SidePaneJS
 
 MouseArea {
-    id: root
+    id: roomDelegate
     width: roomList.width
     height: roomList.childrenHeight
 
-    onClicked: pageStack.showRoom(roomList.forUserId, roomId)
+    onClicked: pageStack.showRoom(roomList.userId, roomId)
 
-    RowLayout {
+    Base.HRowLayout {
         anchors.fill: parent
         id: row
         spacing: 1
 
-        Base.HAvatar { id: avatar; name: displayName; dimension: root.height }
-
-        ColumnLayout {
-            spacing: 0
+        Base.HAvatar {
+            id: roomAvatar
+            name: displayName
+            dimension: roomDelegate.height
+        }
 
+        Base.HColumnLayout {
             Base.HLabel {
                 id: roomLabel
                 text: displayName ? displayName : "<i>Empty room</i>"
                 textFormat: Text.StyledText
                 elide: Text.ElideRight
                 maximumLineCount: 1
-                Layout.maximumWidth: row.width - row.spacing - avatar.width
+                Layout.maximumWidth:
+                    row.width - row.totalSpacing - roomAvatar.width
                 verticalAlignment: Qt.AlignVCenter
 
                 topPadding: -2
@@ -35,10 +38,11 @@ MouseArea {
                 leftPadding: 5
                 rightPadding: leftPadding
             }
+
             Base.HLabel {
                 function getText() {
                     return SidePaneJS.getLastRoomEventText(
-                        roomId, roomList.forUserId
+                        roomId, roomList.userId
                     )
                 }
 

harmonyqml/components/SidePane/RoomList.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.4
 import "../base" as Base
 
 ListView {
-    property var forUserId: null
+    property var userId: null
 
     property int childrenHeight: 36
     property int sectionHeight: 16 + spacing
@@ -31,7 +31,7 @@ ListView {
 
     id: roomList
     spacing: 8
-    model: Backend.models.rooms.get(forUserId)
+    model: Backend.models.rooms.get(userId)
     delegate: RoomDelegate {}
 
     section.property: "category"

harmonyqml/components/SidePane/SidePane.qml

@@ -10,15 +10,14 @@ Base.HGlassRectangle {
 
     isPageStackDescendant: false
 
-    ColumnLayout {
+    Base.HColumnLayout {
         anchors.fill: parent
-        spacing: 0
 
         AccountList {
             Layout.fillWidth: true
             Layout.fillHeight: true
         }
 
-        HToolBar {}
+        PaneToolBar {}
     }
 }

harmonyqml/components/base/HColumnLayout.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+ColumnLayout {
+    id: columnLayout
+    spacing: 0
+
+    property int totalSpacing:
+        spacing * Math.max(0, (columnLayout.visibleChildren.length - 1))
+}

harmonyqml/components/base/HTextField.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.0
 TextField {
     font.family: HStyle.fontFamily.sans
     font.pixelSize: HStyle.fontSize.normal
+    color: HStyle.colors.foreground
 
     selectByMouse: true
 }