Make UI responsive.
Some more UI changes in settings panel. Fix link color in replies.
This commit is contained in:
Black Hat
parent
aa3309a184
commit
da155e07ca
|
|
@ -169,7 +169,7 @@ ColumnLayout {
|
|||
Layout.fillWidth: true
|
||||
|
||||
color: "white"
|
||||
text: replyDisplay || ""
|
||||
text: "<style>a{color: white;} .user-pill{}</style>" + (replyDisplay || "")
|
||||
|
||||
wrapMode: Label.Wrap
|
||||
textFormat: Label.RichText
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Drawer {
|
|||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 32
|
||||
anchors.margins: 16
|
||||
|
||||
Avatar {
|
||||
Layout.preferredWidth: 96
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
module Spectral.Panel
|
||||
RoomPanel 2.0 RoomPanel.qml
|
||||
RoomListPanel 2.0 RoomListPanel.qml
|
||||
RoomDrawer 2.0 RoomDrawer.qml
|
||||
|
|
|
|||
358
qml/main.qml
358
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue