diff --git a/harmonyqml/AccountDelegate.qml b/harmonyqml/AccountDelegate.qml
index a3f8ad10..45acae6b 100644
--- a/harmonyqml/AccountDelegate.qml
+++ b/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 {
- id: row
- width: parent.width
- height: avatar.height
+ Rectangle {
+ color: "#111"
+ width: parent.width - avatar.width
+ height: parent.height
- Avatar { id: avatar; username: displayName }
+ ColumnLayout {
+ anchors.fill: parent
+ spacing: 1
- Rectangle {
- color: "#111"
- width: parent.width - avatar.width
- height: parent.height
+ PlainLabel {
+ id: accountLabel
+ text: displayName
+ color: "#CCC"
+ elide: Text.ElideRight
+ maximumLineCount: 1
+ Layout.fillWidth: true
- ColumnLayout {
- anchors.fill: parent
- spacing: 1
+ topPadding: -2
+ bottomPadding: -2
+ 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 {
- id: accountLabel
- text: displayName
- horizontalAlignment: Qt.AlignHCenter
- 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
- }
+ topPadding: 0
+ bottomPadding: 0
+ leftPadding: 5
+ rightPadding: 5
}
}
}
diff --git a/harmonyqml/ActionBar.qml b/harmonyqml/ActionBar.qml
deleted file mode 100644
index 0d3e1894..00000000
--- a/harmonyqml/ActionBar.qml
+++ /dev/null
@@ -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"
- }
-}
diff --git a/harmonyqml/ActionButton.qml b/harmonyqml/ActionButton.qml
index a2c392d8..d714e120 100644
--- a/harmonyqml/ActionButton.qml
+++ b/harmonyqml/ActionButton.qml
@@ -7,13 +7,21 @@ ToolButton {
property string iconName: ""
property string targetPage: ""
- id: "root"
- width: parent.width / parent.children.length
- height: parent.height
+ function toolBarIsBig() {
+ return roomPane.width >
+ 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"
- onExited: root.background.color = "transparent"
+ onEntered: button.background.color = "#656565"
+ onExited: button.background.color = "transparent"
}
}
diff --git a/harmonyqml/PlainLabel.qml b/harmonyqml/PlainLabel.qml
index 4b17bf0c..46d1be6c 100644
--- a/harmonyqml/PlainLabel.qml
+++ b/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
diff --git a/harmonyqml/RoomDelegate.qml b/harmonyqml/RoomDelegate.qml
index 1f1200f7..a1ac25fb 100644
--- a/harmonyqml/RoomDelegate.qml
+++ b/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
}
}
diff --git a/harmonyqml/RoomHeader.qml b/harmonyqml/RoomHeader.qml
index 163ed355..745bb69c 100644
--- a/harmonyqml/RoomHeader.qml
+++ b/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 }
-
- Column {
- PlainLabel {
- height: subtitleLabel.visible ? implicitHeight : row.height
- 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
- }
+ Avatar {
+ id: "avatar"
+ Layout.alignment: Qt.AlignTop
+ dimmension: root.Layout.minimumHeight
+ username: chatPage.room.display_name
}
+
+ 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 }
}
}
diff --git a/harmonyqml/RoomPane.qml b/harmonyqml/RoomPane.qml
index 7f1e3b47..aec29082 100644
--- a/harmonyqml/RoomPane.qml
+++ b/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 {
- x: parent.x
- y: parent.y - 48 / 2
- width: parent.width
- height: parent.height + 48 / 2
+ ColumnLayout {
+ anchors.fill: parent
+ spacing: 0
+
+ TopBar {}
+
ListView {
- width: parent.width
- height: parent.height - actionBar.height
+ Layout.fillWidth: true
+ 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" }
}
}
diff --git a/harmonyqml/SendBox.qml b/harmonyqml/SendBox.qml
index 13af47c1..3d26e639 100644
--- a/harmonyqml/SendBox.qml
+++ b/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"
diff --git a/harmonyqml/TopBar.qml b/harmonyqml/TopBar.qml
new file mode 100644
index 00000000..049c65c5
--- /dev/null
+++ b/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" }
+ }
+}
diff --git a/harmonyqml/UI.qml b/harmonyqml/UI.qml
index 68c74f3d..274a78c3 100644
--- a/harmonyqml/UI.qml
+++ b/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()
diff --git a/harmonyqml/backend/dummy.py b/harmonyqml/backend/dummy.py
index 669f34ad..2cccc468 100644
--- a/harmonyqml/backend/dummy.py
+++ b/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"),
diff --git a/harmonyqml/icons/expand.svg b/harmonyqml/icons/expand.svg
new file mode 100644
index 00000000..952bb108
--- /dev/null
+++ b/harmonyqml/icons/expand.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/harmonyqml/icons/reduced_menu.svg b/harmonyqml/icons/reduced_menu.svg
new file mode 100644
index 00000000..545f9e26
--- /dev/null
+++ b/harmonyqml/icons/reduced_menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/harmonyqml/icons/search.svg b/harmonyqml/icons/search.svg
new file mode 100644
index 00000000..2c90350f
--- /dev/null
+++ b/harmonyqml/icons/search.svg
@@ -0,0 +1 @@
+
\ No newline at end of file