tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make UI responsive. 

Some more UI changes in settings panel.
Fix link color in replies.
This commit is contained in:
Black Hat 2019-04-21 20:39:38 +08:00
parent aa3309a184
commit da155e07ca
6 changed files with 439 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
imports/Spectral/Component/Timeline/MessageDelegate.qml
View File

@ -169,7 +169,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
color: "white" color: "white"
text: replyDisplay || "" text: "<style>a{color: white;} .user-pill{}</style>" + (replyDisplay || "")
wrapMode: Label.Wrap wrapMode: Label.Wrap
textFormat: Label.RichText textFormat: Label.RichText

2
imports/Spectral/Panel/RoomDrawer.qml
View File

@ -16,7 +16,7 @@ Drawer {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 32 anchors.margins: 16
Avatar { Avatar {
Layout.preferredWidth: 96 Layout.preferredWidth: 96

206
imports/Spectral/Panel/RoomListPanel.qml
View File

@ -80,134 +80,134 @@ Item {
] ]
} }
Drawer { // Drawer {
width: Math.max(root.width, 400) // width: Math.max(root.width, 400)
height: root.height // height: root.height
id: drawer // id: drawer
edge: Qt.LeftEdge // edge: Qt.LeftEdge
ColumnLayout { // ColumnLayout {
anchors.fill: parent // anchors.fill: parent
id: mainColumn // id: mainColumn
spacing: 0 // spacing: 0
Control { // Control {
Layout.fillWidth: true // Layout.fillWidth: true
Layout.preferredHeight: 330 // Layout.preferredHeight: 330
padding: 24 // padding: 24
contentItem: ColumnLayout { // contentItem: ColumnLayout {
spacing: 4 // spacing: 4
Avatar { // Avatar {
Layout.preferredWidth: 200 // Layout.preferredWidth: 200
Layout.preferredHeight: 200 // Layout.preferredHeight: 200
Layout.margins: 12 // Layout.margins: 12
Layout.alignment: Qt.AlignHCenter // Layout.alignment: Qt.AlignHCenter
source: root.user ? root.user.avatarMediaId : null // source: root.user ? root.user.avatarMediaId : null
hint: root.user ? root.user.displayName : "?" // hint: root.user ? root.user.displayName : "?"
} // }
Label { // Label {
Layout.alignment: Qt.AlignHCenter // Layout.alignment: Qt.AlignHCenter
text: root.user ? root.user.displayName : "No Name" // text: root.user ? root.user.displayName : "No Name"
color: "white" // color: "white"
font.pixelSize: 22 // font.pixelSize: 22
} // }
Label { // Label {
Layout.alignment: Qt.AlignHCenter // Layout.alignment: Qt.AlignHCenter
text: root.user ? root.user.id : "@example:matrix.org" // text: root.user ? root.user.id : "@example:matrix.org"
color: "white" // color: "white"
opacity: 0.7 // opacity: 0.7
font.pixelSize: 13 // font.pixelSize: 13
} // }
} // }
background: Rectangle { color: Material.primary } // background: Rectangle { color: Material.primary }
RippleEffect { // RippleEffect {
anchors.fill: parent // anchors.fill: parent
} // }
} // }
ScrollView { // ScrollView {
Layout.fillWidth: true // Layout.fillWidth: true
Layout.fillHeight: true // Layout.fillHeight: true
clip: true // clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff // ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ColumnLayout { // ColumnLayout {
width: mainColumn.width // width: mainColumn.width
spacing: 0 // spacing: 0
Repeater { // Repeater {
model: AccountListModel { // model: AccountListModel {
controller: spectralController // controller: spectralController
} // }
delegate: ItemDelegate { // delegate: ItemDelegate {
Layout.fillWidth: true // Layout.fillWidth: true
text: user.displayName // text: user.displayName
onClicked: { // onClicked: {
controller.connection = connection // controller.connection = connection
drawer.close() // drawer.close()
} // }
} // }
} // }
ItemDelegate { // ItemDelegate {
Layout.fillWidth: true // Layout.fillWidth: true
text: "Add Account" // text: "Add Account"
onClicked: loginDialog.open() // onClicked: loginDialog.open()
} // }
Rectangle { // Rectangle {
Layout.fillWidth: true // Layout.fillWidth: true
Layout.preferredHeight: 1 // Layout.preferredHeight: 1
color: MSettings.darkTheme ? "#424242" : "#e7ebeb" // color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
} // }
ItemDelegate { // ItemDelegate {
Layout.fillWidth: true // Layout.fillWidth: true
text: "Settings" // text: "Settings"
} // }
ItemDelegate { // ItemDelegate {
Layout.fillWidth: true // Layout.fillWidth: true
text: "Logout" // text: "Logout"
onClicked: controller.logout(controller.connection) // onClicked: controller.logout(controller.connection)
} // }
ItemDelegate { // ItemDelegate {
Layout.fillWidth: true // Layout.fillWidth: true
text: "Exit" // text: "Exit"
onClicked: Qt.quit() // onClicked: Qt.quit()
} // }
} // }
} // }
} // }
} // }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
@ -288,8 +288,6 @@ Item {
AutoTextField { AutoTextField {
readonly property bool active: text 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.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
@ -304,26 +302,6 @@ Item {
background: 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 { Avatar {
Layout.preferredWidth: height Layout.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
@ -336,7 +314,7 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: drawer.open() onClicked: detailDialog.open()
} }
} }
} }

11
imports/Spectral/Panel/RoomPanel.qml
View File

@ -23,15 +23,6 @@ Item {
room: currentRoom room: currentRoom
} }
RoomDrawer {
width: Math.min(root.width * 0.7, 480)
height: root.height
id: roomDrawer
room: currentRoom
}
Label { Label {
anchors.centerIn: parent anchors.centerIn: parent
visible: !currentRoom visible: !currentRoom
@ -64,7 +55,7 @@ Item {
topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : "" topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : ""
atTop: messageListView.atYBeginning atTop: messageListView.atYBeginning
onClicked: roomDrawer.open() onClicked: roomDrawer.visible ? roomDrawer.close() : roomDrawer.open()
} }
ColumnLayout { ColumnLayout {

1
imports/Spectral/Panel/qmldir
View File

@ -1,3 +1,4 @@
module Spectral.Panel module Spectral.Panel
RoomPanel 2.0 RoomPanel.qml RoomPanel 2.0 RoomPanel.qml
RoomListPanel 2.0 RoomListPanel.qml RoomListPanel 2.0 RoomListPanel.qml
RoomDrawer 2.0 RoomDrawer.qml

346
qml/main.qml
View File

@ -14,12 +14,14 @@ import Spectral 0.1
import Spectral.Setting 0.1 import Spectral.Setting 0.1
ApplicationWindow { ApplicationWindow {
readonly property bool inPortrait: window.width < window.height
Material.theme: MPalette.theme Material.theme: MPalette.theme
Material.background: MPalette.background Material.background: MPalette.background
width: 960 width: 960
height: 640 height: 640
minimumWidth: 720 minimumWidth: 480
minimumHeight: 360 minimumHeight: 360
id: window id: window
@ -171,18 +173,330 @@ ApplicationWindow {
Dialog { Dialog {
anchors.centerIn: parent anchors.centerIn: parent
width: 200 width: 480
height: 300
id: settingsDialog id: detailDialog
contentItem: Column {
id: detailColumn
spacing: 0
Repeater {
model: AccountListModel{
controller: spectralController
} }
SplitView { 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 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
}
}
}
}
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 { RoomListPanel {
width: window.width * 0.35 anchors.fill: parent
Layout.minimumWidth: 180
id: roomListForm id: roomListForm
@ -192,10 +506,12 @@ ApplicationWindow {
onLeaveRoom: roomForm.saveReadMarker(room) onLeaveRoom: roomForm.saveReadMarker(room)
} }
}
RoomPanel { RoomPanel {
Layout.fillWidth: true anchors.fill: parent
Layout.minimumWidth: 480 anchors.leftMargin: !inPortrait ? drawer.width : undefined
anchors.rightMargin: !inPortrait && roomDrawer.visible ? roomDrawer.width : undefined
id: roomForm id: roomForm
@ -203,6 +519,18 @@ ApplicationWindow {
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 { Binding {