Change toolbar model

harmonyqml/AccountDelegate.qml

@@ -2,50 +2,52 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
 
-Column {
+Row {
     readonly property string displayName:
         Backend.getUser(section).display_name
 
+    id: row
     width: roomListView.width
-    height: paddingItem.height + row.height
+    height: Math.max(accountLabel.height + statusEdit.height, avatar.height)
 
-    Item { id: paddingItem; width: 1; height: row.height / 2 }
+    Avatar { id: avatar; username: displayName; dimmension: 32 }
 
-    Row {
+    Rectangle {
-        id: row
+        color: "#111"
-        width: parent.width
+        width: parent.width - avatar.width
-        height: avatar.height
+        height: parent.height
 
-        Avatar { id: avatar; username: displayName }
+        ColumnLayout {
+            anchors.fill: parent
+            spacing: 1
 
-        Rectangle {
+            PlainLabel {
-            color: "#111"
+                id: accountLabel
-            width: parent.width - avatar.width
+                text: displayName
-            height: parent.height
+                color: "#CCC"
+                elide: Text.ElideRight
+                maximumLineCount: 1
+                Layout.fillWidth: true
 
-            ColumnLayout {
+                topPadding: -2
-                anchors.fill: parent
+                bottomPadding: -2
-                spacing: 1
+                leftPadding: 5
+                rightPadding: 5
+            }
+            TextField {
+                id: statusEdit
+                placeholderText: qsTr("Set status message")
+                background: Rectangle { color: "#333" }
+                color: "#CCC"
+                selectByMouse: true
+                font.family: "Roboto"
+                font.pixelSize: 12
+                Layout.fillWidth: true
 
-                PlainLabel {
+                topPadding: 0
-                    id: accountLabel
+                bottomPadding: 0
-                    text: displayName
+                leftPadding: 5
-                    horizontalAlignment: Qt.AlignHCenter
+                rightPadding: 5
-                    color: "#CCC"
-                    elide: Text.ElideRight
-                    maximumLineCount: 1
-                    Layout.fillWidth: true
-                }
-                TextField {
-                    id: statusEdit
-                    placeholderText: qsTr("Set status message")
-                    background: Rectangle { color: "#333" }
-                    color: "#CCC"
-                    selectByMouse: true
-                    font.family: "Roboto"
-                    font.pixelSize: 12
-                    Layout.fillWidth: true
-                }
             }
         }
     }

harmonyqml/ActionBar.qml

@@ -1,36 +0,0 @@
-import QtQuick 2.7
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.4
-
-Row {
-    id: "root"
-    width: parent.width
-    height: 31
-    spacing: 0
-
-    ActionButton {
-        iconName: "home";
-        tooltip: "Home page"
-        targetPage: "HomePage"
-    }
-
-    ActionButton {
-        iconName: "add_account";
-        tooltip: "Add new account"
-        targetPage: "AddAccountPage"
-    }
-    ActionButton {
-        iconName: "add_room";
-        tooltip: "Create or join chat room"
-        targetPage: "AddRoomPage"
-    }
-    ActionButton {
-        iconName: "set_status";
-        tooltip: "Set status for all accounts"
-    }
-    ActionButton {
-        iconName: "settings";
-        tooltip: "Settings"
-        targetPage: "SettingsPage"
-    }
-}

harmonyqml/ActionButton.qml

@@ -7,13 +7,21 @@ ToolButton {
     property string iconName: ""
     property string targetPage: ""
 
-    id: "root"
+    function toolBarIsBig() {
-    width: parent.width / parent.children.length
+        return roomPane.width >
-    height: parent.height
+               Layout.minimumWidth * (toolBar.children.length - 2)
+    }
+
+    id: "button"
     display: ToolButton.IconOnly
     icon.source: "icons/" + iconName + ".svg"
     background: Rectangle { color: "transparent" }
 
+    visible: toolBarIsBig()
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    Layout.minimumWidth: height
+
     onClicked: { toolTip.hide(); pageStack.show_page(targetPage) }
 
     ToolTip {
@@ -28,7 +36,7 @@ ToolButton {
         hoverEnabled: true
         acceptedButtons: Qt.NoButton  // Make button receive clicks normally
 
-        onEntered: root.background.color = "#656565"
+        onEntered: button.background.color = "#656565"
-        onExited: root.background.color = "transparent"
+        onExited: button.background.color = "transparent"
     }
 }

harmonyqml/PlainLabel.qml

@@ -2,7 +2,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 
 Label {
-    property int bigSize: 22
+    property int bigSize: 24
     property int normalSize: 16
     property int smallSize: 12
 

harmonyqml/RoomDelegate.qml

@@ -3,15 +3,16 @@ import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
 
 Item {
+    id: "root"
     width: roomListView.width
-    height: avatar.height
+    height: Math.max(roomLabel.height + subtitleLabel.height, avatar.height)
 
     RowLayout {
         anchors.fill: parent
         id: row
         spacing: 1
 
-        Avatar { id: avatar; username: display_name }
+        Avatar { id: avatar; username: display_name; dimmension: 32 }
 
         ColumnLayout {
             spacing: 0
@@ -19,23 +20,29 @@ Item {
             PlainLabel {
                 id: roomLabel
                 text: display_name
-                padding: 5
-                bottomPadding: subtitleLabel.visible ? 0 : padding
                 elide: Text.ElideRight
                 maximumLineCount: 1
                 Layout.maximumWidth: row.width - row.spacing - avatar.width
                 verticalAlignment: Qt.AlignVCenter
+
+                topPadding: -2
+                bottomPadding: subtitleLabel.visible ? 0 : topPadding
+                leftPadding: 5
+                rightPadding: leftPadding
             }
             PlainLabel {
                 id: subtitleLabel
                 visible: text !== ""
                 text: subtitle
-                padding: roomLabel.padding
-                topPadding: 0
                 font.pixelSize: smallSize
                 elide: Text.ElideRight
                 maximumLineCount: 1
                 Layout.maximumWidth: roomLabel.Layout.maximumWidth
+
+                topPadding: -2
+                bottomPadding: topPadding
+                leftPadding: 5
+                rightPadding: leftPadding
             }
         }
 

harmonyqml/RoomHeader.qml

@@ -5,36 +5,40 @@ import QtQuick.Layouts 1.4
 Rectangle {
     id: root
     Layout.fillWidth: true
-    Layout.minimumHeight: avatar.height
+    Layout.minimumHeight: 32
     Layout.maximumHeight: Layout.minimumHeight
     color: "#BBB"
 
-    Row {
+    RowLayout {
         id: "row"
-        spacing: 8
+        spacing: 12
+        anchors.fill: parent
 
-        Avatar { id: "avatar"; username: chatPage.room.display_name }
+        Avatar {
-
+            id: "avatar"
-        Column {
+            Layout.alignment: Qt.AlignTop
-            PlainLabel {
+            dimmension: root.Layout.minimumHeight
-                height: subtitleLabel.visible ? implicitHeight : row.height
+            username: chatPage.room.display_name
-                id: "roomName"
-                text: chatPage.room.display_name
-                font.pixelSize: bigSize
-                elide: Text.ElideRight
-                maximumLineCount: 1
-                width: root.width - avatar.width - row.spacing * 2
-                verticalAlignment: Qt.AlignVCenter
-            }
-            PlainLabel {
-                id: subtitleLabel
-                text: chatPage.room.subtitle
-                visible: text !== ""
-                font.pixelSize: smallSize
-                elide: Text.ElideRight
-                maximumLineCount: 1
-                width: roomName.width
-            }
         }
+
+        PlainLabel {
+            id: "roomName"
+            text: chatPage.room.display_name
+            font.pixelSize: bigSize
+            elide: Text.ElideRight
+            maximumLineCount: 1
+            Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width
+        }
+
+        PlainLabel {
+            id: "roomSubtitle"
+            text: chatPage.room.subtitle
+            font.pixelSize: smallSize
+            elide: Text.ElideRight
+            maximumLineCount: 1
+            Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width - roomName.width
+        }
+
+        Item { Layout.fillWidth: true }
     }
 }

harmonyqml/RoomPane.qml

@@ -4,21 +4,21 @@ import QtQuick.Layouts 1.4
 
 Rectangle {
     id: roomPane
-    width: 180
-    Layout.minimumWidth: 48
-    Layout.fillHeight: true
     color: "gray"
     clip: true  // Avoid artifacts when resizing pane width to minimum
 
-    Column {
+    ColumnLayout {
-        x: parent.x
+        anchors.fill: parent
-        y: parent.y - 48 / 2
+        spacing: 0
-        width: parent.width
+
-        height: parent.height + 48 / 2
+        TopBar {}
+
         ListView {
-            width: parent.width
+            Layout.fillWidth: true
-            height: parent.height - actionBar.height
+            Layout.fillHeight: true
+
             id: roomListView
+            spacing: 0
             model: Backend.roomsModel
             delegate: RoomDelegate {}
             //highlight: Rectangle {color: "lightsteelblue"; radius: 5}
@@ -26,7 +26,5 @@ Rectangle {
             section.property: "account_id"
             section.delegate: AccountDelegate {}
         }
-
-        ActionBar { id: "actionBar" }
     }
 }

harmonyqml/SendBox.qml

@@ -7,7 +7,8 @@ Rectangle {
 
     id: "root"
     Layout.fillWidth: true
-    Layout.minimumHeight: textArea.implicitHeight
+    Layout.minimumHeight: 32
+    Layout.preferredHeight: textArea.implicitHeight
     // parent.height / 2 causes binding loop?
     Layout.maximumHeight: pageStack.height / 2
     color: "#BBB"

harmonyqml/TopBar.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+RowLayout {
+    id: "toolBar"
+    Layout.fillWidth: true
+    Layout.maximumHeight: 32
+    spacing: 0
+
+    ActionButton {
+        visible: ! toolBarIsBig()
+        iconName: "reduced_menu"
+        tooltip: "Menu"
+    }
+
+    ActionButton {
+        iconName: "settings"
+        tooltip: "Settings"
+        targetPage: "SettingsPage"
+    }
+
+    ActionButton {
+        iconName: "add_account"
+        tooltip: "Add new account"
+        targetPage: "AddAccountPage"
+    }
+
+    ActionButton {
+        iconName: "set_status"
+        tooltip: "Set status for all accounts"
+    }
+
+    ActionButton {
+        iconName: "search"
+        tooltip: "Filter rooms and people"
+    }
+
+
+    TextField {
+        id: filterField
+        visible: false
+        placeholderText: qsTr("Filter rooms")
+        selectByMouse: true
+        font.family: "Roboto"
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        background: Rectangle { color: "lightgray" }
+    }
+}

harmonyqml/UI.qml

@@ -2,10 +2,14 @@ import QtQuick.Controls 1.4 as Controls1
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 
+//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
 Controls1.SplitView {
     anchors.fill: parent
 
-    RoomPane {}
+    RoomPane {
+        Layout.minimumWidth: 32
+        width: 180
+    }
 
     StackView {
         function show_page(componentName) {
@@ -16,9 +20,6 @@ Controls1.SplitView {
         }
 
         id: "pageStack"
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        //initialItem: HomePage {}
         initialItem: ChatPage { room: Backend.roomsModel.get(0) }
 
         onCurrentItemChanged: currentItem.forceActiveFocus()

harmonyqml/backend/dummy.py

@@ -18,7 +18,8 @@ class DummyBackend(Backend):
         self.rooms.extend([
             Room("@renko:matrix.org", "!test:matrix.org", "Test", "Test room"),
             Room("@renko:matrix.org", "!mary:matrix.org", "Mary",
-                 "Lorem ipsum sit dolor amet", 2),
+                 "Lorem ipsum sit dolor amet this is a long text to test "
+                 "wrapping of room subtitle etc 1234 example foo bar abc", 2),
             Room("@renko:matrix.org", "!foo:matrix.org", "Another room"),
 
             Room("@mary:matrix.org", "!test:matrix.org", "Test", "Test room"),

harmonyqml/icons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>

harmonyqml/icons/reduced_menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/></svg>

harmonyqml/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>