From 16aa6142bb183cedcc8fddd41702acf11f6f8f5a Mon Sep 17 00:00:00 2001 From: miruka Date: Mon, 25 Mar 2019 18:29:46 -0400 Subject: [PATCH] Change toolbar model --- harmonyqml/AccountDelegate.qml | 70 ++++++++++++++++--------------- harmonyqml/ActionBar.qml | 36 ---------------- harmonyqml/ActionButton.qml | 18 +++++--- harmonyqml/PlainLabel.qml | 2 +- harmonyqml/RoomDelegate.qml | 19 ++++++--- harmonyqml/RoomHeader.qml | 54 +++++++++++++----------- harmonyqml/RoomPane.qml | 22 +++++----- harmonyqml/SendBox.qml | 3 +- harmonyqml/TopBar.qml | 50 ++++++++++++++++++++++ harmonyqml/UI.qml | 9 ++-- harmonyqml/backend/dummy.py | 3 +- harmonyqml/icons/expand.svg | 1 + harmonyqml/icons/reduced_menu.svg | 1 + harmonyqml/icons/search.svg | 1 + 14 files changed, 164 insertions(+), 125 deletions(-) delete mode 100644 harmonyqml/ActionBar.qml create mode 100644 harmonyqml/TopBar.qml create mode 100644 harmonyqml/icons/expand.svg create mode 100644 harmonyqml/icons/reduced_menu.svg create mode 100644 harmonyqml/icons/search.svg 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