From da155e07ca1da492f1684811e808860895348dcb Mon Sep 17 00:00:00 2001 From: Black Hat Date: Sun, 21 Apr 2019 20:39:38 +0800 Subject: [PATCH] Make UI responsive. Some more UI changes in settings panel. Fix link color in replies. --- .../Component/Timeline/MessageDelegate.qml | 2 +- imports/Spectral/Panel/RoomDrawer.qml | 2 +- imports/Spectral/Panel/RoomListPanel.qml | 206 +++++----- imports/Spectral/Panel/RoomPanel.qml | 11 +- imports/Spectral/Panel/qmldir | 1 + qml/main.qml | 358 +++++++++++++++++- 6 files changed, 439 insertions(+), 141 deletions(-) diff --git a/imports/Spectral/Component/Timeline/MessageDelegate.qml b/imports/Spectral/Component/Timeline/MessageDelegate.qml index a881937..3a2967e 100644 --- a/imports/Spectral/Component/Timeline/MessageDelegate.qml +++ b/imports/Spectral/Component/Timeline/MessageDelegate.qml @@ -169,7 +169,7 @@ ColumnLayout { Layout.fillWidth: true color: "white" - text: replyDisplay || "" + text: "" + (replyDisplay || "") wrapMode: Label.Wrap textFormat: Label.RichText diff --git a/imports/Spectral/Panel/RoomDrawer.qml b/imports/Spectral/Panel/RoomDrawer.qml index 475c5f2..05e942f 100644 --- a/imports/Spectral/Panel/RoomDrawer.qml +++ b/imports/Spectral/Panel/RoomDrawer.qml @@ -16,7 +16,7 @@ Drawer { ColumnLayout { anchors.fill: parent - anchors.margins: 32 + anchors.margins: 16 Avatar { Layout.preferredWidth: 96 diff --git a/imports/Spectral/Panel/RoomListPanel.qml b/imports/Spectral/Panel/RoomListPanel.qml index c382f61..7bf74c5 100644 --- a/imports/Spectral/Panel/RoomListPanel.qml +++ b/imports/Spectral/Panel/RoomListPanel.qml @@ -80,134 +80,134 @@ Item { ] } - Drawer { - width: Math.max(root.width, 400) - height: root.height +// Drawer { +// width: Math.max(root.width, 400) +// height: root.height - id: drawer +// id: drawer - edge: Qt.LeftEdge +// edge: Qt.LeftEdge - ColumnLayout { - anchors.fill: parent +// ColumnLayout { +// anchors.fill: parent - id: mainColumn +// id: mainColumn - spacing: 0 +// spacing: 0 - Control { - Layout.fillWidth: true - Layout.preferredHeight: 330 +// Control { +// Layout.fillWidth: true +// Layout.preferredHeight: 330 - padding: 24 +// padding: 24 - contentItem: ColumnLayout { - spacing: 4 +// contentItem: ColumnLayout { +// spacing: 4 - Avatar { - Layout.preferredWidth: 200 - Layout.preferredHeight: 200 - Layout.margins: 12 - Layout.alignment: Qt.AlignHCenter +// Avatar { +// Layout.preferredWidth: 200 +// Layout.preferredHeight: 200 +// Layout.margins: 12 +// Layout.alignment: Qt.AlignHCenter - source: root.user ? root.user.avatarMediaId : null - hint: root.user ? root.user.displayName : "?" - } +// source: root.user ? root.user.avatarMediaId : null +// hint: root.user ? root.user.displayName : "?" +// } - Label { - Layout.alignment: Qt.AlignHCenter +// Label { +// Layout.alignment: Qt.AlignHCenter - text: root.user ? root.user.displayName : "No Name" - color: "white" - font.pixelSize: 22 - } +// text: root.user ? root.user.displayName : "No Name" +// color: "white" +// font.pixelSize: 22 +// } - Label { - Layout.alignment: Qt.AlignHCenter +// Label { +// Layout.alignment: Qt.AlignHCenter - text: root.user ? root.user.id : "@example:matrix.org" - color: "white" - opacity: 0.7 - font.pixelSize: 13 - } - } +// text: root.user ? root.user.id : "@example:matrix.org" +// color: "white" +// opacity: 0.7 +// font.pixelSize: 13 +// } +// } - background: Rectangle { color: Material.primary } +// background: Rectangle { color: Material.primary } - RippleEffect { - anchors.fill: parent - } - } +// RippleEffect { +// anchors.fill: parent +// } +// } - ScrollView { - Layout.fillWidth: true - Layout.fillHeight: true +// ScrollView { +// Layout.fillWidth: true +// Layout.fillHeight: true - clip: true +// clip: true - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff +// ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ColumnLayout { - width: mainColumn.width - spacing: 0 +// ColumnLayout { +// width: mainColumn.width +// spacing: 0 - Repeater { - model: AccountListModel { - controller: spectralController - } +// Repeater { +// model: AccountListModel { +// controller: spectralController +// } - delegate: ItemDelegate { - Layout.fillWidth: true +// delegate: ItemDelegate { +// Layout.fillWidth: true - text: user.displayName +// text: user.displayName - onClicked: { - controller.connection = connection - drawer.close() - } - } - } +// onClicked: { +// controller.connection = connection +// drawer.close() +// } +// } +// } - ItemDelegate { - Layout.fillWidth: true +// ItemDelegate { +// Layout.fillWidth: true - text: "Add Account" +// text: "Add Account" - onClicked: loginDialog.open() - } +// onClicked: loginDialog.open() +// } - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 1 +// Rectangle { +// Layout.fillWidth: true +// Layout.preferredHeight: 1 - color: MSettings.darkTheme ? "#424242" : "#e7ebeb" - } +// color: MSettings.darkTheme ? "#424242" : "#e7ebeb" +// } - ItemDelegate { - Layout.fillWidth: true +// ItemDelegate { +// Layout.fillWidth: true - text: "Settings" - } +// text: "Settings" +// } - ItemDelegate { - Layout.fillWidth: true +// ItemDelegate { +// Layout.fillWidth: true - text: "Logout" +// text: "Logout" - onClicked: controller.logout(controller.connection) - } +// onClicked: controller.logout(controller.connection) +// } - ItemDelegate { - Layout.fillWidth: true +// ItemDelegate { +// Layout.fillWidth: true - text: "Exit" +// text: "Exit" - onClicked: Qt.quit() - } - } - } - } - } +// onClicked: Qt.quit() +// } +// } +// } +// } +// } ColumnLayout { anchors.fill: parent @@ -288,8 +288,6 @@ Item { AutoTextField { readonly property bool active: text - readonly property bool isRoom: text.match(/#.*:.*\..*/g) || text.match(/!.*:.*\..*/g) - readonly property bool isUser: text.match(/@.*:.*\..*/g) Layout.fillWidth: true Layout.fillHeight: true @@ -304,26 +302,6 @@ Item { background: Item {} } - ItemDelegate { - Layout.preferredWidth: height - Layout.fillHeight: true - - visible: searchField.isRoom || searchField.isUser - - contentItem: MaterialIcon { icon: "\ue145" } - - onClicked: { - if (searchField.isRoom) { - controller.joinRoom(controller.connection, searchField.text) - return - } - if (searchField.isUser) { - controller.createDirectChat(controller.connection, searchField.text) - return - } - } - } - Avatar { Layout.preferredWidth: height Layout.fillHeight: true @@ -336,7 +314,7 @@ Item { MouseArea { anchors.fill: parent - onClicked: drawer.open() + onClicked: detailDialog.open() } } } diff --git a/imports/Spectral/Panel/RoomPanel.qml b/imports/Spectral/Panel/RoomPanel.qml index 8cb5ce5..e6ee257 100644 --- a/imports/Spectral/Panel/RoomPanel.qml +++ b/imports/Spectral/Panel/RoomPanel.qml @@ -23,15 +23,6 @@ Item { room: currentRoom } - RoomDrawer { - width: Math.min(root.width * 0.7, 480) - height: root.height - - id: roomDrawer - - room: currentRoom - } - Label { anchors.centerIn: parent visible: !currentRoom @@ -64,7 +55,7 @@ Item { topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : "" atTop: messageListView.atYBeginning - onClicked: roomDrawer.open() + onClicked: roomDrawer.visible ? roomDrawer.close() : roomDrawer.open() } ColumnLayout { diff --git a/imports/Spectral/Panel/qmldir b/imports/Spectral/Panel/qmldir index 3e9cc65..a36677f 100644 --- a/imports/Spectral/Panel/qmldir +++ b/imports/Spectral/Panel/qmldir @@ -1,3 +1,4 @@ module Spectral.Panel RoomPanel 2.0 RoomPanel.qml RoomListPanel 2.0 RoomListPanel.qml +RoomDrawer 2.0 RoomDrawer.qml diff --git a/qml/main.qml b/qml/main.qml index 6105c72..663122f 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -14,12 +14,14 @@ import Spectral 0.1 import Spectral.Setting 0.1 ApplicationWindow { + readonly property bool inPortrait: window.width < window.height + Material.theme: MPalette.theme Material.background: MPalette.background width: 960 height: 640 - minimumWidth: 720 + minimumWidth: 480 minimumHeight: 360 id: window @@ -171,18 +173,330 @@ ApplicationWindow { Dialog { anchors.centerIn: parent - width: 200 - height: 300 + width: 480 - id: settingsDialog + id: detailDialog + + contentItem: Column { + id: detailColumn + + spacing: 0 + + Repeater { + model: AccountListModel{ + controller: spectralController + } + + delegate: Item { + width: detailColumn.width + height: 72 + + RowLayout { + anchors.fill: parent + anchors.margins: 12 + + spacing: 12 + + Avatar { + Layout.preferredWidth: height + Layout.fillHeight: true + + source: user.avatarMediaId + hint: user.displayName || "No Name" + } + + ColumnLayout { + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + + Label { + Layout.fillWidth: true + + text: user.displayName || "No Name" + color: MPalette.foreground + font.pixelSize: 16 + font.bold: true + elide: Text.ElideRight + wrapMode: Text.NoWrap + } + + Label { + Layout.fillWidth: true + + text: connection === spectralController.connection ? "Active" : "Online" + color: MPalette.lighter + font.pixelSize: 13 + elide: Text.ElideRight + wrapMode: Text.NoWrap + } + } + } + + Menu { + id: contextMenu + + MenuItem { + text: "Logout" + + onClicked: spectralController.logout(connection) + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: spectralController.connection = connection + onSecondaryClicked: contextMenu.popup() + } + } + } + + RowLayout { + width: parent.width + + MenuSeparator { + Layout.fillWidth: true + } + + ToolButton { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + contentItem: MaterialIcon { + icon: "\ue145" + color: MPalette.lighter + } + + onClicked: loginDialog.open() + } + } + + Control { + width: parent.width + + contentItem: RowLayout { + MaterialIcon { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + icon: "\ue7ff" + } + + Label { + Layout.fillWidth: true + + text: "Start a Chat" + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: joinRoomDialog.open() + } + } + + Control { + width: parent.width + + contentItem: RowLayout { + MaterialIcon { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + icon: "\ue7fc" + } + + Label { + Layout.fillWidth: true + + text: "Create a Room" + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: createRoomDialog.open() + } + } + + MenuSeparator { + width: parent.width + } + + Control { + width: parent.width + + contentItem: RowLayout { + MaterialIcon { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + icon: "\ue3a9" + } + + Label { + Layout.fillWidth: true + + text: "Night Mode" + } + + Switch { + id: darkThemeSwitch + + checked: MSettings.darkTheme + onCheckedChanged: MSettings.darkTheme = checked + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: darkThemeSwitch.checked = !darkThemeSwitch.checked + } + } + + Control { + width: parent.width + + contentItem: RowLayout { + MaterialIcon { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + icon: "\ue5d2" + } + + Label { + Layout.fillWidth: true + + text: "Enable System Tray" + } + + Switch { + id: trayIconSwitch + + checked: MSettings.showTray + onCheckedChanged: MSettings.showTray = checked + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: trayIconSwitch.checked = !trayIconSwitch.checked + } + } + + Control { + width: parent.width + + contentItem: RowLayout { + MaterialIcon { + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 + + icon: "\ue7f5" + } + + Label { + Layout.fillWidth: true + + text: "Enable Notifications" + } + + Switch { + id: notificationsSwitch + + checked: MSettings.showNotification + onCheckedChanged: MSettings.showNotification = checked + } + } + + RippleEffect { + anchors.fill: parent + + onPrimaryClicked: notificationsSwitch.checked = !notificationsSwitch.checked + } + } + } } - SplitView { - anchors.fill: parent + Dialog { + anchors.centerIn: parent + width: 360 + + id: joinRoomDialog + + title: "Start a Chat" + + contentItem: ColumnLayout { + TextField { + Layout.fillWidth: true + + id: identifierField + + placeholderText: "Room Alias/User ID" + } + } + + standardButtons: Dialog.Ok | Dialog.Cancel + + onAccepted: { + var identifier = identifierField.text + var firstChar = identifier.charAt(0) + if (firstChar == "@") { + spectralController.createDirectChat(spectralController.connection, identifier) + } else if (firstChar == "!" || firstChar == "#") { + spectralController.joinRoom(spectralController.connection, identifier) + } + } + } + + Dialog { + anchors.centerIn: parent + width: 360 + + id: createRoomDialog + + title: "Create a Room" + + contentItem: ColumnLayout { + TextField { + Layout.fillWidth: true + + id: roomNameField + + placeholderText: "Room Name" + } + + TextField { + Layout.fillWidth: true + + id: roomTopicField + + placeholderText: "Room Topic" + } + } + + standardButtons: Dialog.Ok | Dialog.Cancel + + onAccepted: spectralController.createRoom(spectralController.connection, roomNameField.text, roomTopicField.text) + } + + Drawer { + width: (inPortrait ? 0.67 : 0.3) * window.width + height: window.height + modal: inPortrait + interactive: inPortrait + position: inPortrait ? 0 : 1 + visible: !inPortrait + + id: drawer RoomListPanel { - width: window.width * 0.35 - Layout.minimumWidth: 180 + anchors.fill: parent id: roomListForm @@ -192,17 +506,31 @@ ApplicationWindow { onLeaveRoom: roomForm.saveReadMarker(room) } + } - RoomPanel { - Layout.fillWidth: true - Layout.minimumWidth: 480 + RoomPanel { + anchors.fill: parent + anchors.leftMargin: !inPortrait ? drawer.width : undefined + anchors.rightMargin: !inPortrait && roomDrawer.visible ? roomDrawer.width : undefined - id: roomForm + id: roomForm - clip: true + clip: true - currentRoom: roomListForm.enteredRoom - } + currentRoom: roomListForm.enteredRoom + } + + RoomDrawer { + width: (inPortrait ? 0.67 : 0.3) * window.width + height: window.height + modal: inPortrait + interactive: inPortrait + + edge: Qt.RightEdge + + id: roomDrawer + + room: roomListForm.enteredRoom } Binding {