Somewhat better hierarchy.

Init separate .qml files.
This commit is contained in:
Black Hat
2018-10-02 10:07:47 +08:00
parent 91fc03aba5
commit ae538a7c45
28 changed files with 1468 additions and 1321 deletions

View File

@@ -1,162 +1,20 @@
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import Spectral.Component 2.0
import Spectral.Setting 0.1
Page {
property var controller
Row {
anchors.fill: parent
Pane {
width: parent.width / 2
height: parent.height
background: Item {
Image {
id: background
anchors.fill: parent
source: "qrc:/assets/img/background.jpg"
fillMode: Image.PreserveAspectCrop
cache: false
}
ColorOverlay {
anchors.fill: background
source: background
color: Material.accent
opacity: 0.7
}
}
Column {
x: 32
anchors.verticalCenter: parent.verticalCenter
Label {
text: "MATRIX LOGIN."
font.pointSize: 28
font.bold: true
color: "white"
}
Label {
text: "A NEW METHOD OF MESSAGING"
font.pointSize: 12
color: "white"
}
}
LoginForm {
loginButton.onClicked: {
if (!(serverField.text.startsWith("http") && serverField.text.includes("://"))) {
loginButtonTooltip.text = "Server address should start with http(s)://"
loginButtonTooltip.open()
return
}
if (!(usernameField.text.startsWith("@") && usernameField.text.includes(":"))) {
loginButtonTooltip.text = "Username should be in format of @example:example.com"
loginButtonTooltip.open()
return
}
Pane {
width: parent.width / 2
height: parent.height
controller.loginWithCredentials(serverField.text, usernameField.text, passwordField.text)
padding: 64
ColumnLayout {
width: parent.width
id: mainCol
TextField {
Layout.fillWidth: true
id: serverField
leftPadding: 16
topPadding: 0
bottomPadding: 0
text: "https://matrix.org"
placeholderText: "Server"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
TextField {
Layout.fillWidth: true
id: usernameField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Username"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
TextField {
Layout.fillWidth: true
id: passwordField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Password"
echoMode: TextInput.Password
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
Button {
Layout.fillWidth: true
id: loginButton
text: "LOGIN"
highlighted: true
ToolTip {
id: loginButtonTooltip
}
onClicked: {
if (!(serverField.text.startsWith("http") && serverField.text.includes("://"))) {
loginButtonTooltip.text = "Server address should start with http(s)://"
loginButtonTooltip.open()
return
}
if (!(usernameField.text.startsWith("@") && usernameField.text.includes(":"))) {
loginButtonTooltip.text = "Username should be in format of @example:example.com"
loginButtonTooltip.open()
return
}
controller.loginWithCredentials(serverField.text, usernameField.text, passwordField.text)
controller.connectionAdded.connect(function() { stackView.pop() })
}
}
}
}
controller.connectionAdded.connect(function() { stackView.pop() })
}
}

View File

@@ -0,0 +1,147 @@
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import Spectral.Component 2.0
import Spectral.Setting 0.1
Page {
property var controller
property alias loginButton: loginButton
Row {
anchors.fill: parent
Pane {
width: parent.width / 2
height: parent.height
background: Item {
Image {
id: background
anchors.fill: parent
source: "qrc:/assets/img/background.jpg"
fillMode: Image.PreserveAspectCrop
cache: false
}
ColorOverlay {
anchors.fill: background
source: background
color: Material.accent
opacity: 0.7
}
}
Column {
x: 32
anchors.verticalCenter: parent.verticalCenter
Label {
text: "MATRIX LOGIN."
font.pointSize: 28
font.bold: true
color: "white"
}
Label {
text: "A NEW METHOD OF MESSAGING"
font.pointSize: 12
color: "white"
}
}
}
Pane {
width: parent.width / 2
height: parent.height
padding: 64
ColumnLayout {
width: parent.width
id: mainCol
TextField {
Layout.fillWidth: true
id: serverField
leftPadding: 16
topPadding: 0
bottomPadding: 0
text: "https://matrix.org"
placeholderText: "Server"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
TextField {
Layout.fillWidth: true
id: usernameField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Username"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
TextField {
Layout.fillWidth: true
id: passwordField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Password"
echoMode: TextInput.Password
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
Button {
Layout.fillWidth: true
id: loginButton
text: "LOGIN"
highlighted: true
ToolTip {
id: loginButtonTooltip
}
}
}
}
}
}

View File

@@ -1,55 +1,5 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral.Form 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 filter: roomListForm.filter
id: page
RoomListModel {
id: roomListModel
onNewMessage: if (!window.active) spectralController.showMessage(roomName, content, icon)
}
RowLayout {
anchors.fill: parent
spacing: 0
RoomListForm {
Layout.fillHeight: true
Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35
Layout.minimumWidth: 64
Layout.maximumWidth: 360
id: roomListForm
listModel: roomListModel
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
}
}
RoomForm {
Layout.fillWidth: true
Layout.fillHeight: true
id: roomForm
currentRoom: roomListForm.enteredRoom
}
}
RoomForm {
roomListModel.onNewMessage: if (!window.active) spectralController.showMessage(roomName, content, icon)
}

View File

@@ -0,0 +1,61 @@
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 filter: roomListForm.filter
property alias roomListModel: roomListModel
id: page
RoomListModel {
id: roomListModel
}
RowLayout {
anchors.fill: parent
spacing: 0
RoomListPanel {
Layout.fillHeight: true
Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35
Layout.minimumWidth: 64
Layout.maximumWidth: 360
id: roomListForm
listModel: roomListModel
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
}
}
RoomPanel {
Layout.fillWidth: true
Layout.fillHeight: true
id: roomForm
currentRoom: roomListForm.enteredRoom
}
}
}
/*##^## Designer {
D{i:0;autoSize:false;height:480;width:640}
}
##^##*/

View File

@@ -1,297 +1,5 @@
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
import "qrc:/js/util.js" as Util
Page {
property alias listModel: accountSettingsListView.model
Page {
id: accountForm
parent: null
padding: 64
ColumnLayout {
anchors.fill: parent
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
id: accountSettingsListView
boundsBehavior: Flickable.DragOverBounds
clip: true
delegate: 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
image: user.avatar
}
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
ListView {
Layout.fillWidth: true
Layout.preferredHeight: 24
orientation: ListView.Horizontal
spacing: 8
model: ["#498882", "#42a5f5", "#5c6bc0", "#7e57c2", "#ab47bc", "#ff7043"]
delegate: Rectangle {
width: parent.height
height: parent.height
radius: width / 2
color: modelData
MouseArea {
anchors.fill: parent
onClicked: spectralController.setColor(connection.localUserId, modelData)
}
}
}
RowLayout {
Layout.fillWidth: true
Label { text: "Homeserver:" }
TextField {
Layout.fillWidth: true
text: connection.homeserver
selectByMouse: true
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label { text: "Device ID:" }
TextField {
Layout.fillWidth: true
text: connection.deviceId
selectByMouse: true
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label { text: "Access Token:" }
TextField {
Layout.fillWidth: true
text: connection.accessToken
selectByMouse: true
readOnly: true
}
}
Button {
Layout.fillWidth: true
highlighted: true
text: "Logout"
onClicked: spectralController.logout(connection)
}
Behavior on height {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
}
}
Button {
Layout.fillWidth: true
text: "Add Account"
flat: true
highlighted: true
onClicked: stackView.push(loginPage)
}
}
}
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
}
}
}
Page {
id: appearanceForm
parent: null
padding: 64
Column {
Switch {
text: "Dark theme"
checked: MSettings.darkTheme
onCheckedChanged: MSettings.darkTheme = checked
}
Switch {
text: "Mini Room List"
checked: MSettings.miniMode
onCheckedChanged: MSettings.miniMode = 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
ItemDelegate {
width: parent.width
text: "Account"
onClicked: pushToStack(accountForm)
}
ItemDelegate {
width: parent.width
text: "General"
onClicked: pushToStack(generalForm)
}
ItemDelegate {
width: parent.width
text: "Appearance"
onClicked: pushToStack(appearanceForm)
}
ItemDelegate {
width: parent.width
text: "About"
onClicked: pushToStack(aboutForm)
}
}
}
StackView {
anchors.fill: parent
anchors.leftMargin: settingDrawer.width
id: settingStackView
}
function pushToStack(item) {
settingStackView.clear()
settingStackView.push(item)
}
SettingForm {
addAccountButton.onClicked: stackView.push(loginPage)
}

View File

@@ -0,0 +1,136 @@
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
image: user.avatar
}
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
ListView {
Layout.fillWidth: true
Layout.preferredHeight: 24
orientation: ListView.Horizontal
spacing: 8
model: ["#498882", "#42a5f5", "#5c6bc0", "#7e57c2", "#ab47bc", "#ff7043"]
delegate: Rectangle {
width: parent.height
height: parent.height
radius: width / 2
color: modelData
MouseArea {
anchors.fill: parent
onClicked: spectralController.setColor(connection.localUserId, modelData)
}
}
}
RowLayout {
Layout.fillWidth: true
Label {
text: "Homeserver:"
}
TextField {
Layout.fillWidth: true
text: connection.homeserver
selectByMouse: true
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label {
text: "Device ID:"
}
TextField {
Layout.fillWidth: true
text: connection.deviceId
selectByMouse: true
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label {
text: "Access Token:"
}
TextField {
Layout.fillWidth: true
text: connection.accessToken
selectByMouse: true
readOnly: true
}
}
Button {
Layout.fillWidth: true
highlighted: true
text: "Logout"
}
}
}

View File

@@ -0,0 +1,11 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
ItemDelegate {
text: category
onClicked: {
settingStackView.clear()
settingStackView.push([accountForm, generalForm, appearanceForm, aboutForm][form])
}
}

View File

@@ -0,0 +1,178 @@
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
ListView {
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
}
}
}
Page {
id: appearanceForm
parent: null
padding: 64
Column {
Switch {
text: "Dark theme"
checked: MSettings.darkTheme
onCheckedChanged: MSettings.darkTheme = checked
}
Switch {
text: "Mini Room List"
checked: MSettings.miniMode
onCheckedChanged: MSettings.miniMode = 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: "Account"
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}
}
##^##*/

View File

@@ -2,4 +2,3 @@ module Spectral.Page
Login 2.0 Login.qml
Room 2.0 Room.qml
Setting 2.0 Setting.qml