From 587e298988b2493062c73b64566b9b567563d39c Mon Sep 17 00:00:00 2001 From: Black Hat Date: Thu, 9 Aug 2018 19:58:19 +0800 Subject: [PATCH] Code cleanup && add minimum room management. #13 --- qml/Room.qml | 2 +- qml/component/AvatarContainer.qml | 6 +- qml/component/ButtonDelegate.qml | 6 -- qml/component/ImageStatus.qml | 9 --- qml/component/SideNav.qml | 7 +- qml/component/SideNavButton.qml | 2 +- qml/component/TextDelegate.qml | 2 +- qml/form/DetailForm.qml | 99 -------------------------- qml/form/RoomForm.qml | 114 +++++++++++++++++++++++++----- qml/form/RoomListForm.qml | 92 ++++++++++-------------- qml/form/SettingAccountForm.qml | 1 - qml/main.qml | 3 +- res.qrc | 2 - 13 files changed, 145 insertions(+), 200 deletions(-) delete mode 100644 qml/component/ButtonDelegate.qml delete mode 100644 qml/form/DetailForm.qml diff --git a/qml/Room.qml b/qml/Room.qml index cb030b8..9a8e3f7 100644 --- a/qml/Room.qml +++ b/qml/Room.qml @@ -15,7 +15,7 @@ Page { connection: page.connection -// onNewMessage: trayIcon.showMessage("New message", "New message for room " + room.displayName) + onNewMessage: trayIcon.showMessage("New message", "New message for room " + room.displayName) } RowLayout { diff --git a/qml/component/AvatarContainer.qml b/qml/component/AvatarContainer.qml index 73a78ef..6a1fc96 100644 --- a/qml/component/AvatarContainer.qml +++ b/qml/component/AvatarContainer.qml @@ -2,6 +2,8 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 Row { + readonly property bool avatarVisible: !sentByMe && aboveAuthor !== author || section !== aboveSection + spacing: 6 ImageStatus { @@ -10,7 +12,7 @@ Row { width: height height: 40 round: false - visible: !sentByMe && aboveAuthor !== author + visible: avatarVisible source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null displayText: author.displayName @@ -27,6 +29,6 @@ Row { width: height height: 40 color: "transparent" - visible: !sentByMe && aboveAuthor === author + visible: !avatarVisible } } diff --git a/qml/component/ButtonDelegate.qml b/qml/component/ButtonDelegate.qml deleted file mode 100644 index bd1217a..0000000 --- a/qml/component/ButtonDelegate.qml +++ /dev/null @@ -1,6 +0,0 @@ -import QtQuick 2.9 -import QtQuick.Controls 2.2 - -ItemDelegate { - id: itemDelegate -} diff --git a/qml/component/ImageStatus.qml b/qml/component/ImageStatus.qml index e5ce44c..adbc366 100644 --- a/qml/component/ImageStatus.qml +++ b/qml/component/ImageStatus.qml @@ -4,7 +4,6 @@ import QtGraphicalEffects 1.0 import QtQuick.Controls.Material 2.2 Item { - property bool opaqueBackground: false property bool round: true property string source: "" property string displayText: "" @@ -13,14 +12,6 @@ Item { id: item - Rectangle { - width: item.width - height: item.width - radius: round ? item.width / 2 : 0 - color: "white" - visible: opaqueBackground - } - Image { id: avatar width: item.width diff --git a/qml/component/SideNav.qml b/qml/component/SideNav.qml index 21a11e8..f61198e 100644 --- a/qml/component/SideNav.qml +++ b/qml/component/SideNav.qml @@ -3,9 +3,6 @@ import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls.Material 2.2 -Item { - Rectangle { - anchors.fill: parent - color: Material.accent - } +Rectangle { + color: Material.accent } diff --git a/qml/component/SideNavButton.qml b/qml/component/SideNavButton.qml index 2be1de0..e57d1bc 100644 --- a/qml/component/SideNavButton.qml +++ b/qml/component/SideNavButton.qml @@ -24,7 +24,7 @@ Item { } } - ButtonDelegate { + ItemDelegate { id: buttonDelegate anchors.fill: parent diff --git a/qml/component/TextDelegate.qml b/qml/component/TextDelegate.qml index f3c805b..671bc5b 100644 --- a/qml/component/TextDelegate.qml +++ b/qml/component/TextDelegate.qml @@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3 Rectangle { property bool flat: false property bool highlighted: false - property string displayText + property string displayText: "" property alias timeLabelVisible: timeText.visible property int maximumWidth diff --git a/qml/form/DetailForm.qml b/qml/form/DetailForm.qml deleted file mode 100644 index 2d327c3..0000000 --- a/qml/form/DetailForm.qml +++ /dev/null @@ -1,99 +0,0 @@ -import QtQuick 2.9 -import QtQuick.Controls 2.2 -import QtQuick.Layouts 1.3 -import QtQuick.Controls.Material 2.2 -import "qrc:/qml/component" - -Item { - ColumnLayout { - anchors.fill: parent - spacing: 0 - - Pane { - Layout.fillWidth: true - Layout.preferredHeight: 250 - padding: 32 - - background: Rectangle { - color: Material.accent - } - - Column { - anchors.fill: parent - - ImageStatus { - z: 10 - width: 96 - height: width - source: "qrc:/asset/img/avatar.png" - anchors.horizontalCenter: parent.horizontalCenter - } - - Text { - text: "Astolfo" - color: "white" - font.pointSize: 28 - anchors.horizontalCenter: parent.horizontalCenter - } - - Text { - text: "Rider of Black" - color: "#cdcdcd" - font.pointSize: 12 - anchors.horizontalCenter: parent.horizontalCenter - } - - Row { - height: 48 - anchors.horizontalCenter: parent.horizontalCenter - ItemDelegate { - width: parent.height - height: parent.height - - contentItem: MaterialIcon { icon: "\ue0b7" } - } - - ItemDelegate { - width: parent.height - height: parent.height - - contentItem: MaterialIcon { icon: "\ue62e" } - } - } - } - } - - Pane { - Layout.fillWidth: true - Layout.fillHeight: true - - leftPadding: 96 - rightPadding: 96 - - GridLayout { - width: parent.width - columns: 2 - flow: GridLayout.LeftToRight - anchors.horizontalCenter: parent.horizontalCenter - columnSpacing: 32 - - Text { - text: "Matrix ID" - } - - Text { - Layout.fillWidth: true - text: "Welcome" - } - - Text { - text: "Status" - } - - Text { - text: "Overline" - } - } - } - } -} diff --git a/qml/form/RoomForm.qml b/qml/form/RoomForm.qml index 11fdd3c..c82d7c8 100644 --- a/qml/form/RoomForm.qml +++ b/qml/form/RoomForm.qml @@ -12,19 +12,89 @@ Item { id: item property var currentRoom: null + Drawer { + id: roomDrawer + + width: Math.min(item.width * 0.7, 480) + height: item.height + + edge: Qt.RightEdge + interactive: false + + ToolButton { + contentItem: MaterialIcon { icon: "\ue5c4" } + + onClicked: roomDrawer.close() + } + + Column { + anchors.fill: parent + anchors.margins: 32 + spacing: 16 + + ImageStatus { + width: 64 + height: 64 + anchors.horizontalCenter: parent.horizontalCenter + + source: currentRoom && currentRoom.avatarUrl != "" ? "image://mxc/" + currentRoom.avatarUrl : null + displayText: currentRoom ? currentRoom.displayName : "" + } + + Label { + width: parent.width + text: currentRoom && currentRoom.id ? currentRoom.id : "" + } + + RowLayout { + width: parent.width + + TextField { + id: roomNameField + Layout.fillWidth: true + text: currentRoom && currentRoom.name ? currentRoom.name : "" + } + + ItemDelegate { + Layout.preferredWidth: height + Layout.fillHeight: true + + contentItem: MaterialIcon { icon: "\ue5ca" } + + onClicked: currentRoom.setName(roomNameField.text) + } + } + + RowLayout { + width: parent.width + + TextField { + id: roomTopicField + + Layout.fillWidth: true + text: currentRoom && currentRoom.topic ? currentRoom.topic : "" + } + + ItemDelegate { + Layout.preferredWidth: height + Layout.fillHeight: true + + contentItem: MaterialIcon { icon: "\ue5ca" } + + onClicked: currentRoom.setTopic(roomTopicField.text) + } + } + } + } + Pane { anchors.fill: parent padding: 0 - background: Item { - anchors.fill: parent + background: Label { + anchors.centerIn: parent visible: !currentRoom - Pane { anchors.fill: parent } - - Label { - text: "Please choose a room." - anchors.centerIn: parent - } + text: "Please choose a room." } ColumnLayout { @@ -33,16 +103,16 @@ Item { visible: currentRoom - Pane { - padding: 16 - + Rectangle { Layout.fillWidth: true Layout.preferredHeight: 80 - background: Rectangle { color: Material.theme == Material.Light ? "#eaeaea" : "#242424" } + color: Material.theme == Material.Light ? "#eaeaea" : "#242424" RowLayout { anchors.fill: parent + anchors.margins: 16 + spacing: 16 ImageStatus { @@ -52,12 +122,12 @@ Item { displayText: currentRoom ? currentRoom.displayName : "" } - ColumnLayout { + Column { Layout.fillWidth: true Layout.fillHeight: true Label { - Layout.fillWidth: true + width: parent.width text: currentRoom ? currentRoom.displayName : "" font.pointSize: 16 elide: Text.ElideRight @@ -65,16 +135,21 @@ Item { } Label { - Layout.fillWidth: true + width: parent.width text: currentRoom ? currentRoom.topic : "" elide: Text.ElideRight wrapMode: Text.NoWrap } } + + ToolButton { + contentItem: MaterialIcon { icon: "\ue5d2" } + + onClicked: roomDrawer.open() + } } } - RowLayout { Layout.fillWidth: true Layout.fillHeight: true @@ -137,7 +212,7 @@ Item { ScrollBar.vertical: messageListViewScrollBar - onAtYBeginningChanged: atYBeginning && currentRoom ? currentRoom.getPreviousContent(50) : {} + onAtYBeginningChanged: atYBeginning && currentRoom ? currentRoom.getPreviousContent(20) : {} onAtYEndChanged: atYEnd && currentRoom ? currentRoom.markAllMessagesAsRead() : {} RoundButton { @@ -234,7 +309,9 @@ Item { } } - background: Item { + background: Rectangle { + color: Material.theme == Material.Light ? "#eaeaea" : "#242424" + Rectangle { z: 5 width: inputField.width * inputField.progress @@ -242,7 +319,6 @@ Item { color: Material.accent opacity: 0.4 } - Rectangle { anchors.fill: parent; color: Material.theme == Material.Light ? "#eaeaea" : "#242424" } } function postMessage(text) { diff --git a/qml/form/RoomListForm.qml b/qml/form/RoomListForm.qml index 0eb95b5..afb842a 100644 --- a/qml/form/RoomListForm.qml +++ b/qml/form/RoomListForm.qml @@ -20,78 +20,65 @@ Item { anchors.fill: parent spacing: 0 - Pane { + Rectangle { z: 10 Layout.fillWidth: true Layout.preferredHeight: 80 - background: Rectangle { - color: Qt.tint(Material.accent, "#20FFFFFF") - } + color: Qt.tint(Material.accent, "#20FFFFFF") TextField { id: searchField - width: parent.width + width: parent.width - 18 height: 36 color: "black" leftPadding: mini ? 4 : 16 topPadding: 0 bottomPadding: 0 - anchors.verticalCenter: parent.verticalCenter + anchors.centerIn: parent - background: Item { - Row { - anchors.fill: parent - - MaterialIcon { - icon: "\ue8b6" - color: "white" - - width: mini ? parent.width : parent.height - height: parent.height - } - - Label { - height: parent.height - visible: !mini - text: "Search" - color: "white" - font.pointSize: 12 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - } - - Rectangle { - width: searchField.activeFocus || searchField.text ? parent.width : 0 - height: parent.height + background: Row { + MaterialIcon { + icon: "\ue8b6" color: "white" - Behavior on width { - PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 } - } + width: mini ? parent.width : parent.height + height: parent.height + } + + Label { + height: parent.height + visible: !mini + text: "Search" + color: "white" + font.pointSize: 12 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + Rectangle { + width: searchField.activeFocus || searchField.text ? parent.width : 0 + height: parent.height + color: "white" + + Behavior on width { + PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 } } } } } - Pane { + Rectangle { Layout.fillWidth: true Layout.fillHeight: true - padding: 0 - background: Item { - anchors.fill: parent - Rectangle { - anchors.fill: parent - color: Material.theme == Material.Light ? "#eaeaea" : "#242424" - } + color: Material.theme == Material.Light ? "#eaeaea" : "#242424" - Label { - z: 10 - text: mini ? "Empty" : "Here? No, not here." - anchors.centerIn: parent - visible: listView.count === 0 - } + Label { + z: 10 + text: mini ? "Empty" : "Here? No, not here." + anchors.centerIn: parent + visible: listView.count === 0 } SortFilterProxyModel { @@ -116,8 +103,7 @@ Item { ListView { id: listView - width: parent.width - height: parent.height + anchors.fill: parent model: roomListProxyModel @@ -138,8 +124,8 @@ Item { width: parent.width height: 80 onPressed: listView.currentIndex = index - onClicked: enterRoom() onPressAndHold: roomListMenu.popup() + onClicked: enterRoom() ToolTip.visible: mini && hovered ToolTip.text: name @@ -239,5 +225,5 @@ Item { } } - onCurrentRoomChanged: if (currentRoom && !currentRoom.timelineSize) currentRoom.getPreviousContent(50) + onCurrentRoomChanged: if (currentRoom && !currentRoom.timelineSize) currentRoom.getPreviousContent(20) } diff --git a/qml/form/SettingAccountForm.qml b/qml/form/SettingAccountForm.qml index ed6c2be..f040e21 100644 --- a/qml/form/SettingAccountForm.qml +++ b/qml/form/SettingAccountForm.qml @@ -17,7 +17,6 @@ Page { source: matriqueController.isLogin ? connection.localUser && connection.localUser.avatarUrl ? "image://mxc/" + connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png" displayText: matriqueController.isLogin && connection.localUser.displayName ? connection.localUser.displayName : "N" - opaqueBackground: false } ColumnLayout { diff --git a/qml/main.qml b/qml/main.qml index 5736e2b..1effbad 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -115,7 +115,6 @@ ApplicationWindow { source: matriqueController.isLogin ? connection.localUser && connection.localUser.avatarUrl ? "image://mxc/" + connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png" displayText: matriqueController.isLogin && connection.localUser.displayName ? connection.localUser.displayName : "N" - opaqueBackground: false } page: roomPage @@ -183,6 +182,7 @@ ApplicationWindow { contentItem: TextField { id: joinRoomDialogTextField + placeholderText: "#matrix:matrix.org" } onAccepted: matriqueController.joinRoom(joinRoomDialogTextField.text) @@ -206,6 +206,7 @@ ApplicationWindow { contentItem: TextField { id: directChatDialogTextField + placeholderText: "@bot:matrix.org" } onAccepted: matriqueController.createDirectChat(directChatDialogTextField.text) diff --git a/res.qrc b/res.qrc index e7ae79b..5f96f1e 100644 --- a/res.qrc +++ b/res.qrc @@ -6,12 +6,10 @@ asset/font/material.ttf qml/Login.qml qml/main.qml - qml/component/ButtonDelegate.qml qml/component/ImageStatus.qml qml/component/SideNav.qml qml/form/RoomForm.qml qml/Room.qml - qml/form/DetailForm.qml qml/component/SideNavButton.qml qml/component/MaterialIcon.qml asset/img/icon.png