From 08ce01473a873c733480c6ac8b25da899a81320f Mon Sep 17 00:00:00 2001 From: Black Hat Date: Sat, 17 Nov 2018 17:32:38 +0800 Subject: [PATCH] Add drawer on the left. --- imports/Spectral/Page/Room.qml | 63 ---- imports/Spectral/Page/Setting.qml | 5 - .../Spectral/Page/SettingAccountDelegate.qml | 110 ------- .../Spectral/Page/SettingCategoryDelegate.qml | 11 - imports/Spectral/Page/SettingForm.ui.qml | 185 ------------ imports/Spectral/Panel/RoomListPanel.qml | 272 +++++++++++++----- qml/main.qml | 10 +- res.qrc | 5 - 8 files changed, 206 insertions(+), 455 deletions(-) delete mode 100644 imports/Spectral/Page/Room.qml delete mode 100644 imports/Spectral/Page/Setting.qml delete mode 100644 imports/Spectral/Page/SettingAccountDelegate.qml delete mode 100644 imports/Spectral/Page/SettingCategoryDelegate.qml delete mode 100644 imports/Spectral/Page/SettingForm.ui.qml diff --git a/imports/Spectral/Page/Room.qml b/imports/Spectral/Page/Room.qml deleted file mode 100644 index a61c40b..0000000 --- a/imports/Spectral/Page/Room.qml +++ /dev/null @@ -1,63 +0,0 @@ -import QtQuick 2.9 - -import QtQuick 2.9 -import QtQuick.Controls 2.2 -import QtQuick.Layouts 1.3 -import QtQuick.Controls.Material 2.2 - -import Spectral.Panel 2.0 -import Spectral.Component 2.0 -import Spectral.Effect 2.0 - -import Spectral 0.1 -import Spectral.Setting 0.1 - -Page { - property alias connection: roomListModel.connection - property alias enteredRoom: roomListForm.enteredRoom - property alias filter: roomListForm.filter - - id: page - - RoomListModel { - id: roomListModel - - onNewMessage: if (!window.active) spectralController.postNotification(roomId, eventId, roomName, senderName, text, icon, iconPath) - } - - SplitView { - anchors.fill: parent - - RoomListPanel { - width: page.width * 0.35 - Layout.minimumWidth: 64 - - id: roomListForm - - clip: true - - listModel: roomListModel - - onWidthChanged: { - if (width < 240) width = 64 - } - - onLeaveRoom: roomForm.saveReadMarker(room) - } - - RoomPanel { - Layout.fillWidth: true - Layout.minimumWidth: 480 - - id: roomForm - - clip: true - - currentRoom: roomListForm.enteredRoom - } - } - - function goToEvent(eventID) { - roomForm.goToEvent(eventID) - } -} diff --git a/imports/Spectral/Page/Setting.qml b/imports/Spectral/Page/Setting.qml deleted file mode 100644 index 0385eaf..0000000 --- a/imports/Spectral/Page/Setting.qml +++ /dev/null @@ -1,5 +0,0 @@ -import QtQuick 2.9 - -SettingForm { - addAccountButton.onClicked: stackView.push(loginPage) -} diff --git a/imports/Spectral/Page/SettingAccountDelegate.qml b/imports/Spectral/Page/SettingAccountDelegate.qml deleted file mode 100644 index 5713e62..0000000 --- a/imports/Spectral/Page/SettingAccountDelegate.qml +++ /dev/null @@ -1,110 +0,0 @@ -import QtQuick 2.9 -import QtQuick.Controls 2.2 -import QtQuick.Layouts 1.3 - -import Spectral.Component 2.0 - -import Spectral 0.1 -import Spectral.Setting 0.1 - -Column { - property bool expanded: false - - spacing: 8 - - ItemDelegate { - width: accountSettingsListView.width - height: 64 - - Row { - anchors.fill: parent - anchors.margins: 8 - - spacing: 8 - - ImageItem { - width: parent.height - height: parent.height - - hint: user.displayName - source: user.paintable - } - - ColumnLayout { - Label { - text: user.displayName - } - Label { - text: user.id - } - } - } - - onClicked: expanded = !expanded - } - - ColumnLayout { - width: parent.width - 32 - height: expanded ? implicitHeight : 0 - anchors.horizontalCenter: parent.horizontalCenter - - spacing: 0 - - clip: true - - RowLayout { - Layout.fillWidth: true - - Label { - text: "Homeserver:" - } - AutoTextField { - Layout.fillWidth: true - - text: connection.homeserver - readOnly: true - } - } - - RowLayout { - Layout.fillWidth: true - - spacing: 16 - - Label { - text: "Device ID:" - } - AutoTextField { - Layout.fillWidth: true - - text: connection.deviceId - readOnly: true - } - } - - RowLayout { - Layout.fillWidth: true - - spacing: 16 - - Label { - text: "Access Token:" - } - AutoTextField { - Layout.fillWidth: true - - text: connection.accessToken - readOnly: true - } - } - - Button { - Layout.fillWidth: true - - highlighted: true - text: "Logout" - - onClicked: spectralController.logout(connection) - } - } -} diff --git a/imports/Spectral/Page/SettingCategoryDelegate.qml b/imports/Spectral/Page/SettingCategoryDelegate.qml deleted file mode 100644 index e78bfbb..0000000 --- a/imports/Spectral/Page/SettingCategoryDelegate.qml +++ /dev/null @@ -1,11 +0,0 @@ -import QtQuick 2.9 -import QtQuick.Controls 2.2 - -ItemDelegate { - text: category - - onClicked: { - settingStackView.clear() - settingStackView.push([accountForm, generalForm, appearanceForm, aboutForm][form]) - } -} diff --git a/imports/Spectral/Page/SettingForm.ui.qml b/imports/Spectral/Page/SettingForm.ui.qml deleted file mode 100644 index 5768451..0000000 --- a/imports/Spectral/Page/SettingForm.ui.qml +++ /dev/null @@ -1,185 +0,0 @@ -import QtQuick 2.9 -import QtQuick.Controls 2.2 -import QtQuick.Controls.Material 2.2 -import QtQuick.Layouts 1.3 - -import Spectral.Component 2.0 -import Spectral.Effect 2.0 - -import Spectral 0.1 -import Spectral.Setting 0.1 - -Page { - property alias listModel: accountSettingsListView.model - - property alias addAccountButton: addAccountButton - - implicitWidth: 400 - implicitHeight: 300 - - Page { - id: accountForm - - parent: null - - padding: 64 - - ColumnLayout { - anchors.fill: parent - - AutoListView { - Layout.fillWidth: true - Layout.fillHeight: true - - id: accountSettingsListView - - boundsBehavior: Flickable.DragOverBounds - - clip: true - - delegate: SettingAccountDelegate {} - } - - Button { - Layout.fillWidth: true - - id: addAccountButton - - text: "Add Account" - flat: true - highlighted: true - } - } - } - - Page { - id: generalForm - - parent: null - - padding: 64 - - Column { - Switch { - text: "Use press and hold instead of right click" - checked: MSettings.pressAndHold - - onCheckedChanged: MSettings.pressAndHold = checked - } - - Switch { - text: "Show tray icon" - checked: MSettings.showTray - - onCheckedChanged: MSettings.showTray = checked - } - - Switch { - text: "Confirm on Exit" - checked: MSettings.confirmOnExit - - onCheckedChanged: MSettings.confirmOnExit = checked - } - } - } - - Page { - id: appearanceForm - - parent: null - - padding: 64 - - Column { - Switch { - text: "Dark theme" - checked: MSettings.darkTheme - - onCheckedChanged: MSettings.darkTheme = checked - } - } - } - - Page { - id: aboutForm - - parent: null - - padding: 64 - - ColumnLayout { - spacing: 16 - Image { - Layout.preferredWidth: 64 - Layout.preferredHeight: 64 - - source: "qrc:/assets/img/icon.png" - } - Label { - text: "Spectral, an IM client for the Matrix protocol." - } - Label { - text: "Released under GNU General Public License, version 3." - } - } - } - - Rectangle { - width: 240 - height: parent.height - z: 10 - - id: settingDrawer - - color: MSettings.darkTheme ? "#323232" : "#f3f3f3" - - layer.enabled: true - layer.effect: ElevationEffect { - elevation: 4 - } - - Column { - anchors.fill: parent - - Repeater { - model: ListModel { - ListElement { - category: "Accounts" - form: 0 - } - ListElement { - category: "General" - form: 1 - } - ListElement { - category: "Appearance" - form: 2 - } - ListElement { - category: "About" - form: 3 - } - } - - delegate: SettingCategoryDelegate { - width: parent.width - } - } - } - } - - StackView { - anchors.fill: parent - anchors.leftMargin: settingDrawer.width - - id: settingStackView - - initialItem: aboutForm - } -} - - -/*##^## Designer { - D{i:0;autoSize:true;height:480;width:640} -} - ##^##*/ diff --git a/imports/Spectral/Panel/RoomListPanel.qml b/imports/Spectral/Panel/RoomListPanel.qml index 1d5ed6a..1858ceb 100644 --- a/imports/Spectral/Panel/RoomListPanel.qml +++ b/imports/Spectral/Panel/RoomListPanel.qml @@ -6,6 +6,7 @@ import QtQuick.Controls.Material 2.2 import Spectral.Component 2.0 import Spectral.Menu 2.0 +import Spectral.Effect 2.0 import Spectral 0.1 import Spectral.Setting 0.1 @@ -90,70 +91,205 @@ Rectangle { edge: Qt.LeftEdge + Component { + id: mainPage + + ColumnLayout { + readonly property string title: "Main" + + id: mainColumn + + spacing: 0 + + Control { + Layout.fillWidth: true + Layout.preferredHeight: 330 + + padding: 24 + + contentItem: ColumnLayout { + spacing: 4 + + ImageItem { + Layout.preferredWidth: 200 + Layout.preferredHeight: 200 + Layout.margins: 12 + Layout.alignment: Qt.AlignHCenter + + source: root.user ? root.user.paintable : null + hint: root.user ? root.user.displayName : "?" + } + + Label { + Layout.alignment: Qt.AlignHCenter + + text: root.user ? root.user.displayName : "No Name" + color: "white" + font.pointSize: 16.5 + } + + Label { + Layout.alignment: Qt.AlignHCenter + + text: root.user ? root.user.id : "@example:matrix.org" + color: "white" + opacity: 0.7 + font.pointSize: 9.75 + } + } + + background: Rectangle { color: Material.primary } + + ItemDelegate { + anchors.fill: parent + } + } + + ScrollView { + Layout.fillWidth: true + Layout.fillHeight: true + + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + + ColumnLayout { + width: mainColumn.width + spacing: 0 + + Repeater { + model: AccountListModel { + controller: spectralController + } + + delegate: ItemDelegate { + Layout.fillWidth: true + + text: user.displayName + + onClicked: { + controller.connection = connection + drawer.close() + } + } + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 1 + + color: "#e7ebeb" + } + + ItemDelegate { + Layout.fillWidth: true + + text: "Settings" + + onClicked: stackView.push(settingsPage) + } + + ItemDelegate { + Layout.fillWidth: true + + text: "Exit" + + onClicked: Qt.quit() + } + } + } + } + } + + Component { + id: settingsPage + + ScrollView { + readonly property string title: "Settings" + + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + + padding: 16 + + ColumnLayout { + width: parent.width + spacing: 0 + + Switch { + text: "Dark theme" + checked: MSettings.darkTheme + + onCheckedChanged: MSettings.darkTheme = checked + } + + Switch { + text: "Use press and hold instead of right click" + checked: MSettings.pressAndHold + + onCheckedChanged: MSettings.pressAndHold = checked + } + + Switch { + text: "Show tray icon" + checked: MSettings.showTray + + onCheckedChanged: MSettings.showTray = checked + } + + Switch { + text: "Confirm on Exit" + checked: MSettings.confirmOnExit + + onCheckedChanged: MSettings.confirmOnExit = checked + } + } + } + } + ColumnLayout { - width: parent.width + anchors.fill: parent + spacing: 0 Control { Layout.fillWidth: true - Layout.preferredHeight: 330 + Layout.preferredHeight: 64 - padding: 24 + visible: stackView.depth > 1 - contentItem: ColumnLayout { - spacing: 4 + contentItem: RowLayout { + anchors.fill: parent + ToolButton { + Layout.preferredWidth: height + Layout.fillHeight: true - ImageItem { - Layout.preferredWidth: 200 - Layout.preferredHeight: 200 - Layout.margins: 12 - Layout.alignment: Qt.AlignHCenter + contentItem: MaterialIcon { + icon: "\ue5c4" + color: "white" + } - source: root.user ? root.user.paintable : null - hint: root.user ? root.user.displayName : "?" + onClicked: stackView.pop() } - Label { - Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true - text: root.user ? root.user.displayName : "No Name" + text: stackView.currentItem.title color: "white" - font.pointSize: 16.5 - } - - Label { - Layout.alignment: Qt.AlignHCenter - - text: root.user ? root.user.id : "@example:matrix.org" - color: "white" - opacity: 0.7 - font.pointSize: 9.75 + font.pointSize: 13.5 + elide: Label.ElideRight } } - background: Rectangle { color: "#455A64" } - } - - Repeater { - model: AccountListModel { - controller: spectralController - } - - delegate: ItemDelegate { - Layout.fillWidth: true - - text: user.displayName - - onClicked: controller.connection = connection + background: Rectangle { + color: Material.primary } } - ItemDelegate { + StackView { Layout.fillWidth: true + Layout.fillHeight: true - text: "Exit" + id: stackView - onClicked: Qt.quit() + initialItem: mainPage } } } @@ -163,9 +299,13 @@ Rectangle { spacing: 0 Control { + readonly property bool isSearching: searchField.text + Layout.fillWidth: true Layout.preferredHeight: 64 + id: roomListHeader + topPadding: 12 bottomPadding: 12 leftPadding: 12 @@ -177,13 +317,17 @@ Rectangle { Layout.fillHeight: true contentItem: MaterialIcon { - icon: searchField.visible ? "\ue5cd" : "\ue8b6" - color: searchField.visible ? "#1D333E" : "#7F7F7F" + icon: roomListHeader.isSearching ? "\ue5cd" : "\ue8b6" + color: roomListHeader.isSearching ? "#1D333E" : "7F7F7F" } onClicked: { - if (searchField.visible) searchField.clear() - searchField.visible = !searchField.visible + if (searchField.focus) { + searchField.clear() + searchField.focus = false + } else { + searchField.focus = true + } } } @@ -193,7 +337,6 @@ Rectangle { id: searchField - visible: false topPadding: 0 bottomPadding: 0 placeholderText: "Search..." @@ -201,25 +344,12 @@ Rectangle { background: Item {} } - Label { - Layout.fillWidth: true - Layout.fillHeight: true - - visible: !searchField.visible - - text: root.user ? root.user.displayName : "No Name" - elide: Text.ElideRight - wrapMode: Text.NoWrap - font.pointSize: 12 - color: "#7F7F7F" - verticalAlignment: Text.AlignVCenter - } - ImageItem { Layout.preferredWidth: height Layout.fillHeight: true + Layout.alignment: Qt.AlignRight - visible: !searchField.visible + visible: !roomListHeader.isSearching source: root.user ? root.user.paintable : null hint: root.user ? root.user.displayName : "?" @@ -265,17 +395,17 @@ Rectangle { opacity: 0.6 wrapMode: Text.Wrap } - ItemDelegate { - Layout.preferredHeight: 32 - Layout.alignment: Qt.AlignRight - - text: "Dismiss" - Material.foreground: "white" - onClicked: errorControl.visible = false - } } - background: Rectangle { color: "#273338" } + background: Rectangle { + color: "#273338" + } + + ItemDelegate { + anchors.fill: parent + + onClicked: errorControl.visible = false + } } AutoListView { diff --git a/qml/main.qml b/qml/main.qml index 291301d..24aaeb2 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -112,9 +112,9 @@ ApplicationWindow { } - Component.onCompleted: { - spectralController.initiated.connect(function() { - if (spectralController.accountCount == 0) stackView.push(loginPage) - }) - } +// Component.onCompleted: { +// spectralController.initiated.connect(function() { +// if (spectralController.accountCount == 0) stackView.push(loginPage) +// }) +// } } diff --git a/res.qrc b/res.qrc index 133b5c7..cdb60b5 100644 --- a/res.qrc +++ b/res.qrc @@ -21,7 +21,6 @@ imports/Spectral/Menu/RoomContextMenu.qml imports/Spectral/Page/Login.qml imports/Spectral/Page/qmldir - imports/Spectral/Page/Room.qml assets/font/material.ttf assets/img/icon.icns assets/img/icon.ico @@ -30,10 +29,6 @@ imports/Spectral/Font/MaterialFont.qml imports/Spectral/Font/qmldir imports/Spectral/Setting/qmldir - imports/Spectral/Page/Setting.qml - imports/Spectral/Page/SettingForm.ui.qml - imports/Spectral/Page/SettingCategoryDelegate.qml - imports/Spectral/Page/SettingAccountDelegate.qml imports/Spectral/Page/LoginForm.ui.qml imports/Spectral/Panel/qmldir imports/Spectral/Panel/RoomDrawer.qml